回流和重绘/BFC/宽高自适应

宽高自适应笔记

Author : 朱盟 |吃火星的宝宝
TIME: 2019/6/5 学习的第9天
GIT HUB ： embaobao https://github.com/embaobao/EM
Email: 1132067567@qq.com
CSDN ： https://blog.csdn.net/embaobao
博客园： https://www.cnblogs.com/embaobao/

---

↓
↓
↓

SECTION 1.宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应

• why?
• 它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
• div
• width自适应爸爸
• height 自适应儿子
• span
• width 适应儿子
• height 适应儿子
• DO
  1. 宽度自适应,块元素宽度默认为auto
  2. 高度自适应内容元素{height:auto;}/高度不写

方法即看BFC 扩展部分

1. 爸爸溢出隐藏法
   （）
2. 儿子找空盒子朋友帮忙法
   3.（*万能清除法 ） 爸爸找假朋友发（c3:伪元素 单冒号支持IE8）法。 让他跟儿子做朋友。

↓
↓
↓

---

_self note

---

---

↓
↓
↓

SECTION 2 高度塌陷

浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

• DO
• 1. hack1:给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)
  2. hack2:在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;
     （缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）
  3. hack3:万能清除浮动法 选择符:after{content:" ";clear:both;display:block;height:0;visibility:hidden; }
     父容器选择符{zoom:1;}/为了兼容IE6,IE7/
  4. IE6 爸爸写宽度就不会塌陷，没宽度就触发了。就上面的zoom:1；

↓
↓
↓

---

_self note

---

---

↓
↓
↓

SECTION 2 伪元素

:after{}
↓
↓
↓

---

_self note

---

---

↓
↓
↓

SECTION 3 过滤器

_ IE6- 的过滤器
！important IE6+ 关键字过滤器,最高级的优先级
*/+ IE7- 的过滤器
\9 IE9- 的过滤器
\0 IE8+ 的过滤器
↓
↓
↓

---

_self note

---

---

↓
↓
↓

SECTION 4 iFfram

↓
↓
↓

---

_self note

---

圣杯布局|双飞翼布局

---

↓
↓
↓

SECTION EXTETION

回流和重绘

BFC (block Formatting context)

who?
浏览器对块元素渲染的规则
what?

1. 独占一行
2. 上下margin 重叠
3. BFC不与浮动盒子重叠
4. 相同BFC的BB（block box） 上边距重叠（选择大边距）
5. BB 的 margin 挨着爸爸的边（不是算在爸爸身上，正常时margin算他爸爸头上）
6. 不影响别人（BFC 外）
7. 浮动元素的高度
   也算在BFC里(正常爸爸不设置高度|auto的时候，浮动box不算在高度里)

HACK?

1. hack box 上下边距重叠（bfc 不重叠 相加 ）
2. hack 儿子的margin-top 不要给爸爸，给自己
3. hack 高度塌陷，bfc 不算浮动不行
4. 自适应两栏的布局

DO?

1. display : inline-block, table-cell, table-caption, flex, inline-flex;
   (拥有块元素特性)；
2. 不让overflow:visible;(溢出不visible)
3. position:absolute |fixed;（定位不相对）
4. 不让 float:none; （浮动）
5. HTML标签本来就是BFC

↓
↓
↓

---

_self note

---