标准盒子模型（W3C 标准）

box-sizing: content-box;（默认值）

宽度（width）和高度（height）仅包含内容区域。

不包含 padding、border、margin。

实际占用空间 = width/height + padding + border + margin

1
.box {
2
  width: 200px;
3
  padding: 20px;
4
  border: 5px solid #000;
5
  margin: 10px;
6
  box-sizing: content-box; /* 默认值，可省略 */
7
}

实际宽度 = 200px（内容） + 40px（左右 padding） + 10px（左右 border） = 250px。

怪异盒子模型（IE 传统模型 / Border-Box）

box-sizing: border-box;

• 宽度（width）和高度（height）包含内容、padding 和 border。

• 不包含 margin。

• 实际占用空间 = width/height（已含 padding 和 border） + margin。

1
.box {
2
  width: 200px;
3
  padding: 20px;
4
  border: 5px solid #000;
5
  margin: 10px;
6
  box-sizing: border-box; /* 启用怪异模型 */
7
}

• 实际宽度 = 200px（已含 padding 和 border），内容区域宽度 = 200px - 40px - 10px = 150px。

边框(Border)

border可以设置元素的边框。边框有三部分组组成，边框宽度（粗细）边框样式 边框颜色

1
border: border-width || border-style || border-color;

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

3、边框的合写分写

边框简写：

1
border: 1px solid red;

边框分开写法：

1
border-top: 1px solid red; /* 只设定上边框， 其余同理 */

表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

1
border-collapse: collapse;

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

• 测量盒子大小的时候,不量边框。

• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

1
margin-left: auto;
2
margin-right: auto;

1 边偏移（方位名词）

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

1
选择器 {
2
  position: relative;
3
}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

定位模式介绍

1
选择器 {
2
  position: relative;
3
}

定位总结

• 学习定位重点学会子绝父相。

• 注意：

1. 边偏移需要和定位模式联合使用，单独使用无效；

2. top 和 bottom 不要同时使用；

3. left 和 right 不要同时使

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的 策略 是:

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

• 父级有了高度，就不会影响下面的标准流了

清除浮动样式

语法：

1
选择器 {
2
  clear: 属性值;
3
}

我们实际工作中， 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

清除浮动的多种方式

1
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）

1
overflow: hidden | auto | scroll;

1
.clearfix:after {
2
  content: "";
3
  display: block;
4
  height: 0;
5
  clear: both;
6
  visibility: hidden;
7
}
8
.clearfix {
9
  /* IE6、7 专有 */
10
  *zoom: 1;
11
}

1
.clearfix:before,
2
.clearfix:after {
3
  content: "";
4
  display: table;
5
}
6
.clearfix:after {
7
  clear: both;
8
}
9
.clearfix {
10
  *zoom: 1;
11
}

总结

为什么需要清除浮动？

1. 父级没高度。

2. 子盒子浮动了。

3. 影响下面布局了，我们就应该清除浮动了。

1.flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

1
flex-direction: row | row-reverse | column | column-reverse;

1
.flex-container {
2
  display: -webkit-flex;
3
  display: flex;
4
  -webkit-flex-direction: row-reverse;
5
  flex-direction: row-reverse;
6
  width: 400px;
7
  height: 250px;
8
  background-color: lightgrey;
9
}

2.justify- content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

1
justify-content: flex-start | flex-end | center | space-between | space-around;

各个值解析:

• flex-start：

  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

• flex-end：

  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

• center：

  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

• space-between：

  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

• space-around：

  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

3.align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

1
align-items: flex-start | flex-end | center | baseline | stretch;

各个值解析:

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

4.flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

flex-wrap语法如下：

1
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。

1
.flex-container {
2
  display: -webkit-flex;
3
  display: flex;
4
  -webkit-flex-wrap: nowrap;
5
  flex-wrap: nowrap;
6
  width: 300px;
7
  height: 250px;
8
  background-color: lightgrey;
9
}

5.align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content语法如下：

1
align-content: flex-start | flex-end | center | space-between | space-around |
2
  stretch;

各个值解析:

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

1
.flex-container {
2
  display: -webkit-flex;
3
  display: flex;
4
  -webkit-flex-wrap: wrap;
5
  flex-wrap: wrap;
6
  -webkit-align-content: center;
7
  align-content: center;
8
  width: 300px;
9
  height: 300px;
10
  background-color: lightgrey;
11
}

6.align-self属性

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

align-self语法如下：

1
align-self: auto | flex-start | flex-end | center | baseline | stretch;

各个值解析:

• auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

1
.flex-item {
2
  background-color: cornflowerblue;
3
  width: 60px;
4
  min-height: 100px;
5
  margin: 10px;
6
}
7

8
.item1 {
9
  -webkit-align-self: flex-start;
10
  align-self: flex-start;
11
}
12
.item2 {
13
  -webkit-align-self: flex-end;
14
  align-self: flex-end;
15
}
16

17
.item3 {
18
  -webkit-align-self: center;
19
  align-self: center;
20
}
21

