面试官：谈谈你对 CSS 盒模型的认识?（你肯定会？）

时间 2019-12-05

标签面试谈谈 css 模型认识肯定栏目快乐工作繁體版

原文原文链接

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

涉及知识点(层层递进):html

基本概念：标准模型+ IE模型(区别)
CSS如何设置这两种模型
JS如何设置获取盒子模型对应的宽和高
实例题(根据盒模型解释边距重叠)
BFC(边距重叠解决方案)

CSS盒模型

1. 基本概念：标准模型+ IE模型

从上图能够看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包含其余部分。dom

从上图能够看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不一样的是：IE 盒子模型的 content 部分包含了 border 和 pading。布局

2. CSS如何设置这两种模型

box-sizing:conent-box;
box-sizing:border-box;

3.JS如何设置获取盒子模型对应的宽和高

dom.style.width/height
dom.currentStyle.width/height  (ie支持)
window.getComputedStyle(dom).width/height;
dom.getBoundingClientRect().width/height;

4. 实例题(根据盒模型解释边距重叠)

如上图:有两个元素其中子元素高度为100px,子元素与父元素的上边距为 10px,求父元素的实际高度？学习

答案:说100px 对，说110 也对，为何捏？这个要看父元素的盒模型要怎么设置的，上代码演示咯，注意看噢：spa

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #sec{
      background: #f00;
    }
    .child{
      height: 100px;
      margin-top: 10px;
      background: yellow;
    }
  </style>
</head>
<body>
  <section id="sec">
    <article class="child">
    </article>
  </section>
</body>

运行效果：code

上图证实 100px 是对的。orm

接着咱们给元素加个 overflow:hidden,而后在看效果：htm

你会发现这时高度为 110px, 这时你们可能会疑问,为何给父级元素设置一个 overflow:hidden之后，它的高度就成 110 呢，这块的基本原理是啥呢，咋就这样呢？说这个以前，先引用一个知识点：ip

上面代码是父子元素边距重叠，那么还有两种状况边距重叠就是，一种是兄弟元素，就是两个 div 挨着，每一个都上边距或者下边距，那么重叠的原则就是取最大值。get

来回答上面问题：给父级加了 overflow:hidden,其实就是给父级元素建立一个BFC(块级格式化上下文)，那什么是BFC，请看下一个话。

5. BFC(边距重叠解决方案)

BFC 的基本概念
BFC 的原理
如何建立 BFC
BFC使用场景

BFC 的基本概念

Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关。

BFC 的原理

BFC 这个元素的垂直的边距会发生重叠
BFC 的区域不会与浮动元素的 float 重叠
独立的容器，内外元素互不影响
计算 BFC 高度，浮动元素也参与计算

如何建立 BFC

float 不为none的时候
position 不为 static 或者 relative 的时候
display 与 table 相关的时候
overflow 为auto, hidden 的时候

BFC使用场景

场景一

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #margin{
      background: pink;
      overflow: hidden;
    }
    #margin>p{
      margin: 5px auto 25px;
      background: red;
    }
  </style>
</head>
<body>
  <section id="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </section>
</body>

]

如上图，咱们给每一个p 设置上边距5，下25 结果从第二个起来它的上边距，下边距都是25 而不是 30，这个就是边距重叠问题，那如何消除这个问题呢？

解:就是给子元素加个一个父级元素，让你能元素建立一个 BFC，以下：

运行效果如图:

场景二

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #layout{
      background: red;
    }
    .left {
      width: 100px;
      height: 100px;
      background: pink;
      float:left;
    }
    .right{
      height: 110px;
      background: #ccc;
    }
  </style>
</head>
<body>
  <section id="layout">
    <div class="left"></div>
    <div class="right"></div>
  </section>
</body>

运行效果：

从运行效果能够发现，当右侧增高的时候会侵入左侧的占位，这个是float的特性，显示这个不符合咱们左右布局的目的，那怎么办呢？其实很简单，就是给右侧的元素建立一个 BFC,以下：

运行效果：

场景三（清除浮动的原理）

<style>
    html,*{
      padding: 0;margin: 0;
    }
    #float{
      background: red;
    }
    .float{
      float: left;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <section id="float">
    <div class="float">个人浮动的小智</div>
  </section>
</body>

运行效果：

能够看出父级元素的高度为0，这是为何呀？

这是由于 float 致使了元素的坍塌，因此父级元素的高度为0，这时咱们给父级元素建立一个 BFC，就能解决问题。

运行效果：

以上就是 BFC的清除浮动原理。

愿你成为终身学习者