css盒模型

基本概念

盒模型由 margin + border + padding + content 四个属性组成，分为两种：W3C的标准盒模型和IE盒模型。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

W3C的标准盒模型

width = content，不包含 border + padding

IE盒模型

width = border + padding + content

相互转换

二者之间可以通过CSS3的 box-sizing 属性来转换。

box-sizing: content-box 是W3C盒模型

box-sizing: border-box 是IE盒模型

赋值

margin和padding为负值情况请参考：https://www.cnblogs.com/zhangzhiyong1998/p/10924891.html

一、不赋值

默认情况下为0，也就是不会有内外边距

2.两个值时

Padding：10px 20px; 上下内边距为10px，左右内边距为20px

3.三个值时

Padding：10px 20px 30px；上10px,左右20px，下30px

4.四个值时

Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40

margin塌陷

普通文档流中父子块级元素，子元素的上边距会和父元素的上边距重合，以他们两个之间最大上边距为准，与距离他们最近的盒子隔开。父子之间的margin就消失了。下边距同理，左右margin不会发生塌陷。

解决方法：

1.给父级设置边框或内边距(记得设置透明)

2.触发bfc(块级格式上下文),改变父级的渲染规则

方法：

（1）为父盒子添加overflow：hidden；

（2）为父盒子设定padding值；

（3）为父盒子添加position：fixed；

（4）为父盒子添加 display：table；

（5）利用伪元素给子元素的前面添加一个空元素

.son:before{ content:"";
             overflow:hidden; }

margin合并

两个兄弟结构的元素在垂直方向上的margin是合并的，取两者最大值。（水平方向不会合并）

 1 /*CSS部分*/
 2 <style>
 3 .box1{
 4     width:400px;
 5     height:400px;
 6     background: pink;
 7     margin-bottom: 50px;
 8 }
 9 .box2{
10     width:200px;
11     height:200px;
12     background: lightblue;
13     margin-bottom: 40px;    
14 }
15 </style>
16 /*HTML部分*/
17 <body>
18     <divclass="box1">
19     <divclass="box2"></div>
20 </div>
21 </body>

两个box的margin发生合并，两者上下仅距离50px；

解决方法

使用border或者padding。

设置float。

BFC可以参考：https://zhuanlan.zhihu.com/p/25321647?utm_source=qq&utm_medium=social&utm_oi=953258268978651136