李南江的前端课程知识点（八）CSS盒子模型

内边距属性

什么是内边距？
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
边框和内容之间的距离就是内边距。

格式：
1、连写 padding：。。。。
2、非连写padding-top：。
注意点：
1、给标签设置内边距之后，标签占用的宽度和高度会发生变化，给元素设置内边距会让该元素的大小发生改变。
2、给标签设置内边距之后，内边距也会有背景颜色。
3、上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

外边距属性

什么是外边距？
CSS Margin (外边距)属性定义元素周围的空间。
标签和标签之间的距离就是外边距。

格式：
连写：margin：。。。。
非连写：margin-top：。
连写就是同时设置上下左右的值。
外边距的那一部分的没有背景颜色的。

外边距合并的现象

在水平方向上的外边距是要进行相加叠加的。
也可以称为外边距的塌陷现象。
在默认布局的垂直方向上，默认情况下多个外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。

CSS盒子模型

什么是CSS盒子模型？
在HTML中所有的标签都是盒子模型。
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
在HTML中，所有的标签都可以设置
高度/宽度：指定可以存放内容的区域。
内边距：内容和边框之间。
边框：就是边框。
外边距：盒子和盒子之间的间隙。

盒子模型的宽度和高度

1、内容的宽度和高度
就是通过标签width和height属性设置的宽度和高度。

2、元素的宽度和高度
就是我们能够看到的标签的高度和宽度。
宽度=左边框+左内边距+内容（width）+右内边距+右边框
高度=同理可得

3、元素空间的宽度和高度
宽度=左外边距+左边框+左内边距+内容（width）+右内边距+右边框+右外边距
高度=同理可得

规律一：
1、增加了padding之后的元素的宽高也会发生变化。
2、如果增加了padding之后还想保持元素原有的宽高，那么就必须减少内容的宽高。
规律二：
1、增加了border之后的元素的宽高也会发生变化。
2、如果增加了border之后还想保持元素原有的宽高，那么就必须减少内容的宽高。

盒子box-sizing属性

正是由于我们上面提到的增加盒子的内边距和边框会影响盒子的大小，所以我们引出了box-sizing属性。
CSS3中新增的一个叫做box-sizing属性，这个属性可以保证我们在增加border和padding之后，盒子元素的宽高保持原来的大小不变。（它其实是减小了内容的宽度和高度）
box-sizing的取值：
content-box：默认值，增加border和padding值之后就改变盒子元素原来的宽高，内容的宽高不变。
元素的宽高=边框+内边距+内容宽高
border-box：增加border和padding值之后，不会改变盒子元素原来的宽高，内容的宽高被压缩。
元素的宽高=width属性。

注意点：
1、如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会跟着一起被顶下来。
2、如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性。
3、在企业开发中，一般情况下如果需要控制嵌套盒子之间的距离，我们首先考虑的是利用padding属性，其次才是margin属性。因为margin本质是控制兄弟之间的间隙的。
4、在嵌套关系的盒子中，我们可以利用margin：0，auto；的方式来让里面的盒子水平居中。
5、margin：0，auto；只对水平方向居中有效，对垂直方向居中无效。

盒子居中和内容居中

text-align：center和margin：0，auto的区别
text-align：center；作用：设置盒子中存储的文字和图片在这个盒子里面水平居中。
margin：0，auto；作用：让盒子自己相对于父元素水平居中。

情况默认边距

1、为什么要清除默认边距(外边距和内边距）？
在企业开发中，为了更好的控制盒子的位置和计算盒子宽高等等，所以编写代码的第一件事情就是清空默认设置的边距。
2、如何情况默认边距？（利用通配符选择器，会选择当前页面的所有标签）
*{
margin：0；
padding：0；
}
注意点：通配符选择器会找到所有的标签，所以性能不好。所以建议写成下面这个形式：

行高和字号

什么是行高？
在CSS中所有的行都有自己的行高。行高就是一行占的高度。
注意点：
行高和盒子的高度不是同一个概念。
规律：
1、文字在行高中默认是垂直居中的。
2、在企业开发中 我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子的高度中是垂直居中的，简而言之就是：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可。
3、如果一个盒子中有多行文字，那么won就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过设置padding来让文字居中。

先清空默认边框，从外到里，从上到下