209081
2019-03-03 14:03:19
css盒模型与BFC
1.盒模型的两种分类
标准模型:盒模型的宽高只是内容(content)的宽高
IE模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
我们可以用CSS3 的属性 box-sizing来选择使用哪种模型:
/* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
2.边距重叠问题
如果两个盒子,上面的一个margin-bottom为20px,下面的一个margin-top为40px,那么他们会合并在一起,距离只有40px
3.边距重叠解决方案(BFC)
BFC,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”,其中 Formatting Context 是一个决定如何渲染文档的容器
a.BFC的原理
- 内部的box会在垂直方向,一个接一个的放置
- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
- box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
- bfc的区域不会与浮动区域的box重叠
- bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
- 计算bfc高度的时候,浮动元素也会参与计算
b.怎么取创建bfc
- float属性不为none(脱离文档流)
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
- 根元素
c.应用场景
- 自适应两栏布局(左浮动,右边元素开启bfc)
- 清除内部浮动 (父元素开启bfc)
- 防止垂直margin重叠
eg:利用bfc解决边框重叠问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .top{ background: #0ff; height:50px; margin-bottom:20px; } .bottom{ height:50px; margin-top:40px; background: #ddd; } </style> </head> <body> <section class="top"> margin-bottom:20px; </section> <div style="overflow:hidden"> <section class="bottom"> margin-top:40px; </section> </div> </body> </html>
评论