一、概念CSS盒子模型本质上是一个盒子，封装了周围的HTML元素。它包括：边距、边框、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模型+IE模型1.1W3C盒模型（standardboxmodel）1.2IE盒模型（weirdboxmodel）2.知识点2.1标准模型和IE模型的区别计算宽高的区别。标准盒模型：总盒宽/高=宽/高+填充+边框+边距。（即width/height只是contentheight，不包括padding和border值）IE盒子模型：盒子总width/height=width/height+margin=(contentareawidth/height+padding+border)+margin。（即width/height包括padding和border值）2.2如何在CSS中设置这两个模型标准：box-sizing:content-box;(浏览器默认设置)IE:box-sizing:border-box;2.3如何获取JS盒模型对应的宽高(1)dom.style.width/height只能获取内联样式的宽高，不能获取style标签和链接外链接的样式.(2)dom.currentStyle.width/height(只兼容IE)获取最终渲染的宽高(3)window.getComputedStyle(dom).width/height同(2)但是多浏览器支持，IE9以上支持。(4)dom.getBoundingClientRect().width/height也是渲染的宽高，大部分浏览器都支持。IE9及以上版本支持，另外还可以获取相对于窗口的上下左右距离。(6)dom.offsetWidth/offsetHeight包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。2.4例题（根据盒模型解释overlappingmargin）例子：一个子元素嵌套在父元素里面。已知子元素的高度为100px，子元素与父元素之间的上边距为10px。计算父元素的实际高度。CSS:.parents{宽度：100px;背景：#FF9934；}.child{宽度：100%；高度：100px；背景：#336667；margin-top:10px;}html:其父元素的实际高度为100px或110px。主要看父元素的盒子模型是怎么设置的。如上面代码：如果父元素没有添加overflow:hidden，则父元素的实际高度为100px；如果添加了overflow:hidden，则父元素的高度为110px，并为父元素创建一个BFC，块级格式化上下文。完整案例：https://jsbin.com/dubimoyahe/...。2.5BFC（marginoverlappingsolution）2.5.1BFC基本概念BFC：块级格式化上下文BFC基本概念：BFC是CSS布局的概念，是一个独立的渲染区域，是一个环境，里面的元素不会影响外部元素。父子元素与兄弟元素重叠，重叠原则取最大值。空元素的marginoverlap是margin和padding的最大值。2.5.2BFC原则（渲染规则|布局规则）：(1)内部Boxes会从顶部垂直方向依次放置；(2)Boxes的垂直距离由margin(outermargin)决定，属于同一个BFC的两个相邻boxes的margin会重叠；(3)每个元素的marginBox的左侧触及包含块borderBox的左侧（对于从左到右的格式化，否则相反）。即使有浮动也是如此；(4)BFC在页面上是一个隔离独立的容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置浮动；(5)BFC区域不会与floatBox重叠（clearfloat）；(6)BFC计算高度时，浮动元素也参与计算。2.5.3CSS在什么情况下会创建BFC（即脱离文档流）0.根元素，即HTML元素（最大的BFC）1.浮动（float的值不是none）2.绝对定位元素（position的值为absolute或fixed）3.内联块（显示为inline-block）4.表格单元（显示为table、table-cell、table-caption、inline-block等HTML表格-相关属性）5.Flexbox（显示为flex或inline-flex）6.默认值。内容不会被裁剪，呈现在元素框外（overflow不可见）2.5.4BFC功能（使用场景）1.自适应二（三）列布局（避免多列布局因宽度计算舍入以及自动换行）2.避免元素被浮动元素覆盖3.允许父元素的高度包含子浮动元素并清除内部浮动（原理：触发父div的BFC属性，让后面的子元素浮动div都在父div的同一个BFC区4.去除marginoverlap现象当属于不同的BFC时，可以防止marginoverlap2.6IFC2.6.1IFC基本概念IFC:Inlineformattingcontext):(1)internalBoxes会从containingblock的顶部沿水平方向依次放置；(2)这些Boxes之间的水平margin、border和padding是有效的；(3)Boxes垂直对齐方法：与其底部、顶部或内部文本的基线对齐（默认情况下，文本和图像对齐），例如：line-heigth和vertical-align。更多文章分享：https://www.artroy.com.cn/
