CSS 盒模型分析
2019-01-22 本文已影响0人
墨夜_caa3
基本概念
页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。
盒子模型
分类
盒模型有两种，标准盒模型 和 IE盒模型 。主要区别是它们的 width 和 height 不同
-
标准盒模型
标准盒模型
盒子宽高是 content(内容) 的宽高
-
IE盒模型
IE盒模型
盒子宽高是 border + padding + content 的宽高
浏览器默认使用标准盒模型，在 ie8+ 中 可以通过设置 box-sizing 样式属性改变盒模型
box-sizing:
-
content-box---> 标准盒模型（默认） -
border-box---> IE 盒模型
通过js获取盒子宽高
以下 domElement 是表示 HTML 元素的伪代码
domElement.style.width/height
只能获取内联样式中的宽高
domElement.currentStyle.width/height
获取的是浏览中渲染完成后元素的宽高，只有 IE 浏览器支持
window.getComputedStyle(domElement).width/height
和方式2一样，但可以兼容更多浏览器
domElement.offsetWidth/offsetHeight
不管使用的什么盒模型，获取的都是 IE盒模型 的宽高
外边距折叠问题
相邻元素在竖直方向上的外边距在相遇时会发生合并，合并后的外边距的高度等于两个外边距中较大的那个值。
兄弟元素间
外边距重合
父子元素间
外边距重合
外边距折叠解决方案（BFC）
Block Formatting Context （块级格式化上下文）
BFC 可以简单地理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。
怎样让元素创建 BFC
-
float的值不为none（浮动元素） -
overflow的值为visible -
display的值为inline-block、table-caption、table-cell、flex、inline-flex -
positon的值为absolute或fixed -
<html>(根元素)
BFC 的布局规则
- 内部的 box 会在垂直方向上一个接一个地放置 （平时说的块级元素一行行放）
- box 间垂直方向的距离由
margin决定 。同一个BFC中的两个相邻的 box 还是会产生外边距重叠问题 - BFC 的区域不会与 浮动的 box 重叠
- BFC 是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。
- 包含浮动元素，计算 BFC 的高度时，浮动的元素也会参与计算
BFC 的应用场景
- 分属于不同 BFC 的元素可以防止垂直外边距折叠
- 清除内部浮动（使浮动元素可以撑起父盒子）
- 自适应两栏布局（BFC 区域不会与浮动元素重叠）
- 防止元素被浮动元素覆盖
float + BFC 两栏布局:
<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.left {
float: left;
width: 100px;
background-color: blue;
}
.right {
overflow: hidden; // 触发 BFC
background-color: green;
}
</style>
阅读原文
参考文章：
关于CSS-BFC深入理解
css 盒子模型理解
