css盒模型

概念

content padding border margin

分类

• 标准： 宽高 = content
  box-sizing: content-box;
• IE： 宽高 = content + padding + border
  box-sizing: border-box;

JS如何设置盒模型的宽和高

//只能获取内联样式设置的宽高
dom.style.width/height

//获取渲染后即时运行的宽高，值是准确的。但只支持 IE dom.currentStyle.width/height

//获取渲染后即时运行的宽高，值是准确的。兼容性更好 window.getComputedStyle(dom).width/height;

//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对位置，getBoundingClientRect()会得到4个值：left, top, width, height dom.getBoundingClientRect().width/height;

BFC

1. 布局规则 属于同一个BFC的两个相邻Box的margin会发生重叠
   BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
2. 如何创建BFC

• float的值不是none。
• position的值不是static或者relative。
• overflow的值不是visible。
• display的值是inline-block、table-cell、flex、table-caption或者- inline-flex。

3. 作用

• 利用BFC避免margin重叠
• 清除浮动
• 自适应两栏布局

.left{
    float: left;
    width: 100px;
    margin-right: 20px;
    background-color: violet;
}
.right{
    overflow: hidden;
    background-color: tomato;
}

这个方法主要是应用到BFC的一个特性：
浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样该兄弟元素 就会被浮动元素覆盖。
若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度。
并不是一定要在.right上用overflow: hidden;，只要能触发BFC就好了，另外在IE6上也可以触发haslayout特性（推荐用*zoom: 1;）。
由于.right的宽度是自动计算的，不需要设置任何与.left宽度相关的css，因 此.left的宽度可以不固定（由内容盒子决定）。