22
.item4 {
23
  -webkit-align-self: baseline;
24
  align-self: baseline;
25
}
26

27
.item5 {
28
  -webkit-align-self: stretch;
29
  align-self: stretch;
30
}

7.flex属性

flex 属性用于指定弹性子元素如何分配空间。

flex语法如下：

1
flex: auto | initial | none | inherit | [ flex-grow] || [ flex-shrink] || [
2
  flex-basis];

各个值解析:

• auto: 计算值为 1 1 auto
• initial: 计算值为 0 1 auto
• none：计算值为 0 0 auto
• inherit：从父元素继承
• [ flex-grow ]：定义弹性盒子元素的扩展比率。
• [ flex-shrink ]：定义弹性盒子元素的收缩比率。
• [ flex-basis ]：定义弹性盒子元素的默认基准值。

以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

1
.flex-item {
2
  background-color: cornflowerblue;
3
  margin: 10px;
4
}
5

6
.item1 {
7
  -webkit-flex: 2;
8
  flex: 2;
9
}
10

11
.item2 {
12
  -webkit-flex: 1;
13
  flex: 1;
14
}
15

16
.item3 {
17
  -webkit-flex: 1;
18
  flex: 1;
19
}

1.fr 单位

轨道可以使用任何长度单位进行定义。

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

1
.grid-container {
2
  display: grid;
3

4
  grid-template-columns: 1fr 1fr 1fr;
5
}

2.网格间距

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

您可以使用以下属性来调整间隙大小：

• grid-column-gap
• grid-row-gap
• grid-gap

以下实例使用 grid-column-gap 属性来设置列之间的网格间距：

1
.grid-container {
2
  display: grid;
3
  grid-column-gap: 50px;
4
}

3.网格线

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。

接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。

以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束：

1
.item1 {
2
  grid-column-start: 1;
3
  grid-column-end: 3;
4
}

1. 已知宽高，结合绝对定位和负margin来解决

　　首先使用绝对定位，使top和left属性可用。然后将元素通过top和left向下移动适口的50%，此时，元素的左上角位于视口中心点；最后通过负margin来移动元素自身的一半，将元素的中心点移至视口中心点。

1
body {
2
    width: 100vw; // vw：是视口宽度的1/100
3
    margin: 0;
4
    padding: 0;
5
}
6

7

8
/* 在已知宽高的情况下，使用负margin解决*/
9

10
#way1 {
11
    width: 300px;
12
    height: 200px;
13
    background: #f33;
14
    position: absolute;
15
    top: 50%;
16
    left: 50%;
17
    margin-left: -150px;
18
    margin-top: -100px;
19
}

2. 未知宽高，结合绝对定位和translate来解决

　　大多数情况下，元素的高度都是由内容撑高，因此我们很难用负margin来进行移动，css中大部分属性百分比都是相对于父级元素，如padding。但是，我们可以发现translate中的参数是相对于自身的。因此我们就可以利用translate，实现前面负margin的功能。

1
body {
2
  width: 100vw;
3
  margin: 0;
4
  padding: 0;
5
}
6

7
/* 在不知道宽高的情况下，translate属性移动元素本身*/
8

9
#way2 {
10
  width: 300px;
11
  height: 200px;
12
  background: #f33;
13
  position: absolute;
14
  top: 50%;
15
  left: 50%;
16
  transform: translate(-50%, -50%);
17
}

3. 结合margin和translate来解决

　　我们知道，margin可以实现块级元素的水平居中问题，我们可以直接利用margin来进行水平居中操作，在用translate来进行垂直居中。

1
body {
2
    width: 100vw;
3
    margin: 0;
4
    padding: 0;
5
}
6

7

8
/* 使用margin对元素进行居中，同时利用vh单位获取视口一半高度 */
9

10
#way3 {
11
    width: 300px;
12
    height: 200px;
13
    background: #f33;
14
    margin: 50vh auto 0; //vh: 视口高度的1/100
15
    transform: translate(0, -50%);
16
}

4. 使用flexbox实现

　　正常情况下，margin只能实现水平居中，但是当我们在需要居中元素的父元素设置为flexbox，此时margin：auto就会同时设置水平和垂直居中。

1
body {
2
  width: 100vw;
3
  margin: 0;
4
  padding: 0;
5
  display: flex;
6
}
7

8
/* 父元素需要设置为flexbox，并且需要设置高度，margin:auto将会在水平和垂直方向上都居中; */
9

10
#way4 {
11
  width: 300px;
12
  height: 200px;
13
  background: #f33;
14
  margin: auto;
15
}

5. 使用flexbox中的align-items和justify-content属性实现

　　这种方法，必须要设置父元素的高度，否则无法实现垂直上的居中。

1
body {
2
  width: 100vw;
3
  margin: 0;
4
  padding: 0;
5
  display: flex;
6
  min-height: 100vh;
7
  align-items: center;
8
  justify-content: center;
9
}
10

11
/* 可以在父元素上设置aligin-items和justify-content为center实现居中 */
12

13
#way5 {
14
  width: 300px;
15
  height: 200px;
16
  background: #f33;
17
}