# CSS3教程 - 6 盒子模型1

在讲盒子模型之前，我们先介绍一下文档流。

# 6.1 文档流

文档流，英文名称 normal flow，也就是正常的流。

网页是一个有很多层一层一层摞起来的，CSS分别为每一层来设置样式，我们看到的是从最上面俯视看到的效果。而在这些层中，最底下的一层为文档流，文档流是网页的基础。我们所创建的元素，默认都是在文档流中进行排列的。

页面中的元素，主要有两个状态：在文档流中 、 **脱离文档流 ** 。

在文档流中的元素有什么特点呢？

# 1 块元素

块元素在页面中独占一行（自上向下垂直排列）
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容（子元素）撑开

# 2 行内元素

行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列（与书写习惯一致）
如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
行内元素的默认宽度和高度都是被内容撑开

举个栗子：

我们定义了很多块元素和行内元素，可以看到它们不同的显示效果。

<head>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <span>诗兴大发，背诗一首</span>
    <span>我有一壶酒，</span>
    <span>足以慰风尘。</span>
    <span>倾尽江海里，</span>
    <span>赠饮天下人。</span>
    <span>网友所作</span>
    <span>好诗！好诗！</span>
</body>

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

显示效果如下：

可以看到上面，div是块元素，即使将div的宽度设置为很小，第二个div也会单独一行。span为行内元素，会在一行进行排列。

那么元素脱离文档流有什么特点呢，后面会介绍。

# 6.2 盒子模型

什么是盒子模型

盒子模型（box model），就是CSS将页面中所有的元素都设置为一个长方形的盒子，这样对页面布局的时候，就是将不同的盒子摆放到页面中不同的位置，理解和操作起来就比较简单了。

每一个盒子都由一下几个部分组成：

我们将一个盒子放在靠墙的位置来理解

内容区（content），相当于箱子里可以放东西的空间；
内边距（padding），相当于箱子里的防撞泡沫棉；
边框（border）：也就是箱子本身；
外边距（margin）：箱子放在墙边，是箱子和墙或其他箱子的距离

上面的图很重要！

# 1 内容区

内容区主要用于显示元素的主要内容，内容包括子元素和文本、图片等。

内容区的大小有元素的 width 和 height 属性来设置（不包含padding、border、margin）。

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

举个栗子：

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

1
2
3
4
5

显示如下：

# 2 边框

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

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

border-width ：边框的宽度，默认 3px；

border-color ：边框的颜色，默认使用 color 的颜色值；

border-style：边框的样式，没有默认值，必须指定；

举个栗子：

<style>
.box1 {
    border-width: 10px;
    border-color: red;
    /* 常用的边框样式
    solid  实线 
    dotted 点状虚线 
    dashed 虚线 
    double 双线 
    */
    border-style: solid;

    width: 100px;
    height: 100px;
    background-color: #afb;
}
</style>

<div class="box1"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

显示效果如下：

其他边框样式举例：

dotted：

dashed：

double：

# 3 边框的大小

非常重要的一点：边框的大小会影响到整个盒子的大小。

例如我们把边框尺寸设置为50px，width设置为100px时，元素的总宽度变成了150px；

<style>
.box1 {
    border-width: 50px;
    border-color: red;
    border-style: solid;

    width: 100px;
    height: 100px;
    background-color: #afb;
}
</style>

<div class="box1"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13

显示如下：

# 4 边框的其他设置方式

上面设置边框的时候，是设置的4个方向的边框是统一的样式，还可以对每一个方向的边框设置不同的样式。

我们以 border-width 为例，分别设置四个方向不同的宽度：

border-width: 10px 20px 30px 40px;

显示的效果如下：

上面是用4个值分别设置了4个方向的宽度，还可以用3个值、2个值来设置

例如：

border-width: 10px 20px;
border-width: 10px 20px 30px;

1
2

不同个数的值对应的含义如下：

一个值：上下左右
四个值：上右下左，是顺时针方向
两个值：上下左右
三个值：上左右下

除了上面的写法，还可以针对不同方向的边框，通过对应的属性来设置。

border-width 边框的宽度：默认 3px
- border-top-width ：上边框的宽度
- border-right-width ：右边框的宽度
- border-bottom-width ：下边框的宽度
- border-left-width ：左边框的宽度
border-color 边框的颜色：默认使用 color 的颜色值
- border-top-color ：上边框的颜色
- border-right-color ：右边框的颜色
- border-bottom-color ：下边框的颜色
- border-left-color ：左边框的颜色
border-style 边框的样式：没有默认值，必须指定
- border-top-style ：上边框的样式
- border-right-style ：右边框的样式
- border-bottom-style ：下边框的样式
- border-left-style ：左边框的样式

