css盒模型
1.盒模型基本概念：content padding border margin
2.标准盒模型和IE盒模型
标准模型中，盒模型的宽高只是内容（content）的宽高
IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高
3.css如何设置两种盒模型
/* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
4.js获取元素的宽高
元素宽高设置方式：内联样式，元素节点样式，外联样式
- dom.style.width/height 只能取到dom元素内联样式所设置的宽高
- dom.currentStyle.width/height 三种样式设置方式的值都能取到，只支持IE
- window.getComputedStyle(dom).width/height 三种样式设置方式的值都能取到，各浏览器兼容
- dom.getBoundingClientRect().width/height 根据元素在视窗中的绝对位置来获取宽高的
- dom.offsetWidth/offsetHeight 最常用的，也是兼容最好的
5.边距重叠
父子元素间：子元素的margin-top会使父元素高度只有子元素高度那么高
兄弟元素间：兄元素的下边距和弟元素的上边距重叠，取两者中的较大值较大值
空元素：空元素的上下边距重叠，中两者中的较大值
6.BFC
概念：BFC全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
原理：
- BFC内部的Box会在垂直方向，一个接一个的设置；
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
- 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
- BFC的区域不会与float box的重叠
- BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，浮动元素也参与计算
创建BFC的css方法：
- 根元素或其它包含它的元素
- float属性不为none
- position属性为absolute或fixed
- display属性为inline-block、table-cell、table-caption、flex、inline-flex
- overflow属性不为visible
BFC用途：
- 自适应两栏布局
- 清除内部浮动
- 防止垂直margin重叠
自适应两栏布局
<style > body{ position: relative; height: 400px; } .aside{ height: 200px; width: 200px; background-color: pink; float: left; } .main{ background-color: grey; height: 300px; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
根据BFC原理的第三条：每个元素的margin box的左边，与包含块border box的左边相接触（对于从左到右的格式化，否则相反）。即使存在浮动也是如此。因此，即使存在浮动的aside，但是main还是与包含块的左边相接触；
按照BFC原理的第四条：BFC的区域不会与float box重叠。因此，可以通过使main触发BFC，来实现自适应两列布局
.main{ overflow: hidden; }
当main触发BFC后，其不会与浮动的aside重叠。因此会根据包含块的宽度和aside的宽度，自动变窄，效果如下：
清除内部浮动
当子元素均浮动时，其无法撑开父元素，此时可以让父元素生成BFC，如下：
<style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
根据BFC原理的第六条：计算BFC的高度时，浮动元素也参与计算。因此为了达到清除内部浮动，可以让.par触发BFC，那么计算par的高度时，浮动元素也参与计算，par就被撑开了。
.par{ overflow: hidden; }
防止margin重叠
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body>
可以发现，两个p元素之间的垂直margin出现了重叠。根据BFC的第二条规则：Box垂直方向的距离由margin决定，属于同一BFC的两个Box会发生margin重叠。因此，可以在其中一个p上包裹容器，然后触发其BFC，这样两个p就不在同一个BFC，就不会发生重叠。
<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body>
