css 盒模型

概念

IE模型

宽度是计算padding和border的

标准模型

宽度指的是content的宽度

css如何设置这两种模型呢

标准模型

box-sizing:content-box

IE模型

box-sizing:border-box

js如何设置获取盒模型对应的宽和高

1. dom.style.width/height(只能获取内联样式的宽和高)
2. dom.currentStyle.width/height(只能用于IE)
3. window.getComputedStyle(dom).width/height
4. dom.getBoundingClientRect().width/height

BFC (块级格式化上下文)

BFC原理（BFC渲染规则）

• BFC元素的垂直方向的边距会发生重叠
• BFC区域不会与浮动元素的box重叠
• BFC在页面中是一个独立的容器，外面的元素不会影响它里面的元素，反过来，里面的元素也不会影响外面的元素
• 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC

• float值不为none
• position的值不是static或者relative
• overflow的值不为”visible”(如：overflow:hidden)
• display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个

附带CSS选择器的权重

1.id选择器

2.类选择器

3.伪类选择器

4.属性选择器

5.标签选择器

6.通配符选择器

7.浏览器自定义