CSS盒模型

盒模型

标准盒模型：外边距margin + 边框border + 内边距padding + 内容content

IE盒模型：外边距margin + 内容content (包括border + padding)

控制盒模型的属性：box-sizing

content-box 默认值，标准盒模型

border-box IE盒模型

margin负值

margin-top: 元素自身向上移动

margin-left: 元素自身向左移动

两个元素水平排列时：

margin-right: 元素本身不变，右边元素左移

两个元素垂直排列时：

margin-bottom: 元素本身不变，下边元素上移

负值的应用：

1. 增加盒子宽度
2. 圣杯布局
3. 双飞翼布局

BFC

BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。

BFC是一个完全独立的空间（布局环境），让空间里的元素在按照一定的规则进行布局，并且不会影响到外面的布局。

BFC的规则

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器内部元素不会影响到外部元素
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的元素外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算

触发BFC

• overflow: hidden;
• position: absolute、fixed;
• display: table-cell、flex、inline-blcok;

BFC解决了什么问题

1. 父元素浮动塌陷

   问题：子元素浮动会引发父元素高度塌陷

   解决：触发父元素BFC即可

2. margin 边距重叠

   问题：上下盒子边距，只会取margin较大值

   解决：给其中一个盒子套一个div，并设置触发BFC的属性即可

3. 普通元素和浮动元素相互重叠的机制

   问题：左盒子浮动，右盒子的文本会围绕浮动元素（重叠）

   解决：右盒子触发BFC即可

行内元素：

垂直margin无效，不能设置width/height

absolute：

1. 给元素加上absolute或float就相当于给元素加上了display:block

2. 脱离文档流，是父元素高度塌陷

3. 减少重绘和回流的开销。

4. absolute控制隐藏和显示（absolute+ top:-9999em、absolute + visibility:hidden）

   1. absolute由于层级的关系，隐藏和显示只会重绘，但不会回流
   2. display:none会导致render tree重绘和回流。

5. 必须指定left,top,right,bottom中的至少一个，否则导致对象遵从标准文档流（简单讲就是都变成relative）。

6. absolute实质上是相对于static定位以外的第一个父元素的border进行定位。

​