宽度、颜色、样式的简写

border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求，该方式是最常用的。

.box1 {
  border: 10px red solid;
}

1
2
3

还可以通过四个属性单独设置某一个方向的边框样式：

border-top ：上边框的宽度、颜色和样式
border-right ：右边框的宽度、颜色和样式
border-bottom ：下边框的宽度、颜色和样式
border-left ：左边框的宽度、颜色和样式

去掉边框样式

如果只要上、左、下三个方向的样式，我们可以这样设置

.box1 {
    border-top: 10px red solid;
    border-bottom: 10px red solid;
    border-left: 10px red solid;
}

1
2
3
4
5

我们还可以设置4个方向的样式，然后取消某一个方向的样式，如下：

.box1 {
    border: 10px red solid;
    border-right: none;
}

1
2
3
4

通过 none 属性去掉样式。

# 5 内边距

内边距，是内容区和边框之间的空间。

元素一共有4个方向的内边距：

padding-top ：上内边距
padding-right ：右内边距
padding-bottom ：下内边距
padding-left ：左内边距

四个属性可以简写为一个 padding 属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样：

四个值：上右下左，是顺时针方向
三个值：上左右下
两个值：上下左右
一个值：上下左右

有两点需要特别注意：

内边距的设置会影响到盒子的大小；
背景颜色会延伸到内边距上。

下面举个栗子：

因为背景颜色会延伸到内边距上，所以通过背景颜色无法区分内容区和内边距，所以下面我们在元素内部放了一个子元素，将子元素的宽高撑满父元素的内容区，然后设置了子元素的背景颜色，这样就可以很明显的区分父元素的内容区和内边距。

<style>
  .outer {
    width: 200px;
    height: 200px;

    /* 设置边框 */
    border: 10px red solid;

    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 80px;
    /* 可以简写为
    padding: 20px 40px 60px 80px;
    */

    background-color: #65ddff;
  }

  .inner {
    width: 200px;
    height: 200px;
    background-color: greenyellow;
  }
</style>

<div class="outer">
  <div class="inner"></div>
</div>

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

显示如下：

可以看出，outer 设置了一个 padding 属性，其盒子大小被“撑大了”。

盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

# 6 外边距

外边距，是添加在边框外周围的空间。

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用的空间，主要用于布局。

元素一共有四个方向的外边距：

margin-top ：上外边距，设置为正值，元素自身向下移动
margin-right ：右外边距，设置为正值，其右边的元素向右移动，其实这个说法并不准确，对于块元素，设置margin-right不会产生任何效果
margin-bottom ：下外边距，设置为正值，其下边的元素向下移动，其实这个说法说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）
margin-left ：左外边距，设置为正值，元素自身向右移动

上面的属性如果设置为负值，则会朝相反的方向移动。

四个属性可以简写为一个 margin 属性，可以同时指定四个方向的外边距，规则和边框中属性值设置一样：

四个值：上右下左，是顺时针方向
三个值：上左右下
两个值：上下左右
一个值：上下左右

元素在页面中是按照自左向右的顺序排列的，所以默认情况下：

如果我们设置的左和上外边距，则会移动元素自身
而设置下和右外边距会移动其他元素

举个栗子：

.box1 {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    border: 10px red solid;

    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    margin-left: 50px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

显示如下：

可以看到只有左边距和上边距生效了，因为元素右边和下面没有其他元素，所以没法让右边和下面的元素移动。

当在下面再添加一个div时

<style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: #bfa;
      border: 10px red solid;

      margin-top: 50px;
      margin-right: 50px;
      margin-bottom: 50px;
      margin-left: 50px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #bfa;
      border: 10px red solid;
    }
</style>
<body>
    <div class="box1"></div>
  	<div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

显示效果如下：

# 6.3 水平方向布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

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 = 其父元素的宽度

以上等式必须满足，如果相加结果使等式不成立，则称为：过渡约束

如果出现过渡约束，则等式会自动调整，以确保满足上面公式。

举个栗子：

<style>
    .outer {
      width: 800px;
      height: 100px;
      border: 10px red solid;
    }
    .inner {
      width: 100px;
      height: 100px;
      margin-left: 100px;
      background-color: #bfa;
    }
