14-CSS基础-盒模型

1.为什么要清空默认边距（外边距和内边距）？

• 在企业开发中为了能更好的控制盒子的位置和计算盒子的宽高等等，所以在企业开发中，编发代码之前第一件事情就是清空默认的边距。

2.如何清空默认边距？

格式

*{

margin:0;

padding:0;

}

3.注意点

• 通配符选择器会找到（遍历）当前界面中所有的标签，所以性能较差！

4.标准的格式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;

padding:0;

}

5.什么是行高？

• 在CSS中所有的行都有自己的行高。

注意点：

• 行高和盒子的高不是同一个概念。

• 行高是指某一行内容的高度。

• 盒子的高是指标签的高度。

• 没有设置高度（height）和行高（line-height）的话， 默认情况下盒子的高等于行高，盒子的高就是被行高撑起来的。

规律：

• 文字在行高中默认是垂直居中的。

• 在企业开发中我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子的高度中是垂直居中的。

• 简而言之就是：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高度即可。

• 在企业开发中如果一个盒子中有多行文字。那么我们就不能使用设置行高等于盒子的高来实现让文字垂直居中，只能通过设置padding来让文字居中。

6

注意：

• 在企业开发中，如果一个盒子中存储的是文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差。

• 右边内边距的误差从何而来？

因为右边如果放不下一个文字，那么文字就会换行显示，所以文字和内边就之间的距离就会有误差。

• 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。