CSS盒模型本质上是一个盒子,封装周围的HTML元素,将页面中的所有元素都设置

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置

盒子可见框的大小,是由内容区、内边框和边框一起决定

结构

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

内容区(content)

元素中的所有的子元素和文本内容都在内容区中排列

大小由 width 和 height 这两个属性设置

  • width 设置内容区的宽度
  • height 设置内容区的高度

注意:如果我们给一个固定宽度的div里面输入一厂串连续的英文字母,如果输入的足够多,文字会溢出来,也只有当输入的是英文的时候才会出现这种情况,因为一长串的英文字母会被默认为是一个单词,而汉字则不会有这个问题,那我们应该如何解决这个问题呢,可以添加 width:fit-content 可以实现 文字较少时居中显示,文字多时,末尾的一行左对齐显示,我们还可以添加 magrin:auto 来实现文字居中的效果如这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
div{
width: fit-content;
margin: auto;
background-color: dimgrey;
}
</style>
</head>
<body>
<div>疑是银河落九天,花落谁家有石粘</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
.bemo{
width:100px;
height:100px;
background-color:#bfc;
}
</style>
</head>
<body>
<div class="bemo"></div>

</body>
</html>

内边框(padding)

定义;指的是内容区和边框之间的距离

属性值

  • 当只指定一个值时,该值会统一应用到全部四个边的内边距上
  • 指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边
  • 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距
  • 指定四个值时,依次(顺时针方向)作为上边右边下边,和左边的内边距
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
<!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>
.bemo{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding:20px;
}
.bemo1{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 1em;
}
.bemo2{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10% 0;
}
.bemo3{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10px 50px 20px;
}
.bemo4{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10px 50px 30px 0;
}
.bemo5{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 0;
}
</style>
</head>
<body>
<div class="bemo">第一</div>
<div class="bemo1">第二</div>
<div class="bemo2">第三</div>
<div class="bemo3">第四</div>
<div class="bemo4">第五</div>
<div class="bemo5">第六</div>
</body>
</html>

边框(border)

边框属于盒子的边缘,边框里边属于盒子内部,而出了边框都是盒子的外部

边框的大小会影响到整个盒子的大小

设置边框的三个样式

  • 边框的宽度 border-width
  • 边框的颜色 border-color
  • 边框的样式 border-style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
.bemo{
width:100px;
height:100px;
background-color:#bfc;
border-color:coral;
border-style:solid;
border-width:50px;
}
</style>
</head>
<body>
<div class="bemo"></div>

</body>
</html>

border-color

定义:用来指定边框的颜色,同样可以分别指定四个边的边框

border-color可以忽略不写,如果不写就会自动使用color的颜色

语法

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
<!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>
.bemo{
/* 单值语法 */
width:100px;
height:100px;
background-color:#bfc;
border-color:darkkhaki;
border-style:solid;
border-width:20px;
}
.bemo1{
/* 双值语法 */
width:100px;
height:100px;
background-color:#bfc;
border-color:darkkhaki rgb(135, 145, 133);
border-style:solid;
border-width:20px;

}
.bemo2{
/* 三值语法 */
width:100px;
height:100px;
background-color:#bfc;
border-color:darkkhaki #bfa rgb(135, 145, 133) rgba(123, 167,134,.2);
border-style:solid;
border-width:20px;
}
.bemo3{
/* 四值语法 */
width:100px;
height:100px;
background-color:#bfc;
border-color:darkkhaki rgb(179, 170, 255) rgb(135, 145, 133) rgba(123, 167,134,.2);
border-style:solid;
border-width:20px;
}
.bemo4{

width:100px;
height:100px;
background-color:#bfc;
border-style:solid;
border-width:20px;
border-top-color:darkolivegreen;
border-left-color:darkorange;
border-right-color:darkred;
border-bottom-color:darkseagreen;
}
</style>
</head>
<body>
<div class="bemo"></div>

<div class="bemo1"></div>

<div class="bemo2"></div>

<div class="bemo3"></div>

<div class="bemo4"></div>
</body>
</html>

border-style

定义:指定边框的样式,默认情况下,是none表示没有边框

属性值

  • none 表示不显示边框,它的值优先级最低,意味着如果存在其他的重叠边框,则会显示为那个边框
  • hidden 表示不显示边框,它的值优先级最高,意味着如果存在其他的重叠边框,则不会显示为那个边框
  • dotted 一系列圆点
  • dashed 一系列短的方形虚线
  • solid 一条实线
  • double 一条双实线
  • groove 有雕刻效果的边框
  • ridge 有浮雕效果的边框
  • inset 有陷入效果的边框
  • outset 有突出效果的边框

