[TOC] ## 1.css盒模型的基本概念 ### 1.1标准模型+IE模型 > margin border padding content ### 1.2区别 > `计算方式不同` > 标准 width = content > IE width = content + padding + border ### 1.3css 如何设置 > box-sizing : content-box (默认) > box-sizing：border-box （IE） > 补充box-sizing属性有3种 box-sizing：inherit ## 2.js如何设置获取盒模型对应的宽高 ``` dom.style.width --- 获取内联样式的属性 dom.currentStyle.width --- 获取渲染后的宽高 （只有IE支持） window.getComputedStyle(dom).width --- 获取渲染后的宽高 ~~dom.getBoundingClientRect().width --- 获取的绝对位置 ~~ ``` ## 3.边距重叠 ### 3.1 边距重叠实例及什么是边距重叠 > 元素间的margin-top与margin-bottom发生重叠 ``` 多个 <p>1</p> 标签设置边距 margin：20px auto 40px; 最终 p标签之间的距离为 40px 即取margin-top与maegin-button之间的最大值 ``` ### 3.2边距重叠的解决方案 `BFC` > 给子元素增加父元素，给父元素创建BFC ``` 如：<div style="overflow: hidden;"><p>2</p></div> ``` > 如何创建--->给父级元素设置 `overflow: hidden` ## 4.BFC ###4.1基本概念 > 块级格式化上下文 ### 4.2原理（不理解先写着） >内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算 ### 4.3 BFC作用 > 1. 解决边距重叠 > 2. 解决有float元素时 元素高度超出时内容溢出的问题 >