前端面试--一面03_CSS盒模型

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

一、分析：

• 开放性（简答）题，分析涉及哪些知识点
  • 盒模型基本概念、区别
• 思考接下来会怎么延伸追问，做好心理准备
  • 怎么应用
  • 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 也可能是110px
• 100px
  • 父元素是子元素的内容撑开的
  • 而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
邮箱：[email protected]