对CSS盒模型的认识
- 标准模型 + IE模型
- 标准模型和IE模型的区别
- CSS如何设置这两种模型
- js如何设置盒模型的宽和高
- 什么是边距重叠?
- BFC
标准模型和IE模型
- 包含border padding margin
- 标准模型的宽和高不计算padding和border
- IE模型的宽和高计算padding和border
如何设置这两种模型?
- 标准模型: box-sizing:conten-box
- IE模型: box-sizing:border-box
如何获取宽和高?
- Dom.style.width/height -内联
- Dom.currentStyle.width/height -IE
- Dom.getBoundingClientRect 该方法获取的是Dom相对于浏览器的位置,返回一个object,该对象有6个属性：top,lef,right,bottom,width,height；
- window.getComputedStyle(Dom).width/height
边距重叠
- 什么是边距重叠?
- 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
- 水平边距永远不会重叠
- 边距永远取两者间边距的最大值
BFC
- 通过overflow:hidden 等于给父元素创建一个BFC
- BFC的基本概念:块级格式上下文
- BFC的原理(渲染机制)
- BFC的垂直方向会发生边距重叠
- BFC的区域不会与浮动元素的位置重叠
- BFC在页面中是一个独立的容器,内外不会相互影响
- 计算BFC的高度时,会计算浮动元素的高度(清除浮动的原理)
- 如何创建BFC?
- 设置float,position,display,overflow都会创建BFC
- BFC的使用场景
- 清除浮动
- 左右布局(BFC不会与浮动元素重叠)
