CSS盒模型

对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不会与浮动元素重叠)