CSS盒模型

CSS盒模型

1.基本概念：标准模型—+IE模型

---

2.标准模型和IE模型的区别

---

1.宽度和高度的计算
标准模型的宽度：content.width
标准模型的高度：content.height
IE模型的宽度：content.width+padding-left+padding-right+border-left+border-right
IE模型的高度：content.height+padding-top+padding-bottom+border-top+border-bottom

css如何设置这两种模型

用css3的属性：border-sizing
标准模式：

box-sizing:content-box;//浏览器默认方式

IE模式：

box-sizing:border-box;

3.JS如何设置获取盒模型对应的宽和高

---

1.dom.style.width/height;//只能获取由内联样式设置的宽/高
2.dom.currentStyle.width/height;//得到的是即时运行的结果，即浏览器最终渲染的结果，并且它有个缺点，只有IE支持。
3.window.getComputedStyle(dom).width/height;//同样的得到的是浏览器最终渲染的结果，但是它的兼容性更好，所有浏览器都支持。
4.dom.getBoundingClientRect().width/height;//getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

4.实例题（根据盒模型解释边距重叠）

---

5.BFC（边距重叠解决方案）

---

BFC的定义：
格式化上下文。规定区域内块的布局，并且区域内布局不影响区域外布局。
BFC原理（规则）：

• 内部的box会在垂直方向上一个接一个地放置。（即会发生边距重叠）
• box垂直方向的距离由margin。属于同一个BFC的两个相邻box的margin会重叠。
• BFC的区域不会与浮动元素重叠。（用于清除浮动布局）
• BFC是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面元素。
• 计算BFC的高度时，浮动元素的高度也会计算在内。

如何创建BFC：

• 根元素html; float属性不为none；
• position为绝对定位absolute或fixed；
• display为inline-block，table-cell；
• overflow不为visible；