Css盒模型以及BFC

##Css盒模型

css中所有html元素都可以看成为一个盒子,一个盒模型包括margin、border、padding、content
###分类

  • 标准模型-width与height按照content宽高计算
    Css盒模型以及BFC_第1张图片
  • IE模型-width与height按照content+padding+border计算
    Css盒模型以及BFC_第2张图片

两种模型设置方法(Css3)

box-sizing:content-box; // 标准盒模型
box-sizing:border-box;	// IE盒模型

js获取宽高

/*标签属性中的*/
dom.style.width/height
/*计算后的*/
/*标签style中(内联)+内嵌中的+外部的*/
dom.currentStyle.width/height // (仅IE支持)
window.getComputedStyle(dom).width/height(全兼容)
dom.getBoundingClientRect().width/height

BFC(块级格式化上下文)

边距重叠

父子元素,子元素margin,父元素高度和子元素一样
Css盒模型以及BFC_第3张图片
Css盒模型以及BFC_第4张图片

Bfc原理(规则)

  • 属于同一个BFC的两个相邻Box的margin会发生重叠
  • BFC的区域不会与float box重叠
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
  • 计算BFC的高度时,浮动元素也参与计算

创建bfc方法

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

bfc的使应用

  • 自适应两栏布局
  • 清除浮动(高度塌陷)或者使用伪元素before after 中clear:both
  • 防止垂直margin重叠

你可能感兴趣的:(样式Css)