css盒模型与BFC

javaScript

模型与BFC相关知识

盒模型:

基本概念:

css模型分为2种标准模型和ie模型,标准模型的宽、高计算不包含padding与border,IE模型的宽、高计算包含padding和border,比如:一个div设置是标准模型,设置它的width:200px,height:200px,padding:20,border:10px,最终得到的div宽 260px,高 260px。IE模型宽、高还是200,但内容区变成140px。

设置:

通过给box-sizing: border-box || content-box区分2种模型,浏览器默认是content-box(标准模型)。

获取样式:

通用:dom.style[‘xxx’] 只能获取行内定义的样式。
标准浏览器:用window.getComputedStyle(dom)[‘样式属性名’] 可以获取到计算后的样式。
IE浏览器:dom.currentStyle[“prop”] 获取样式。
扩展:dom.getBoundingClientRect().width/height ,通常用于计算元素的位置(left、top)。

BFC:

概念

块级格式化上下文。

特性

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

原理 / 规则
  • BFC这个元素的垂直方向的边距会发生重叠。
  • BFC区域不会与float box重叠。
  • BFC这个元素在页面上是一个独立容器,(外面 / 里面)的元素不会相互影响。
  • 计算BFC高度时,子元素处于浮动的情况下也会参与计算(子元素height:100px, flat:left,父级元素float: left)。
如何创建BFC
  • 跟元素
  • float的值为left、right
  • position的值为absolute、fixed
  • display的值为inline-block、table-cell、flex、inline-flex
  • overflow的值为auto、hidden、scroll
BFC适用场景
  • 清除浮动(对应规则:计算BFC的高度时,浮动元素也参与计算)
  • 防止margin边距重叠
  • 自适应两栏布局 (对应规则:BFC区域不会与float box重叠)
  • 两栏等高布局
  • 父级元素宽高未知,子元素水平垂直居中

css单位

vh、vw、em、rem、%

特别注意点

  • margin、padding这些属性的值如果设置成100%,值是基于父级的width来计算的。
    适用场景:图片占位
  • 父级未设置高度,子元素float并且高度100%,出现无效情况
    适用场景:等高布局

参考文章