</style>

<div class="outer">
		<div class="inner"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示如下：

那么根据上面的公式，inner 的 div 应该是 100 + 0 + 0 + 100 + 0 + 0 + 0 != 800，并不相等，所以浏览器会自动调整，以使等式满足。

浏览器调整有以下几种情况：

如果这七个值中没有auto的情况，则浏览器会自动调整 margin-right 值以使等式满足

100 + 0 + 0 + 100 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 100 + 0 + 0 + 600 = 800
如果这七个值中有 auto 的情况，则会自动调整 auto 值以使等式成立

这七个值中有三个值可以设置为 auto ：width、margin-left、maring-right
1. 如果三个中只有一个值为 auto，则会自动调整 auto 的那个值以使等式成立 100 + 0 + 0 + auto + 0 + 0 + 100 = 800 ==> 100 + 0 + 0 + 600 + 0 + 0 + 100 = 800
  
  auto + 0 + 0 + 100 + 0 + 0 + 100 = 800 ==> 600 + 0 + 0 + 100 + 0 + 0 + 100 = 800
  
  100 + 0 + 0 + 100 + 0 + 0 + auto = 800 ==> 100 + 0 + 0 + 100 + 0 + 0 + 600 = 800
  
  举个栗子
  
  将宽度设置为auto
```
.inner {
    width: auto;
    height: 100px;
    margin-left: 100px;
    margin-right: 100px;
    background-color: #bfa;
}
```
  1
  2
  3
  4
  5
  6
  7
  显示效果：
2. 如果有多个 auto，且宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为 0
  
  auto + 0 + 0 + auto + 0 + 0 + 100 = 800 ==> 0 + 0 + 0 + 700 + 0 + 0 + 100 = 800
  
  100 + 0 + 0 + auto + 0 + 0 + auto = 800 ==> 100 + 0 + 0 + 700 + 0 + 0 + 0 = 800
  
  auto + 0 + 0 + auto + 0 + 0 + auto = 800 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
  
  注意width的值默认就是就是auto，margin的值默认是0，padding的值默认是0。
3. 如果只有两个外边距都为auto，则auto的外边距会自动均分以使等式成立
  
  auto + 0 + 0 + 100 + 0 + 0 + auto = 800 ==> 350 + 0 + 0 + 100 + 0 + 0 + 350 = 800
  
  我们经常利用这个特点：同时设置左右外边距为auto，可以让其在父元素中水平居中，注意此时一定要设置width。
  
  举个例子，将宽度固定，margin-left和 margin-right 设置为 auto;
```
.inner {
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #bfa;
}
```
  1
  2
  3
  4
  5
  6
  7
  显示如下：
4. 如果子元素的宽度大于父元素的宽度，那么 margin-right 会被设置为负值，以使等式成立，同时子元素会从父元素中溢出。

# 6.4 垂直方向布局

在垂直方向的布局相对简单，没有特别的约束，默认情况下父元素的高度被内容撑开。

# 6.4.1 元素溢出

子元素是在父元素的 内容区 中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。

举个栗子：

下面设置了父元素高度为100px，子元素高度为200px。

<style>
    .outer {
      width: 200px;
      height: 100px;
      background-color: #bfa;
    }
    .inner {
      width: 100px;
      height: 200px;
      background-color: red;
    }
</style>

<div class="outer">
		<div class="inner"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

显示效果如下，可以看出子元素从父元素中溢出了：

那么如何处理子元素溢出这个问题呢？

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

overflow属性可选值如下：

visible ：溢出内容会在父元素外部位置显示，默认值，就是上面显示的情况；
hidden ：溢出内容会被裁剪，不会显示；
scroll ：生成水平和垂直方向两个滚动条，通过滚动条来查看完整的内容；
auto ：根据需要生成滚动条；

举个栗子

<style>
  .box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    /* 依次演示下面三个值的效果 */
    overflow: hidden; 
    /* overflow: scroll; */
    /* overflow: auto; */
  }
</style>
<div class="box1">
  愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。有一分热，发一分光。就令萤火一般，也可以在黑暗里发一点光，不必等候炬火。——鲁迅
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

hidden 显示效果：

scroll 显示效果：

auto 显示效果：

overflow-x 和 overflow-y

上面 overflow 属性是同时设置水平和垂直方向上的溢出效果，

还可以单独使用 overflow-x 或 overflow-y 属性来单独设置水平或垂直方向上的溢出效果。