这里就不一一实现了,就实现一两个

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
<!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>
.a{
width:100px;
height:100px;
background-color:#bfc;
border-color:deepskyblue;
border-width:20px;
border-style:initial;
}
.b{
width:100px;
height:100px;
background-color:#bfc;
border-color:deepskyblue;
border-width:20px;
border-style:outset;
}
.c{
width:100px;
height:100px;
background-color:#bfc;
border-color:deepskyblue;
border-width:20px;
border-style: dashed groove none dotted;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

</body>
</html>

简写

同时设置边框的颜色 , 粗细和样式,设置顺序可以随便

除了border以外会有四个 border-xxx

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
<!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>
.bemo{
width:100px;
height:100px;
background-color:#bfc;
border:#bfc 20px dashed ;
}
.bemo1{
width:100px;
height:100px;
background-color:#bfc;
border-right:khaki 20px solid;
}
.bemo2{
width:100px;
height:100px;
background-color:#bfc;
border-bottom:lawngreen 20px inset;
}
.bemo3{
width:100px;
height:100px;
background-color:#bfc;
border-left:lightgoldenrodyellow 20px outset;
}
.bemo4{
width:100px;
height:100px;
background-color:#bfc;
border-top:lightpink 20px groove;
}
</style>
</head>
<body>
<div class="bemo"></div>
<div class="bemo1"></div>
<div class="bemo2"></div>
<div class="bemo3"></div>
<div class="bemo4"></div>
</body>
</html>

外边距(margin)

定义:不会影响盒子可见框大小,但可以影响盒子的位置

元素在页面中是按照自右向左的顺序排列,默认情况下,如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会移动其他元素,值可以为负数

会影响盒子的实际占用空间

属性值

  • 当只指定一个值时,该值会统一应用到全部四个边的外边距上,当值为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
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
<!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>
.bemo{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding:20px;
/* 应用于所有边 */
margin: 1em;
margin: -3px;
}
.bemo1{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 1em;
/* 上边下边 | 左边右边 */
margin: 5% auto;
}
.bemo2{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10% 0;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
}
.bemo3{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10px 50px 20px;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
}
.bemo4{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 10px 50px 30px 0;
/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
}
.bemo5{
width:100px;
height:100px;
background-color:#bfc;
border:lightsalmon 10px dotted;
padding: 0;
}
</style>
</head>
<body>
<div class="bemo">第一</div>
<div class="bemo1">第二</div>
<div class="bemo2">第三</div>
<div class="bemo3">第四</div>
<div class="bemo4">第五</div>
<div class="bemo5">第六</div>
</body>
</html>

四个方向的外边距

  • margin-top:上外边距设置一个正值,元素会向下移动
  • margin-right:默认情况下设置margin-right不会产生任何效果
  • margin-bottom:下外边距,设置一个正值,其下边的元素会向下移动
  • margin-left:左外边距,设置一个正值,元素会相反的方向移动

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
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>
.demo1 {
height: 200px;
width: 200px;
background-color: aqua;
margin: 200px 0 ;
}
.demo2{
width: 200px;
height: 200px;
background-color: brown;
margin: 200px 0 ;
}
</style>
</head>

<body>
<div>
<div class="demo1">cat's paw 1</div>
<div class="demo2">cat's paw 2</div>
</div>

</body>

</html>

父子元素

父子元素如果都有上边距,会合并为其中较大的那一个

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>
.demo1 {
height: 400px;
width: 400px;
border:solid 1px aqua ;
margin: 3px 0 ;
}
.demo2{
width: 200px;
height: 200px;
border:solid 2px red ;
margin: 200px 0 ;
}
</style>
</head>

<body>
<div class="demo1">
<div class="demo2">cat's paw 2</div>
</div>

</body>

</html>
空块元素

如果一个块级元素中不包含任何内容,并且在其 margin-topmargin-bottom 之间没有边框、内边距、行内内容、heightmin-height 将两者分开,则该元素的上下外边距会折叠

如果这个外边距遇到另一个元素的外边距,它还会发生合并

解决方案
  • 在其中添加一个空的div,阻止他们在同一个BFC
  • 处于静态流的元素会发生合并,所以设置 float 和 position:xxx都不会发合并
  • 设置为 inline-block 也不会发生合并

垂直外边距的重叠

相邻的垂直方向外边距会发生重叠现象

兄弟元素

  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值,前提都是正值
    • 特殊情况
      • 如果相邻的外边距一正一负,则会取两者的和
      • 如果相邻的外边距都是负值,则会取两者中的绝对值较大的
    • 兄弟元素之间的外边距的重叠,对开发是有利的,所以不需要进行处理

父子元素

  • 父子元素间相邻外边距,子元素会传递给父元素(上外边距)
  • 父子外边距的折叠会影响到页面的布局,必须进行处理

实现水平居中

width: fit-content 根据内容自适应宽度 可以结合margin-auto 来实现居中

width: min-content 使用子元素中宽度最小的。(无论子元素是inline,还是 block,都会使用最小的宽度)

width:max-content 使用子元素中最大的开你的。无论是inline还是block

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>
.demo1 {

width: fit-content ;
height: 200px;
margin: auto;
background-color: aqua;
}
div{
width: 500x;
height: 400px;
background-color: red;
}

</style>
</head>

<body>
<div>
<div class="demo1">我是迪迦奥特曼</div>
</div>

</body>
</html>

水平方向布局

决定因素

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

等式

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度(一定成立)

如果等式不成立,则称为过度约束,则等式会自动调整

调整问题

  • 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足
  • 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
  • 如果将三个值都设置为auto,则外边距都是0,宽度最大(width margin-left margin-right)
  • 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值,所以经常利用这一提点是一个元素在其父元素中水平居中

子元素是在父元素的内容区中排列

如果子元素的大小大于父元素,则子元素会溢出

使用overflow属性设置父元素处理溢出的子元素

属性值

  • /* 默认值。内容不会被修剪,会呈现在元素框之外 */
    overflow: visible;
    
    1
    2
    3
    4

    - ```css
    /* 内容会被修剪,并且其余内容不可见 */
    overflow: hidden;
  • /* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
    overflow: scroll;
    
    1
    2
    3
    4

    - ```css
    /* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
    overflow: auto;
  • ``` css
    /* 规定从父元素继承overflow属性的值 */
    overflow: inherit;

    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
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148

    ```html
    <!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>
    .bemo {
    width: 200px;
    height:200px;
    overflow: visible;
    font-size: 20px;
    background-color: #bfc;
    }

    .bem2 {
    width: 200px;
    height:200px;
    overflow: hidden;
    font-size: 20px;
    background-color: #bfc;
    }

    .bemo3 {
    width: 200px;
    height:200px;
    overflow: scroll;
    font-size: 20px;
    background-color: #bfc;
    }

    .bemo4 {
    width: 200px;
    height:200px;
    overflow: auto;
    font-size: 20px;
    background-color: #bfc;
    }

    .bemo5 {
    width: 200px;
    height:200px;
    overflow: inherit;
    font-size: 20px;
    background-color: #bfc;
    }
    </style>
    </head>

    <body>

    <div class="bemo">
    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。

    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。

    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

    今当远离,临表涕零,不知所言。</div>
    <div class="bemo2">
    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。

    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。

    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

    今当远离,临表涕零,不知所言。</div>
    <div class="bemo3">
    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。

    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。

    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

    今当远离,临表涕零,不知所言。</div>
    <div class="bemo4">
    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。

    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。

    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

    今当远离,临表涕零,不知所言。</div>
    <div class="bemo5">
    先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

    宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。

    侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

    将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。

    亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军,此悉贞良死节之臣,愿陛下亲之信之,则汉室之隆,可计日而待也。

    臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。

    先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧叹,恐托付不效,以伤先帝之明,故五月渡泸,深入不毛。今南方已定,兵甲已足,当奖率三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸之、祎、允之任也。

    愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责攸之、祎、允等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏,臣不胜受恩感激。

    今当远离,临表涕零,不知所言。</div>
    </body>

    </html>

行内元素的盒模型

  • 可以设置padding不会影响垂直方向页面的布局
  • 可以设置border不会影响垂直方向页面的布局
  • 可以设置margin不会影响垂直方向页面的布局

display

定义:用来设置元素应该生成的框的类型

属性值

属性值作用
inline默认,将元素设置为行内元素
block将元素设置为块元素,此元素前后会带有换行符
none将元素不在页面中显示,隐藏
inline-block将元素设置为行内块元素(CSS2.1 新增的值)
list-item将元素作为列表显示
run-in将元素根据上下文作为块级元素或内联元素显示
table将元素作为块级表格来显示(类似 <table>),表格前后带有换行符
inline-table将元素作为内联表格来显示(类似 <table>),表格前后带有换行符
table-row-group将元素作为一个或多个行的分组来显示(类似 <tbody>
table-header-group将元素作为一个或多个行的分组来显示(类似 <thead>
table-footer-group将元素作为一个或多个行的分组来显示(类似 <tfoot>
table-row将元素作为一个表格行显示(类似 <tr>
table-column-group将元素作为一个或多个列的分组来显示(类似 <colgroup>
table-column将元素作为一个单元格列显示(类似 <col>
table-cell将元素作为一个表格单元格显示(类似 <td><th>
table-caption将元素作为一个表格标题显示(类似 <caption>
inherit将规定应该从父元素继承 display 属性的值

常用的display 属性

block:块状元素
  • 可容纳其他块状元素或内联元素
  • 排斥其他元素与其位于同一行
  • 宽度高度起作用,block元素可以设置宽度width和高度height,有效
inline:内联元素
  • 位于行内,即位于块状元素或者其他内联元素内
  • 只能容纳文本或者其他内联元素
  • 允许其他内联元素与其位于同一行
  • inline 元素的宽度高度不起作用
inline-block 元素
  • inline元素相似的地方
    • 位于行内,即位于块状元素或者其他内联元素内
    • 允许其他内联元素与其位于同一行
  • block元素相似的地方
    • 可容纳其他块状元素或内联元素
    • 宽度高度起作用
  • 使用inline-block可以很方便解决一些问题:
    • 使元素居中
    • inline元素a/span设置宽高
    • 将多个块状元素放在一行

visibility

定义:用来设置元素的显示状态,但不会响应点击事件

属性值

  • visible:默认值,元素在页面中正常显示
  • hidden:元素在页面中隐藏,不显示,但占据页面位置

盒模型计算

默认情况下,盒子可见框的大小由内容区、内边距和边距一起决定

box-sizing

定义:用来设置盒子尺寸的计算方式(设置width和height的作用)

属性值

  • content-box:默认值,宽度和高度用来设置内容区的大小
  • padding-box:元素宽高(width/height)等于:content + padding 布局所占宽高等于:width/height(content + padding) + border
  • border-box:宽度和高度用来设置整个盒子可见框的大小(这里width和height指的是内容区和内边距和边框的总和)
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>
.demo{
width:400px;
height:400px;
background-color:#bfc;
padding:100px;
border: 100px red solid;
box-sizing:border-box;
}
.demo1{
width:400px;
height:400px;
background-color:beige;
padding:100px;
border: 100px #bfc solid;
box-sizing:content-box;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo1"></div>

</body>
</html>

圆角边框

border-radius

定义:用来设置圆角,设置圆角半径的大小

同时可以对单一角进行设置

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

可以分别指定四个角的圆角

  • 四个值:左上 右上 右下 左下
  • 三个值:左上 右上/左下 右上
  • 两个值:左上/右下 右上/左下
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
<!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>
.bemo{
width:100px;
height:100px;
background-color:#Bfc;
border-radius:30px;
}
.bemo2{
width:100px;
height:100px;
background-color:#Bfc;
border-radius: 25% 10%;
}
.bemo3{
width:100px;
height:100px;
background-color:#Bfc;
border-radius: 10% 30% 50% 70%;
}
.bemo4{
width:100px;
height:100px;
background-color:#Bfc;
border-radius: 10% / 50%;
}
.bemo5{
width:100px;
height:100px;
background-color:#Bfc;
border-radius: 10px 100px / 120px;
}
.bemo6{
width:100px;
height:100px;
background-color:#Bfc;
border-radius: 50% 20% / 10% 40%;
}
</style>
</head>
<body>
<div class="bemo"></div>
<div class="bemo2"></div>
<div class="bemo3"></div>
<div class="bemo4"></div>
<div class="bemo5"></div>
<div class="bemo6"></div>
</body>
</html>

边界图片

border-image

定义:允许你指定一个图片作为边框! 用于创建上文边框的原始图像

属性属性值作用
border-image-source用于指定要用于绘制边框的图像的位置
border-image-slice图像边界向内偏移
number数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像)
%百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度
fill保留图像的中间部分
border-image-width图像边界的宽度
number表示相应的border-width 的倍数
%边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积
auto如果指定了,宽度是相应的image slice的内在宽度或高度
border-image-outset用于指定在边框外部绘制 border-image-area 的量
length设置边框图像与边框(border-image)的距离,默认为0
number代表相应的 border-width 的倍数
border-image-repeat用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)

语法

1
border-image: source slice width outset repeat|initial|inherit;
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
<style>
.div2 {
height: 80vh;
width: 80vw;
border: solid 50px transparent;
border-image: url(https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500) 30 30 round;
background-color: aqua;
}

.div1 {
width: 200px;
padding: 200px;
border: solid 15px #dfc;
background-color: red;
border-image-source: url(https://img2.baidu.com/it/u=1146259256,2780793184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
border-image-outset: 20px;
border-image-width: 12;
/* border-image-slice: fill; */
border-image-repeat: round;
border-radius: 20px;
}
</style>
</head>

<body>
<p class="div1">拿着 </p>
<div class="div2"></div>
</body>

轮廓

box-shadow

定义:用来设置元素的阴影效果,不会影响页面布局

属性值

  • 第一个值 水平偏移量 x轴 设置阴影的水平位置 正值向右移动 负值反方向移动
  • 第二个值 垂直偏移量 y轴 设置阴影的垂直位置 正值向下移动 负值反方向移动
  • 第三个值 阴影的模糊半径
  • 第四个值 阴影的颜色

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
.demo{
width:200px;
height:200px;
background-color:#bfc;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>

outline

定义:用来设置元素的轮廓线,元素轮廓的样式、颜色和宽度,用法和border一样

轮廓和边框不同点在于,轮廓不会影响可见框的大小,不会增加额外的width或者height(不会导致浏览器渲染时出现reflow或是repaint)

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
<!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>
.demo1 {
height: 400px;
width: 400px;
border: solid 22px red;
/* 在一个声明中设置所有的轮廓属性*/
outline: solid 100px #dfc;
/* outline-style: solid ; 设置轮廓的颜色
outline-width: 100px ; 设置轮廓的样式
outline-color: #dfc ; 设置轮廓的宽度 */
}
</style>
</head>

<body>
<div class="demo1">
</div>

</body>
</html>

浮动

定义:使用浮动可以使一个元素向其父元素的左侧或右侧移动

float

定义:设置元素的浮动

属性值
  • none:默认值,元素不浮动
  • left:元素向左浮动
  • right:元素向右浮动
特点
  1. 会完全脱离文档流,不再占据文档流中的位置
  2. 设置浮动以后元素会向父元素的左侧或右侧移动
  3. 默然不会从父元素中移出
  4. 向左或向右移动时,不会超过它前边的其他浮动元素
  5. 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
  6. 浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高
  7. 行内元素浮动会自动转为块级元素

clear

定义:用来指定段落的左侧或右侧不允许浮动的元素,清除浮动的影响

属性值

  • left:在左侧不允许浮动元素
  • right:在右侧不允许浮动元素
  • both:在左右两侧均不允许浮动元素
  • none:默认,允许浮动元素出现在两侧
  • inherit:规定应该从父元素继承 clear 属性的值
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
<!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>
.demo {
width: 800px;
height: 500px;
border: solid 3px darkblue;
padding: 20px;
}
.demo> div {
width: 200px;
height: 100%;
}

.demo> div:nth-of-type(1) {
background-color:blueviolet;
float:left;

}

.demo> div:nth-of-type(2) {
background-color: aquamarine;
float: right;

}

.demo> div:nth-of-type(3) {
background-color: gray;
margin: 0 auto;
clear: both;
}
</style>
</head>

<body>
<div class="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>

</html>

通过伪元素清除浮动的影响

随着子元素的高度的变化而变,不多增标签位置

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
<!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>
.demo {
width: 800px;
border: solid 3px darkblue;
}

.demo::after{
content: "";
clear: both ;
display: block;
}
.demo>div {
width: 200px;
height: 200px;
}

.demo>div:nth-of-type(1) {
background-color: blueviolet;
float: left;

}

.demo>div:nth-of-type(2) {
background-color: aquamarine;
float: right;

}


</style>
</head>

<body>
<div class="demo">
<div></div>
<div></div>
</div>
</body>

</html>

通过overflow触发BFC清除浮动影响

除了visible属性值外,都可触发BFCC清除浮动影响

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
<!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>
.demo {
width: 800px;
border: solid 3px darkblue;
overflow: auto;
}
.demo>div {
width: 200px;
height: 200px;
}

.demo>div:nth-of-type(1) {
background-color: blueviolet;
float: left;

}

.demo>div:nth-of-type(2) {
background-color: aquamarine;
float: right;

}


</style>
</head>

<body>
<div class="demo">
<div></div>
<div></div>
</div>
</body>

</html>

左右浮动应用场景与和边界

父元素作为浮动的载体,左浮动,父元素的内容区的水平最左边,右浮动,父元素的内容区的水平最右边,子元素在父元素内容区

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
<!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>
.demo {
width: 800px;
height: 250px;
border: solid 3px darkblue;
padding: 20px;
}
.demo> div {
width: 200px;
height: 200px;
}

.demo> div:nth-of-type(1) {
background-color:blueviolet;
float:left;
}

.demo> div:nth-of-type(2) {
background-color: aquamarine;
float: right;
}

.demo> div:nth-of-type(3) {
background-color: gray;
margin: 0 auto;
}
</style>
</head>

<body>
<div class="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>

</html>

高度塌陷

定义:当父元素不设置高度的时候靠子元素撑大,也就是说子元素有多高,父元素就有多高,当子元素浮动后,父元素就会高度塌陷。父元素高度塌陷后,父元素下面的元素就会向上移动,这样会导致整个页面的布局混乱

效果

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
<!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>
.bemo{
border:#bfc 10px solid;
}
.bemo1{
width:100px;
height:100px;
background-color:brown;
float:left;
}
.bemo2{
width:200px;
height:200px;
background-color:green;

}
.clear_fix:after{
content:"";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
</style>
</head>
<body>
<!-- 可以看到父元素高度塌陷后,下面的子元素都往上移动了,脱离了文档流 -->
<div class="bemo clear_fix">
<div class="bemo1"></div>
</div>
<div class="bemo2"></div>
</body>
</html>

解决方案

  1. 给父元素设置固定的高度,固定高度后,父元素的高度就无法自适应子元素的高度了

    弊端:但是不能让元素高度自适应了

    1
    2
    3
    4
    5
    .box1 {
    border: 10px red solid;
    height:100px;
    }

  2. 给父元素设置overflow:hidden,解决高度塌陷并能实现高度自适应的方法(遵循BFC的显示原则)
    弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏

    1
    2
    3
    4
    5
    .box1 {
    border: 10px red solid;
    overflow: hidden;
    }

    overflow

    定义:用来控制内容溢出元素框时在对应的元素区间内添加滚动条

    属性值作用
    visible默认值,内容不会被修剪,会呈现在元素框之外
    hidden内容会被修剪,并且其余内容是不可见的
    scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
    auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
    inherit规定应该从父元素继承 overflow 属性的值
  3. 在浮动元素的下方添加一个空元素,并且给他设置一下属性
    弊端:会添加很多空标记,增加结构负担,产生代码冗余

    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>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .box1 {
    border: 10px red solid;
    }

    .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    }

    .clear_fix{ /*空白div的属性*/
    clear:both; /*清除两侧浮动*/
    height:0;
    overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div class="box1">
    <div class="box2"></div>
    <div class="clear_fix"></div> /*添加空白div*/
    </div>
    </body>

  4. display:table; 给父元素添加display:table;让父元素转换元素类型跟表格的特性一样
    弊端:会改变当前元素的元素类型

    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
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .box1 {
    border: 10px red solid;
    display: table; /* 改变元素类型为表格 */
    }

    .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    }
    </style>
    </head>
    <body>
    <div class="box1">
    <div class="box2"></div>
    </div>
    </body>

  5. 通过after伪类元素添加一个空白的块元素,css加下列属性,并给要清除的div加上clear_fix的类名
    推荐使用的方式,没有什么副作用

    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>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .box1 {
    border: 10px red solid;
    }

    .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    }

    .clear_fix:after { /* 要加的属性 */
    content: ""; /* 添加内容 */
    clear: both; /* 清楚两侧浮动 */
    display: block; /* 转换元素类型为块元素 */
    height: 0;
    overflow: hidden; /* 溢出隐藏属性 */
    visibility: hidden;/* 隐藏属性 */
    }
    </style>
    </head>
    <body>
    <div class="box1 clear_fix">
    <div class="box2"></div>
    </div>
    </body>

BFC

定义:是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列

布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
  4. BFC的区域不会与float box重叠
  5. BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此
  6. 计算BFC的高度时,浮动元素也参与计算

创建

  1. float的值不是none
  2. position的值不是static或者relative
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible

作用

  • 利用BFC避免margin重叠
  • 自适应两栏布局
  • 清除浮动