盒模型
1：什么是盒模型：盒模型是ccs布局的基石，它规定了网页元素如何显示以及元素之间的相互关系。css定义所有的元素都可以拥有像盒子一样的平面空间。即都包含内容区域、补白（填充）、边框、边界（外边距）这就是盒模型。
2盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(边框外界)
content:元素的宽和高
3盒模型的作用：控制元素和元素之间，或者元素和内容之间的位置关系。
W3C的标盒模型和
4盒模型的分类
IE的怪异盒子模型
1）、盒子模型包括margin、padding、content、border，而W3C标准盒子模型的元素宽度width=content的宽度
而IE怪异盒子模型的元素宽度width=content+padding+border
两者区别 2）、IE的怪异盒子模型元素宽度的定义更能让人理解，W3C也 认识到了这一点，所以在css3中添加了一个样式box-sizing，它有两个属性，分别是content-box和border-box
content-box：指元素的width=content+padding+border
border-box：指元素的width=content
5 padding:作用：用来控制父元素和子元素之间的位置关系。用来控制元素和内容之间的位置关系的。
特点1:添加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变的话，需要在元素的宽高上减掉所有的padding值。
特点2:padding属性是对背景图片是不起作用的，可以说背景图的位置，不受padding的影响。
特点3:背景色会延展到padding区域。
padding:1 2 3 4 ； 依次是上右下左
Padding:1
2 3 ； 依次是上，左和右，下
padding:1
2 ； 依次是上和下，左和右
padding:1
； 依次是上右下左
6 margin:作用： 控制同辈元素之间的位置关系。
特点：margin是出现在元素边框以外的空白区。
显示元素水平居中的方法：
{margin
0 auto}
margin-left:auto;margin-right:auto;
margin{0
auto}水平居中，上下间距为0。
注：margin是可以写负值的，padding不可以写负值；
margin不会影响元素的实际宽高，但是也会增加它的值
1上下的两个元素之间的margin值会重叠显示；谁的值大，就以谁的margin值来显示（后面BFC可以）左右margin并不影响。
2当父元素里的第一个子元素（块元素），添加margin-top的时候，或错误的把margin-top值添加给父元素。(建立在当前元素没有添加边框和浮动的情况下)
解决办法：bfc 给父元素添加overflow：hidden；(推荐使用此方法)
可以给给父元素加一个浮动属性
可以给父元素添加边框。
把margin改成padding
7 标准盒模型的所占位置的组成：宽高（content）+padding+border+margin
元素宽度实际占有的位置大小：宽+左右的padding1+左右的border+左右的margin
元素高度实际占有的位置大小：高+上下的padding1+上下的border+上下的margin
margin主要用来控制同辈元素之间的关系。
padding主要用来控制父子元素之间的位置关系。
8 盒子模型中使用margin：0 auto；需注意的地方
1、使用margin: 0 auto;水平居中盒子必须有width，要有明确width
2、只有标准流下的盒子才能使用margin:0 auto; 当一个盒子浮动了，固定定位， 绝对定位，margin:0 auto; 不能用了
3、margin：0 auto;是居中盒子，而不是居中文本，文字水平居中使用text-align:
center;
来源：CSDN
作者：weixin_46449402
链接：https://blog.csdn.net/weixin_46449402/article/details/104607342