# 6.4.2 边距折叠

# 1 垂直外边距的折叠

什么是垂直外边距的折叠？

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

什么意思呢？

举个栗子：

编写两个div，设置上面的 div 的 margin-bottom 为100px，下面的 div 的 margin-top 为100px，那么两个div的距离应该是200px，但是...

<style>
    .box1,
    .box2 {
    		width: 100px;
    		height: 100px;
    }

    .box1 {
        background-color: red;
        /* 设置一个下外边距 */
        margin-bottom: 100px;
    }

    .box2 {
        background-color: blue;
        /* 设置一个上外边距 */
        margin-top: 100px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

显示如下，发现两个div的距离却是100px，这个就是垂直外边距的折叠。

# 2 兄弟元素的边距折叠

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）。

特殊情况：

如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的

那么这种情况怎么处理呢？

兄弟元素之间的外边距的重叠，对于开发是有利的，所以不需要处理。

# 3 父子元素的边距折叠

父子元素间相邻（父元素没有边框和内边距，子元素外边距与父元素外边距相邻），子元素会传递给父元素（上外边距）

举个栗子，设置父子两个div，设置子 div 的 margin-top 为 100px。

<style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      /* 设置上外边距 */
      margin-top: 100px;
    }
</style>

<div class="box1">
  <div class="box2"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们心里想的效果：

实际显示效果如下，我尼玛，发生了什么？整个父子都往下移动了100px。父子外边距的折叠会影响到页面的布局，必须严肃处理。

如果就要让子元素显示在父元素的左下角，那么要怎么处理呢？

以现在所学的知识，暂时没有完美的方法，后面通过 .clearfix 来解决，具体的思路是在父元素的前面使用伪元素，将父元素和子元素隔开。

如果现在来解决，介绍几种不完美的方案。

方案1

不使用子元素的margin，而是使用父元素的padding。

.box3 {
  width: 200px;
  height: 100px;  /*因为设置padding，会导致父元素尺寸变大，所以需要修改父元素的尺寸*/
  background-color: blue;
  padding-top: 100px; /* 不调整子元素的margin，而是转而调整父元素的padding */
}

