CSS-盒子模型

十六、盒子模型

1. 盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

 

- 一个元素实际占地宽度：

  左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

- 一个元素实际占地高度：

  上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

2. 元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

实验div元素增加宽度和高度背景颜色

实验span元素增加宽度和高度背景颜色

3. 内边距

 (1) 内边距的属性

- padding 指盒子的“内补间”，宽高之外到边框以内的距离。

- 可以设置长度，如 px、em、rem 等,且不支持负值

- padding 有四个方向分别是上、右、下、左

  - padding-top 上内边距

  - padding-right 右内边距

  - padding-bottom 下内边距

  - padding-left 左内边距

 

(2) 内边距的值

- 1 个值，将用于全部的四边。

- 2 个值，第一个用于上、下，第二个用于左、右。

- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

- 4 个值，将按上、右、下、左的顺序作用于四边。

4.外边距

外边距的使用场合：元素的位置微调，元素之间的距离调整

(1) 外边距的属性

- margin 指盒子的外边距，外边距是当前元素和其他兄弟元素之间的距离。

- 可以设置长度，如 px、em、rem，%等,%取值都是父元素宽度的百分比取值。

- 正值时是增大该方向外边距，负值时是缩小该方向外边距。

- margin 有四个方向分别是上、右、下、左

  - margin-top 上外边距

  - margin-right 右外边距

  - margin-bottom 下外边距

  - margin-left 左外边距

 (2) 外边距的值

和内边距一样，外边距可以简写 1 ～ 4 个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。

- 1 个值，将用于全部的四边。

- 2 个值，第一个用于上、下，第二个用于左、右。

- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

- 4 个值，将按上、右、下、左的顺序作用于四边。

(3) margin 的 auto 取值

margin 有一个特殊的取值是 auto，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

- 块级元素在父元素中水平居中`margin:上下距离 auto;`

- 上下距离在没有的时候可以写 0

- 内联素使用 margin：auto，不能完成居中效果

 (4) margin 的无效情形

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。

下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，`margin`是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

 (5) 自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用

- css reset 进行样式统一 \* {margin：0；padding：0;}

- body : 四个方向各 8px

- ul ： 上下 16px 外边距，“左内边距”40px

 (6) 外边距合并现象

- 兄弟元素之外边距合并

- 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

(7) 外边距溢出

- 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。

- 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。

- 解决方案

  - 父元素增加`padding-top`缺点：增加了父元素实际高度

  - 增加父元素的边框，缺点：增加了父元素实际高度

  - 父元素增加`overflow: hidden/auto;`，缺点，父元素就不能溢出显示内容了

  - 使用空`<table></table>`放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

  - 使用 CSS3 伪元素`::before`给父元素添加内容,源于增加空`<table></table>`

.box::before {

         content: "";

         display: table;

}

5. 不同元素的盒子模型（重点）

(1) 内联元素盒模型

内联元素的宽高是 auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

- 宽度高度是 auto，靠内容撑开

- 设置宽度高度无效

- 设置上下内外边距无效

- 排列方式，从左至右

 (2) 块级元素盒模型

- 块级元素就可以设置宽度和高度，

- 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。

- 宽度高度可以设置

- 内外边距设置均有效果

- 排列方式，从上至下

6. 盒子模型的计算方式

 

- `box-sizing: content-box;` 标准盒子模型

  - 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

  - 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

- `box-sizing:border-box` 改变盒子模型计算方式

  - 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度

  - 设置的高度 height = 上下 border + 上下 padding + 内容的高度

  - 注意：可能会导致内容溢出，需要时再使用