HTML+CSS笔记 (11.CSS布局)

布局

文档流（normal flow）

网页是一个多层结构，一层摞着一层
通过css可以分别为每一层来设置样式
作为用户来讲只能看见最上面一层(ps图层的概念)
这些层中最底下一层称为文档流，文档流是网页的基础，我们创建的元素默认都是在文档流中进行排列的
元素有两个状态：在文档流中，和不在文档流中（默认在）

元素在文档流中的特点
块元素

块元素独占一行（自上向下垂直排列 ）
默认宽度是父元素的全部（把父元素盛满）
默认高度是被内容撑开（子元素），比如子元素是一行字，那高度默认就是一行字的高度

行内元素

行内元素不独占一行，只占自身大小。
行内元素在页面中从左往右水平排列，如果一行之中不能全部容纳，就会自动换行继续自左向右排列
行元素的默认宽度和高度都是被内容撑开。

盒模型 框模型（box model）

css将页面中的所有元素设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面布局就是将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：

内容区：（content）

元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由width和height两个属性设置。
width:宽度
height：高度

边框（border）:边框的大小会影响到整个盒子的大小

设置边框，至少需要设置三个样式、

边框的宽度：border-width

可以不写，默认是三个像素。用来指定四个方向边框的宽度。
可以这么写（四个值）：border-width：10px 20px 30px 40px;
三个值：border-width：10px（上） 20px（左右） 40px（下）;
两个值：border-width：10px（上下） 20px（左右）；
一个值：border-width：10px（上下左右）;
除了border-width还有一组：border-XXX-width，XXX可以是top right bottom left；可以分别指定某一个边的宽度。

边框的颜色：border-color

用于指定四个边框的颜色：可以写四个值，三个值……和上面的border-width相似
也可以不写，默认为color（字体）的颜色

边框的样式：border-style

solid：表示实线
dotted:表示点状虚线
dashed:虚线
double：双实线
同样有四个值，同样可以具体指定一个边的样式同border-width
border-style的默认值为none(没有边框)

border的简写
1
2
3
border-width: 10px;
           border-color: coral;
           border-style: solid;

可简写为：

1
border:10px coral solid;

这三个值的顺序是可以发生变化的，同样border-XXX也可以这么写三个值。

内边距（padding）

内容和边框的距离，一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box1{
          width: 200px;
          height: 200px;
          background-color: coral;
          border: rgb(200, 206, 117) 10px solid;
          padding-top: 20px;
          padding-right: 20px;
          padding-bottom: 20px;
          padding-left: 20px;
        }
      .box2{
            /* 用box2来显示内容真实大小 */
            width: 100%;
            height: 100%;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">内容部分的真实大小</div>
    </div>
</body>
</html>

一个盒子的可见框大小：由内容区 内边距 边框共同决定。计算盒子大小时，需要将这三个区域加到一起计算。
padding可以简写：
padding：20px 30px 40px 50px;(和border的简写相同)

外边距（margin）

外边距不会影响可见框的大小。但是会影响盒子实际占地位置。
一共有四个方向的外边距
margin-top
-上外边距：设置一个正直，元素会向下移动
margin-right
-右外边距（默认情况下设置它不会有任何效果）
margin-bottom
-下外边距，设置一个正值，元素会向右移动。
margin-left
-左外边距：设置一个正值，元素会向右移动

如果是负值则往相反方向走。
元素在页面中是按照自左向右的顺序排列
所以默认情况下设置左和上外边距则会移动元素自身，
margin-top margin-left
而设置下和右边距会移动其他元素（挤别人）
margin-right margin-bottom

margin同样可以进行简写，和和border的简写相同
例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: darkturquoise;
            border: gray 20px solid;
            margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(90, 194, 137);
            border: rgb(91, 201, 201) 20px solid;

        }
    </style>
</head>
<body>
    <div class="box1">  </div>
    <div class="box2"></div>
    
</body>
</html>
盒子的水平布局

元素在其父元素中的水平方向位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
margin-right
border-right
padding-right
一个元素在其父元素中，水平布局必须要满足以下等式：
margin-left+border-left+padding-left+width+margin-right+border-right+padding-right=其父元素区的宽度（必须满足）
如果没满足就称为过渡约束，浏览器会默认进行调整。

