css盒子模型

css盒子模型仅仅是一个形象的比喻，html中所有的标签都是盒子。

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

元素的宽度和高度

宽度=左边距+左内边距+width+右内边距+右边框

高度的同理

元素空间的宽度和高度

宽度=左外边距+左边框+左内边距+width+右内边距+有边框+右外边距

规律：1.增加了padding/border之后元素的宽高也会发生变化

2.如果增加了padding/border之后还想保持原色的宽高，那么就必须减去内容的宽高

box-sizing属性：这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变 

box-sizing属性：content-box  元素的宽高=边框+内边距+内容宽高

border-box 元素的宽高=width/height的宽高

注意：1如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来

2如果外面的盒子不想被遗弃顶下来，那么可以给外面的盒子添加一个边框属性

3在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首考虑padding，其次考虑margin

text-align:center和margin:0 auto区别

text-align:center作用是设置盒子中存储的文字/图片水平居中

margin:0 auto让盒子自己水平居中

什么是行高

在css中，所有的行都有自己的高

规律：1.文字在行高中时垂直居中的

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

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

为什么要清空默认边距(外边距和内边距)

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

如何清空默认的边距

*{

margin:0

padding:0

}