.box4 {
  width: 100px;
  height: 100px;
  background-color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12

显示效果：

方案2

子元素和父元素直接接触就会出现外边距折叠，我们给父元素添加一个边框就好了。

但是边框会撑大父元素的尺寸，所以同时还需要修改父元素的尺寸。

<style>
    .box1 {
      width: 200px;
      height: 199px; /* 边框增加1px，父元素总体高度会增加1，这里减去一个像素，使父元素的总体高度保持在200 */
      background-color: blue;
      border-top: 1px blue solid; /* 设置一个和父元素背景颜色相同的颜色 */
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      /* 设置上外边距 */
      margin-top: 99px; /* 父元素内容区高度为199，margin-top为100，这里需要减小一个像素，否则会从父元素溢出 */
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面的解决方案都不是完美的方案，后面再通过 .clearfix 来解决（在高度塌陷与BFC章节）。

如果以后出现子元素设置 margin-top 将父元素挤下来的情况，就需要考虑是不是边距折叠的问题。

# 6.5 行内元素的盒子模型

行内元素盒子模型存在如下特性：

# 1 不支持设置宽高

行内元素不支持设置宽度和高度。

<style>
    .s1 {
      width: 100px;    /* 行内元素设置了宽高，但是不生效 */
      height: 100px;
      background-color: orange;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示效果如下，span宽高无效：

# 2 垂直方向padding不影响页面布局

行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

<style>
    .s1 {
      /* 下方的div元素并没有因span设置了padding属性，而受到位置上的影响 */
      padding: 100px;
      background-color: orange;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示如下，span确实变高了，但是下方的div没动，而是被span挡住了：

# 3 垂直方向的border不影响页面布局

行内元素可以设置border，垂直方向的border不会影响页面的布局

 <style>
    .s1 {
      border: 10px red solid;
      background-color: orange;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示如下：

# 4 垂直方向的margin不影响页面布局

行内元素可以设置margin，垂直方向的margin不会影响页面的布局

<style>
    .s1 {
      margin: 100px;
      background-color: orange;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示如下：

也就是说行内元素垂直方向的 padding，border、margin 都不会影响页面的布局。

如果就是想要行内元素的宽高呢？

可以用 display 修改元素显示的类型。

# 5 display属性

inline ：将元素设置为行内元素

block ：将元素设置为块元素

举个栗子，修改span位块元素：

<style>
      .s1 {
        display: block;
        height: 100px;
        width: 100px;
        background-color: orange;
      }

			.s2 {
        background-color: yellow;
      }

      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }
</style>

<body>
    <span class="s1">我是span</span>
    <span>我是后面的span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

显示如下，可以看到第一个span元素被设置为块元素后，后面的span元素另起一行：

inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行

.s1 {
  	/* 将行内元素设置为行内块元素，兼顾行内元素和块元素的特点 */
    display: inline-block;
    height: 100px;
    width: 100px;
    background-color: orange;
}

1
2
3
4
5
6
7

但是不太推荐使用 inline-block ，因为它有很多缺点，举个栗子：

我们写了两个span，并设置为 inline-block 样式。

<style>
    .s1 {
      display: inline-block;
      height: 100px;
      width: 100px;
      background-color: orange;
    }
</style>
<body>
    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
</body>

1
2
3
4
5
6
7
8
9
10
11
12

显示效果如下：

会发现两个span之间莫名其妙多了一个间隙，我们可以理解为两个字之间的间隙，所以如果需要去掉这个间隙，取消两个元素之间的换行和空格即可，下面这样写就没有了：

<body>
    <span class="s1">我是span</span><span class="s1">我是span</span>
</body>

1
2
3

table ：将元素设置为一个表格，这里不做介绍了，后面会讲解表格。

none ：元素不在页面中显示

演示一下，设置span的 display: none：

<style>
    .s1 {
      display: none;
      background-color: orange;
    }

    .s2 {
      background-color: yellow;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <span>我是后面的span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示效果如下，s1不见了，连位置也没了：

如果要想保留位置，只是隐藏元素呢？

需要使用 visibility 属性。

# 6 visibility属性

visibility 用来设置元素的显示状态，常用的属性如下：

visible ：默认值，元素在页面中正常显示

hidden ：元素在页面中隐藏不显示，但是依然占据页面的位置

<style>
    .s1 {
      visibility: hidden;
      background-color: orange;
    }

    .s2 {
      background-color: yellow;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
    }
</style>

<body>
    <span class="s1">我是span</span>
    <span>我是后面的span</span>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示效果如下，第一个span虽然不显示，但是仍然占据了位置：

# 6.6 浏览器的默认样式

通常情况，浏览器都会为元素设置一些默认样式，不同的浏览器给元素的默认样式存在一些差异。

举个栗子：

<style>
    .box1 {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
</style>

<body>
    <div class="box1"></div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

显示效果：

我们会发现 div 根本就没有贴合页面边缘，而且段落之间也有一个间隙，列表显示也很丑。

通过浏览器开发者工具我们会发现 div 没有靠边是因为body有一个margin，其他的元素也会有一些默认样式。

所以一般情况下我们会清除浏览器的默认样式，然后重新设置我们的样式。

那么如何清除所有元素的默认样式呢？

一般情况下，我们通过下面的样式就可以去掉大部分元素的默认样式了：

* {
  margin: 0;
  padding: 0;
  /* 去掉li元素前面的黑点 */
  list-style: none;
}

1
2
3
4
5
6

既然我们有这个需求，那么别人也会有这个需求，所以我们不用重复造轮子。

目前有两个方案，reset样式 和 normalize样式。

这两个什么区别呢？

reset样式 ：清除所有的默认样式。

normalize样式 ：将所有的默认样式进行统一，是在所有的浏览器中显示一致。

# 1 reset 样式

官方地址：https://meyerweb.com/eric/tools/css/reset/

我们可以在项目中新建一个reset.css，将官网中的样式复制粘贴，然后再我们的页面引入即可。

<link rel="stylesheet" href="assets/reset.css" />

需要注意，我们在引入的时候，将该样式表放在最前面，以免覆盖了其他的样式表。

使用效果：

会清除掉所有的默认样式。

reset.css 内容如下：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 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
38
39
40
41
42
43
44
45
46
47
48

# 2 normalize 样式

官方地址：https://necolas.github.io/normalize.css/8.0.1/normalize.css

我们创建一个样式表文件，然后复制拷贝即可：

<link rel="stylesheet" href="assets/normalize.css">

显示效果：

会将所有的默认样式进行统一，是在所有的浏览器中显示一致。

normalize.css 内容：

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

根据自己需要进行选择吧，我一般选择第一个 reset.css。

← 05-继承权重长度颜色 06-盒子模型-2 →