调整规则：如果这七个值里没有为auto的情况，则浏览器会自动调整margin-right（右外边距）到满足等式
这七个值里有三个值可以设置为auto：
width
margin-left
margin-right
如果某个值为auto，则浏览器自动调整auto的值以使等式满足。(width的值如果不写，默认就是auto)
如果将一个一个宽度和一个外边距设置为auto，则宽度自动最大，设置为auto外边距会自动变为0;
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度值固定，则两外边会相等：利用这个特点给元素水平居中
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: lightcoral 10px solid;

        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: rgb(73, 126, 59);
            margin-left: auto; 
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>
盒子垂直方向的布局

垂直布局比较简单:默认情况下不指定高度父元素的高度会被内容撑开

子元素是在父元素的内容中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow来设置父元素如何处理溢出的子元素
可选值：
visible默认值 会溢出，在父元素外边显示
hidden 溢出内容不显示，直接裁剪掉
scroll 生成两个滚动条
auto 根据需要生成滚动条
还可以使用overflow-x 或overflow-y来单独设置x和y 方向的溢出问题

盒子模型外边距的折叠

相邻方向垂直外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻外边距会取两者之间的一个较大值(两者都是正值)
特殊情况：相邻的外边距一正一负，取两者的和
如果两个外边距都是负值，则取两者中绝对值较大的
兄弟元素外边距的重叠对开发是有利的，所以不需要处理
父子元素
父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒模型

行内元素不支持设置宽度和大小
可以设置padding，但垂直方向不会影响页面的布局
可以设置border，但垂直方向不会影响页面的布局。
可以设置margin，但垂直方向的margin不影响页面布局

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1{
            background-color: coral;
            width: 100px;
            height: 100px;
            /*行内元素不支持设置宽度和大小 */
            padding: 100px;
            /* 可以设置padding，但垂直方向不会影响页面的布局 */
            
        }
        .box1{
            background-color: cyan;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <span class='s1'>This is a span </span>
    <div class="box1"></div>
</body>
</html>

超链接是行内元素，如果要设置它的宽高可以使用display属性（少用）
block –>将元素设置为块元素
inline-block–>将元素设置为行内块元素（既可以设置宽高，有不会独占一行）
table –>将元素设置为表格
none –>元素不在页面里显示

visibility属性：可以设置元素的可见状态
可选值：visible默认值，元素在页面里正常显示
hidden 元素在页面中隐藏不显示，但依然占据位置

浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式
默认样式会影响到页面的布局，通常情况下编写网页必须要去除浏览器的默认样式（pc端页面）
可以具体针对元素进行设置：
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            border: solid 1px black;
        }
       
        body{
            margin:0px;
        }
        p{
            margin: 0px;
            /* 去除p标签之间的外边距 */
        }
        ul{
            margin: 0px;
            padding: 0;
            list-style: none;
            /* 去除项目符号 */
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

但简单考虑：一般写为：

1
2
3
4
5
*{
    margin:0;
    padding:0;

}

这个方法不够完美，可能去除不干净，所以要把所有的标签都看一遍，都重置一遍，这时候可以引入一个完整的重置样式表的外部CSS文件
重置样式表网上很多，现成且可用

盒子的大小

默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
box-sizing: content-box;
box-sizing用于设置盒子尺寸的计算方式（width，height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度，高度用来设置盒子可见框的大小。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfc;
            padding: 10px;
            border: 10px red solid;
            /* 默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定 */
            box-sizing: content-box;
            /* 
            box-sizing用于设置盒子尺寸的计算方式（width，height的作用）
            可选值：
            content-box  默认值，宽度和高度用来设置内容区的大小
            border-box  宽度，高度用来设置盒子可见框的大小。
             */
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>
轮廓阴影和圆角

outline用来设置元素的轮廓线，用法和border一样，和边框不同，轮廓不会影响到可见框的大小
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
第一个值：水平偏移量 正值阴影朝右偏移
第二个值：垂直偏移量 正值阴影朝下偏移
第三个值：阴影的模糊半径
第四个值：颜色
border-radius用来设置圆角，值为圆角半径大小
border-radius可以分别指定四个角的圆角
四个值：左上 右上 右下 右上
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
还有单独写法
border-top-left-radius:
左上角
border-top-right-radius:
右上角
border-bottom-left-radius:
左下角
border-bottom-right-radius:
右下角
将元素设置为圆形：可以这样写：
border-radius：50%;
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            border: 10px red solid;
            outline: solid 10px solid
            /* outline用来设置元素的轮廓线，用法和border一样，和边框不同，轮廓不会影响到可见框的大小 */
        }
        .box1{
            box-shadow: 10px 10px 10px rgb(0, 0, 0,0.4);
            /*box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
              */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: silver;
            border-radius: 20px;
        }
    </style>
    
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

