面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

2018-06-09 admin

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

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

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

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

clipboard.png

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

clipboard.png 从上图可以看到 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. 实例题(根据盒模型解释边距重叠)

clipboard.png

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

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

  <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>

运行效果:

clipboard.png

上图证明 100px 是对的。

接着我们给元素加个 overflow:hidden,然后在看效果:

clipboard.png

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

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

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

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

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

BFC 的基本概念

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

BFC 的原理

  1. BFC 这个元素的垂直的边距会发生重叠
  2. BFC 的区域不会与浮动元素的 float 重叠
  3. 独立的容器,内外元素互不影响
  4. 计算 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>

clipboard.png]

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

解:就是给子元素加个一个父级元素,让你能元素创建一个 BFC,如下:

clipboard.png

运行效果如图:

clipboard.png

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

运行效果:

clipboard.png

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

clipboard.png

运行效果:

clipboard.png

场景三(清除浮动的原理)
  <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>

运行效果:

clipboard.png

可以看出父级元素的高度为0,这是为什么呀?

这是因为 float 导致了元素的坍塌,所以父级元素的高度为0,这时我们给父级元素创建一个 BFC,就能解决问题。

clipboard.png

运行效果:

clipboard.png

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

愿你成为终身学习者

[转载]原文链接:https://segmentfault.com/a/1190000015235886

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33689.html

文章标题:面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部