前端面试--一面03

题目：谈谈你对CSS盒模型的认识

文章目录

题目：谈谈你对CSS盒模型的认识一、分析：二、回答：1、盒模型的基本概念、区别2、怎么应用2种盒模型3、JS怎么获取盒模型(content)的宽高 三、实际情况中的实例图片中父元素的高度是多少？ 四、延伸问题BFC的概念、原理、如何创建、使用场景BFC的详细内容可[参考这个](https://www.cnblogs.com/libin-1/p/7098468.html)

一、分析：

开放性（简答）题，分析涉及哪些知识点 盒模型基本概念、区别 思考接下来会怎么延伸追问，做好心理准备 怎么应用JS怎么获取盒模型的宽高实际情况中的实例

---

二、回答：

1、盒模型的基本概念、区别

答出margin、border、padding、content,区别如图宽高

2、怎么应用2种盒模型

答出css代码 box-sizing: content-box; /*默认标准模型*/ box-sizing: border-box; /*ie模型包含border、padding*/

3、JS怎么获取盒模型(content)的宽高

都知道是用dom获取属性，要知道有多种和区别 dom.style.width/height //只能获取内联的宽高 dom.currentStyle.width/height //获取到渲染到浏览器之后的宽高 //只支持IE window.getComputedStyle(dom).width/height //获取到渲染到浏览器之后的宽高 //支持谷歌火狐等 dom.getBoundingClientReact().width/height //一般用于获取到dom在视窗的位置 //输出坐标x,y和宽高

---

三、实际情况中的实例

图片中父元素的高度是多少？

可能是100px 也可能是110px100px 父元素是子元素的内容撑开的而margin不属于子元素的内容因此父元素也是100px称之为父子容器边距重叠 怎么使父元素110px 不考虑添加高度，定位那些解决父子容器边距重叠问题使用BFC

---

四、延伸问题

BFC的概念、原理、如何创建、使用场景

BFC的概念 Block Fromatting Context 块级格式化上下文 原理 即渲染规则定义了BFC的容器是独立容器BFC容器高度将包含浮动元素（正常容器包不住浮动）BFC容器不会与浮动元素重叠（同级时）BFC容器内部元素的垂直方向边距会重叠 如何创建BFC容器 float的值不为none 　　- overflow的值不为visible 　　- display的值为inline-block、table-cell、table-caption 　　- position的值为absolute或fixed 使用场景 解决垂直外边距（margin-top、margin-bottom）重叠使父容器包含它内部的所有元素，包括浮动元素(清除内部浮动)解决布局的流元素溢出等问题

BFC的详细内容可参考这个

---

项目来源：慕课网 如有建议和疑问可联系 QQ：1017386624 邮箱：1017386624@qq.com