浮动

浮动的介绍

CSS 的 Float（浮动），会使元素向其父元素左或向右移动，其周围的元素也会重新排列。
使用float:属性来设置元素的浮动
可选值：
none：默认值，不浮动。
left：元素向左浮动
right：元素向右浮动
元素设置浮动后，元素水平方向布局的等式便不需要强制成立
元素设置浮动后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。
浮动特点：
1.元素设置浮动后，会完全从文档流中脱离
2.元素设置浮动后，会使元素向其父元素左或向右移动
3.浮动元素，默认不会从父元素中移出
4.一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，不会盖住其他浮动元素。
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6.浮动元素不会超过它前一个浮动的兄弟元素，最多最多就是和他一样高。

浮动的主要作用是让页面中的元素可以水平排列
通过浮动可以制作一些水平方向的布局

浮动的其他特点：

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动来设置文字环绕图片的效果
语速设置浮动，从文档流中脱离，元素的一些特点也会发生改变

元素脱离文档流的特点：
块元素
1.块元素不会独占页面的一行
2.脱离文档流，块元素的宽度和高度都会被内容撑开
行内元素
行内文档脱离文档流以后会变为块元素，特点和块元素一样
脱离文档流以后，就不需要区分行内和块元素了

网页的布局

header网页头部
main网页主体
footer网页的底部
布局示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的布局</title>
    <style>
         *{
            margin:0;
            padding:0;
            list-style: none;
        }
        header{
            width: 1000px;
            height: 200px;
            margin: 0px auto;
            background-color: chocolate;
            
        }
        main{
            width: 1000px;
            height: 700px;
            margin: 10px auto;
            background-color: rgb(160, 32, 28);
            
        }
        nav{
            width: 200px;
            height: 100%;
            background-color: cornflowerblue;
            float: left;
        }
        article{
            width: 580px;
            height: 100%;
            background-color: darkgoldenrod;
            float: left;
            margin: 0px 10px;
        }
        aside{
            width: 200px;
            height: 100%;
            background-color: darkkhaki;
            float: left;
        }

        footer{
            width: 1000px;
            height: 200px;
            margin: 0px auto;
            background-color: rgb(112, 89, 72);
        }

    </style>
</head>
<body>
    <header>
        <!-- 网站的头部 -->
    </header>
    <main>
        <!-- 网站的主体 -->
        <nav>
            <!-- 左边导航栏 -->
        </nav>
        <article>
            <!-- 中间内容 -->
        </article>
        <aside>
            <!-- 右边侧栏 -->
        </aside>
    </main>
    <footer>

    </footer>
</body>
</html>

高度塌陷问题

在浮动布局里，父元素的高度是默认被子元素撑开的，
当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素的高度塌陷后其下的元素会自动上移，导致页面布局混乱
所以高度塌陷是浮动布局中一个比较常见的问题这个问题必须进行处理

BFC（块级格式化环境）

bfc是一个css中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点
1.开启BFC的元素不会被浮动元素覆盖
2.开启BFC的元素子元素和父元素的外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊的方式开启BFC
1.设置元素的浮动（不推荐）
2.将元素设置为行内块元素（不推荐）
3.将元素的overflow设置为非visible的值
常用方式：为元素设置overflow：hidden 开启BFC

clear

如果不希望某个元素因为其他浮动元素的影响改变位置，可以通过clear属性清除浮动元素的当前元素所产生的影响
clear：清除浮动元素对当前元素的影响
可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both:清除两侧影响最大的那侧
原理：设置清除浮动后，浏览器会自动为元素设置一个上外边距，以使其位置不受其他元素的影响

使用after伪类来解决高度塌陷问题

