第一问：什么是盒模型？
可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距(margin)、边框(border)、填充(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
但是，盒模型有标准盒模型和IE的盒模型。如果你打出来这两种，
第二问：两者的区别是什么？
我们先来看两张图：
标准的(W3C)盒模型：
IE盒模型：
第三问：怎么设置这两种模型呢？
很简单，通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。
第四问JS怎么获取和设置盒模型的宽高呢，你能想到几种方法
第一种：dom.style.width/height
这种方法只能获取使用内联样式的元素的宽和高。
第二种：
dom.currentStyle.width/height
这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。
第三种：
window.getComputedStyle(dom).width/height
这种方法获取的也是浏览器渲染以后的元素的宽和高，但这种写法兼容性更好一些。
第四种：
dom.getBoundingClientRect().width/height
这种方法经常使用的场所是，计算一个元素的绝对位置(相对于视窗左上角)，它能拿到元素的left、top、width、height 4个属性。
第五问：什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？
边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
父子关系的边距重叠：
<sectionclass="box"id="fat"> <styletype="text/css">#fat{background-color:#f00;overflow:hidden; }#fat.child{margin-top:10px;height:100px;background-color:blue; }style> <articleclass="child">article> section>
同级关系的重叠：
<sectionclass="fat"> <styletype="text/css">.fat{background-color:#ccc; }.fat.child-one{width:100px;height:100px;margin-bottom:30px;background-color:#f00; }.fat.child-two{width:100px;height:100px;margin-top:10px;background-color:#345890; }style> <divclass="child-one">div> <divclass="child-two">div> section>
解决方法就是生成BFC
第六问：什么是BFC？
BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
第七问：那么BFC的原理是什么呢？
内部的Box会在垂直方向上一个接一个的放置垂直方向上的距离由margin决定。(完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷)，与方向无关。)每个元素的左外边距与包含块的左边界相接触(从左向右)，即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界)BFC的区域不会与float的元素区域重叠计算BFC的高度时，浮动子元素也参与计算BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然第八问：BFC由什么条件创立?
float属性不为noneposition属性为absolute或fixeddisplay属性为inline-block、table-cell、table-caption、flex、inline-flexoverflow属性不为visible(- overflow: auto/ hidden;)总结：pdfo
第九问：BFC的使用场景有哪些呢
可以用来自适应布局。<sectionid="layout"> <stylemedia="screen">#layout{background:red; }#layout.left{float:left;width:100px;height:100px;background:#664664; }#layout.right{height:110px;background:#ccc;overflow:auto; }style> <divclass="left">div> <divclass="right">div> section>
可以清除浮动：(塌陷问题)
<sectionid="float"> <stylemedia="screen">#float{background:#434343;overflow:auto; }#float.float{float:left;font-size:30px; }style> <divclass="float">我是浮动元素div> section>
解决垂直边距重叠：
<style>#margin{background:pink;overflow:hidden; }#margin>p{margin:5pxauto25px;background:red; }#margin>div>p{margin:5pxauto20px;background:red; }style> <p>1p> <divstyle="overflow:hidden"> <p>2p> div> <p>3p> section><sectionid="margin">
第十问清除浮动的方法(最常用的4种)
这时候很多人会想到新建标签clear：both和float 方法，但是这两种方法并不推荐使用！
什么是clear：both
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来
额外标签法(在最后一个浮动标签后，新加一个标签，给其设置clear：both；)(不推荐)
<htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Documenttitle> <style>.fahter{width:400px;border:1pxsoliddeeppink; }.big{width:200px;height:200px;background:darkorange;float:left; }.small{width:120px;height:120px;background:darkmagenta;float:left; }.footer{width:900px;height:100px;background:darkslateblue; }.clear{clear:both; }style> head> <body> <divclass="fahter"> <divclass="big">bigdiv> <divclass="small">smalldiv> <divclass="clear">额外标签法div> div> <divclass="footer">div> body> html>html>
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
不建议使用。
父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
通过触发BFC方式，实现清除浮动
width:400px; border:1pxsoliddeeppink; overflow:hidden; }.fahter{
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
不推荐使用
使用after伪元素清除浮动(推荐使用)
.clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ *zoom:1;/*ie6清除浮动的方式*号只有IE6-IE7执行，其他浏览器不执行*/ } <body> <divclass="fahterclearfix"> <divclass="big">bigdiv> <divclass="small">smalldiv> div> <divclass="footer">div> body>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
推荐使用
使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } <divclass="fahterclearfix"> <divclass="big">bigdiv> <divclass="small">smalldiv> div> <divclass="footer">div>
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
推荐使用
浮动父元素
width:50px; border:1pxsolid#8e8e8e; float:left; } <divstyle="float:left"> <imgsrc="images/search.jpg"/> <imgsrc="images/tel.jpg"/> <imgsrc="images/weixin.png"/> <imgsrc="images/nav_left.jpg"/> div>img{
这种方式也不推荐，了解即可。如果有不对的地方欢迎留言交流与补充
html盒子模型子元素怎么水平占满父元素_立下flag）每日10道前端面试题18 关于【盒模型】十问...
