聊聊CSS盒模型

[DamomHd]

标准盒模型和IE盒模型

• 标准盒模型：content不包含其他部分
• IE盒模型:content包含border/padding

设置两种盒模型

    /* 设置当前盒子为 标准盒模型（默认） */
    box-sizing: content-box;

    /* 设置当前盒子为 IE盒模型 */
    box-sizing: border-box;

JS设置/获取盒模型宽高

1. 通过DOM节点的style获取

   element.style.width/height;

   缺点：只能获取行内样式，不能获取内嵌的样式和外链的样式

2.通用

window.getComputedStyle(element).width/height;

3.IE独有的方式

element.currentStyle.width/height;

4.获取绝对位置 拿到四个属性 left.top.width.height

element.getBoundingClientRect().width/height;

BFC

概念：块级格式化上下文，边距重叠解决方案

规则：

1. BFC内部的子元素，在垂直方向，边距会发生重叠
2. BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
3. BFC区域不与旁边的float box区域重叠（可以用来清除浮动带来的影响）
4. 计算BFC高度时，浮动的子元素也参与计算。

如何生成BFC:

1. overflow不为visible，可选hidden/auto
2. 浮动中，float属性不为none
3. 定位中，position不是static或者relative，可以是absolute或者fixed
4. display为inline-block/table-cell/table-caption/flex/inline-flex