最好用的方法
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border: chocolate 10px solid;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            float: left;
        }
        .box1::after{
            content: '';
            clear: both;
            display: block;
            /* 转换为块元素 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
       
    </div>
    
</body>
</html>
clearfix

最终解决方案：clearfix
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            margin-top: 100px;
        }
        /* clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题 */
        .clearfix::before,.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

定位

定位的介绍

定位是一种更加高级的布局手段
通过定位可以将元素放到页面的任何位置
使用position属性来设置定位
可选值：static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

相对定位

将position属性设置为relative时则开启相对定位

相对定位特点：
1.如果元素开启相对定位后，如果不设置偏移量则元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提高元素的层级
4.相对定位不会脱离文档流

偏移量（offset）
垂直方向：通常情况下使用一种
top：定位元素和定位位置上边的距离。
bottom：定位元素定位位置上边的距离。
水平方向：
lift：定位元素和定位位置左边的距离。
right：定位元素和定位位置右边的距离。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(95, 160, 106);
            position: relative;
            bottom: 200px;
            left:200px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(214, 109, 61);
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>
绝对定位

将position属性设置为absolute时则开启绝对定位
绝对定位特点：
1.如果元素开启绝对定位后，如果不设置偏移量则元素位置不会发生变化
2.绝对定位会脱离文档流
3.绝对定位会改变元素的性质，行内变成块，块的宽高被元素撑开
4.绝对定位会使元素提示一个层级
5.是相对于其包含块进行定位的
包含块：（containing block）
正常情况下：
包含块就是当前元素最近的祖先块元素
绝对定位的包含块：
包含块就是离他最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位，则根元素就是它的包含块。
html（根元素 ，初始包含块）

偏移量（offset）
垂直方向：通常情况下使用一种
top：定位元素和定位位置上边的距离。
bottom：定位元素定位位置上边的距离。
水平方向：
lift：定位元素和定位位置左边的距离。
right：定位元素和定位位置右边的距离。

例子：

1
2
3
4
5
6
7
.box2{
           width: 200px;
           height: 200px;
           background-color: rgb(95, 160, 106);
           position: absolute;
           top: 0px;
           left:0px;
固定定位

（网页固定广告，导航栏等）
将position属性设置为fixed时则开启绝对定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同是固定定位永远参照浏览器的视口进行定位

粘滞定位

(兼容性不好)
将position属性设置为sticky时则开启粘滞定位
粘滞定位和相对定位的特点基本一致
粘滞定位和相对定位可以在元素到达某个位置时将其固定

绝对定位元素的位置

开启绝对定位以后：
水平方向的布局等式就需要添加left和right两个值
lift+margin-left+border-left+padding-left+width+margin-right+border-right+padding-right+right=其父元素区的宽度（必须满足）
和以前一样只是多了两个值
发生过度约束时，没有auto时，则自动调整right值以使等式满足。
如果有auto，则自动调整auto的值以使等式满足
可设置auto的值：
margin width left right
left right 默认为auto，等式不满足优先调整这两个值
这样可以写水平方向的居中：（在包含块里居中）
left:0;
right:0;
margin-right:auto;
margin-lift:auto;

垂直方向的等式也必须要满足：
top+margin-top/bottom+padding-top/bottom+border-top/bottom+bottom=父元素高度
同样auto的值会自动调整
这样可以写垂直方向的居中：（在包含块里居中）
margin-top:auto;
margin-bottom:auto;
top:0;
bottom:0;
例子：水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: cadetblue;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: chocolate;
            position: absolute;
            left: 0;
            right:0;
            margin-right:auto;
            margin-left:auto;
            margin-top:auto;
            margin-bottom:auto;
            top:0;
            bottom:0;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

元素的层级

对于开启了定位的元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数做参数，数值越大元素的层级越高
元素的层级越优先显示
没有参数（参数相同）优先显示结构里最下面的元素。
祖先元素的层级再高，也不会遮盖住后代元素
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            position: absolute;
            z-index: 1;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgba(209, 196, 73, 0.5);
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 2;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(214, 109, 61);
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: rgb(88, 76, 70);
            position: absolute;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>
</body>
</html>

font

字体相关样式：

color 用来设置字体颜色
font-size 用来设置字体大小
font-size相关单位：
em相对于当前元素的一个font-size
rem相当于根元素的一个font-size
font-family字体族（字体的格式）
可选值： serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
指定字体的类别，可以指定多种字体，使用，隔开，浏览器会自己按顺序选择其中电脑上有的字体显示
font-face可以将服务器中的字体直接提供给用户去使用 问题：1.加载可能比较慢 2.版权
例子：

1
2
3
4
5
@font-face {
           font-family:这是字体名字;
           /*   font-family 字体名字 */
           src: url(路径) format（"格式声明"）;
           /* 服务器上字体的路径 */
图标字体
网页里经常使用一些图标，可以通过图片来引入图标
但是图片大小本身太大，并且非常不灵活
-所以在使用图标时，我们可以将图标直接设置为字体
然后通过font-size的形式来引入
这样我们就可以通过字体的形式来使用图标

Font Awesome：
    免费的字体图标库https://fontawesome.com/
    下载解压后
    将css文件和webfonts移动到项目中（这两必须在同一级目录）
    将CSS文件引入到网页中
    使用图标字体：
        直接通过使用类名来使用图标字体（通常使用i标签来表示字体图标）

    其他用法，可以通过伪元素来设置字体图标：
    
1
2
3
4
5
 li::before{
    content: '\f1b0';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

    也可以通过实体来引入符号
    
1
<span class="fas"> &#xf0f3; </span>
行高（line height）

行高是文字占有的实际的高度
可以通过line height设置行高
行高可以指定大小（px em），也可以为行高设置一个整数,行高会是字体大小的指定倍数（默认行高1.33）

字体框：字体框就是字体存在的格子，设置font-size就是在设置字体框的高度

行高会在字体框里平均分配
可以将行高设置为与元素高度一样，使得单行文字在元素中垂直居中
行高还可以用来设置文字的行间距
行间距=行高-字体的大小

字体的简写属性

font可以设置字体相关的所有属性
格式：
font：字体大小/行高 字体族
行高可以省略。不写则使用默认值

font-weight 字重 字体的加粗
可选值：normal 默认值
bold 加粗
100-900（九个级别，没啥用）
font-style： 字体样式
可选值：normal 正常的
italic 斜体

文本的样式

text-align 文本的水平对齐
可选值:
left 左侧对齐
right 右对齐
center 居中对齐
justify两端对齐

vertical-align：元素的垂直对齐
可选值：
baseline(基线对齐)
top 顶部对齐
bottom 底部对齐
center 居中对齐

text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线

white-space:设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白

背景

设置背景样式

设置背景颜色：

background-color: #bfa;

设置背景图片：

使用background-image来设置背景图片
- 语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
background-image:url(img/1.png);
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色

设置背景图片的重复方式

background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat ，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y， 背景图片沿垂直方向重复

设置背景图片的位置

background-position 用来设置背景图片的位置
设置方式：
通过top bottom left right center几个方位来设置图片的位置
例子：background-position： bottom left;（至少两个值）

也可以直接指定两个偏移量，
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
例子：background-position: -80px -40px;

设置背景的范围

background-clip用于设置背景的范围
可选值： border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值background-position从内边距开始算
content-box background-position从内容区开始算
border-box background-position从边框开始算

背景图片的尺寸

background-size来设置背景图片的尺寸
第一个值表示宽度
第二个值表示高度
-如果只写一个，则第二个默认为auto

写cover可以让图片比例不变，将元素铺满
contain图片比例不变，将图片在元素中完整显示

背景图片的滚动

background-attachment用来设置背景图片是否随页面一起滚动（很少用）
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

背景属性的简写

background(还是不简写的好，具体查文档)
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
也没有数量的要求，不写的样式就使用默认值
例子：
background: #bfa url(img/3.png) center center no-repeat fixed;

雪碧图

为了解决图片闪烁和加载问题
可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来调整显示位置
这样图片可以同时加载到网页中，可以有效避免出现闪烁问题
这个技术在网页运用十分广泛，称为CSS-sprite（现在在减少使用）
使用：
1.确定要使用的图标
2.测量图标大小
3.根据测量创建元素
4.将图设置为元素的背景图片
5.设置偏移量以显示对应图标

特点：
一次性加载多个图片，减少服务器请求，加快访问速度
渐变

通过渐变可以设置一些复杂的背景颜色，可以实现一个颜色向其他颜色过渡的效果
渐变是图片，需要使用background-image来设置
（用法太多了）
线性渐变
background-image: linear-gradient(to left ,red,yellow);
三个值是渐变方向，开头颜色 ，结尾颜色
（也可以同时指定多个颜色，多个颜色默认情况下平均分配）
径向渐变
background-image: radial-gradient(red,yellow);
从中间向西周散射，默认情况下，径向渐变的形状由元素形状决定
可以手动指定方向：
circle 正圆
ellipse 椭圆

计算机及嵌入式软件 > 计算机前端 > HTML+CSS
#HTML+CSS
HTML+CSS笔记 (11.CSS布局)
https://www.duruofu.xyz/posts/913/
作者
DuRuofu
发布于
2023年6月6日
更新于
2025年1月10日
许可协议