这篇文章主要介绍了CSS盒模型面试题的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站是少有的网站建设、网站设计、营销型企业网站、小程序设计、手机APP,开发、制作、设计、友情链接、推广优化一站式服务网络公司,公司2013年成立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评
问题简答
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。
它包括：
外边距 → margin
边框 → border
内边距 → padding
实际的内容 → content
它有标准模型和IE模型两种；
知识解析
盒模型，英文box model。
无论是div、span、还是a都是盒子。
图片、表单元素一律看作是文本，它们并不是盒子，因为一张图片里面并不能放东西，它自己就是自己的内容。
盒模型各部分说明：
Margin(外边距) ：清除边框外的区域，外边距是透明的（可以为负值）。
Border(边框) ：围绕在内边距和内容外的边框。
Padding(内边距) ：清除内容周围的区域，内边距是透明的（不允许负值）。
Content(内容) ：盒子的内容，显示文本和图像。
问题简答
标准模型和ie模型的区别是计算宽width高height的不同。
标准模型width不计算padding和border；
ie模型width计算padding 和border；
知识解析
标准盒模型（W3C盒子模型）
设置的宽高是对实际内容content的宽高进行设置，内容周围的border和padding另外设置;
即元素实际占位的宽高为：
width【height】= 设置的content的宽【高】 + padding + border + margin
可以通过实例来理解：写一个div，同时设置了宽、高、边框、内边距、外边距；
重庆分公司
重庆分公司
//注：如果下面示例未写html和css,说明与此处相同
.box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px;
margin: 40px;
background: #66FFFF;
}
Axjy 效果及Chrome的开发者工具中显示的盒模型如下：
可以看到content部分即为100×100，内容周围都是另外设置的，width=40+10+30+100+30+10+40=180；
IE盒子模型（怪异盒模型）
设置的宽高是对实际内容content + 内边距（padding）+边框（border）之和的width和height进行设置的;
即元素实际占位的宽高为：
width（height）= 设置的width（height）+外边距margin
和上面使用同样的例子，但是通过设置box-sizing:border-box;，把它变为IE盒模型；
.box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px;
margin: 40px;
background: #66FFFF;
box-sizing: border-box;//注意
}
Axjy 效果及Chrome的开发者工具中显示的盒模型如下：
可以很明显的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;
问题简答
上面的示例其实已经用到了这个设置
css设置标准模型：Box-sizing:context-box (也是浏览器默认的盒模型)；
css设置Ie模型：box-sizing:border-box;
问题简答
1) dom.style.width/height【只能取到内联元素】 2) dom.currentStyle.width/height【只有IE支持】 3) document.getComputedStyle(dom,null).width/height 4) dom.getBoundingClientRect().width/height 5) dom.offsetWidth/offsetHeight【常用】
知识解析
1、dom.style.width/height
通过dom节点的style样式获取，只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到
.box{...}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.style.width;
let height = targetDom.style.height;
console.log("width",width)
console.log("height",height)使用类设置宽高时
获取的宽高为空
在行内设置宽高时
获取的是行内设置的宽高
element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写
2、dom.currentStyle.width/height
取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容
.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.height;element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读
3、document.getComputedStyle(dom,null).width/height
取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9 以上支持。
getComputedStyle()方法,
第一个参数：取得计算样式的元素；
第二个参数：一个伪元素字符串（例如“:after”），如果不需要伪元素信息，默认为null；
.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = window.getComputedStyle(targetDom).width
let height = window.getComputedStyle(targetDom).height
console.log("width",width)
console.log("height",height)
『小扩展』
如果box类不设置宽高，而是由内容自动撑开；
则标准盒模型通过getComputedStyle获取到的宽高是content的值；
IE盒模型通过getComputedStyle获取到的宽高 = border + padding + content，不包括外边距；
4、dom.getBoundingClientRect().width/height
得到渲染后的宽和高，大多浏览器支持。IE9以上支持。
.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.getBoundingClientRect().width;
let height = targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)标准模型，宽高设置为100的结果，额外包括了padding和border的值；
IE模型，宽高设置为100的结果；
『小扩展』
如果box类不设置宽高，而是由内容自动撑开；
不论是哪种模型，获取到的都是（border + padding + content)，不包括外边距；
getBoundingClientRect还可以取到相对于视窗的上下左右的距离（用于获取某个元素相对于视窗的位置集合）。
5、dom.offsetWidth/offsetHeight（常用）
包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。
.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)标准模型，宽高设置为100的结果；
IE模型，宽高设置为100的结果；
小扩展
如果box类不设置宽高，而是由内容自动撑开；
不论是哪种模型，获取到的都是（border + padding + content)，不包括margin；
从上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 结果是一样的
问题简答
外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）
『原因』
根据W3C文档的说明，当符合以下条件时，就会触发外边距重合
都是普通流中的元素且属于同一个 BFC
没有被 padding、border、clear 或非空内容隔开
两个或两个以上垂直方向的「相邻元素」
相邻元素包括父子元素和兄弟元素
『重叠后的margin计算』
1、margin都是正值时取较大的margin值
2、margin都是负值时取绝对值较大的，然后负向位移。
3、margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加
边距重叠详解及解决方案
1、嵌套块（父子）元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
『解决办法』
1、为父元素定义1px的border-top或padding-top。
2、为父元素添加overflow:hidden。
3、子元素或父元素设置display:inline-block。
4、父元素加前置内容（::before）生成。（推荐）
『示例』
在页面放两个正方形
