务实基础-详细解读HTML&CSS经典面试题

追梦玩家
1,988 阅读24分钟

一、前言

平时看别人写的面经，发现 html 和 css 考的不多，但是有一些 html 和 css 知识点经常被问及，堪称为经典面试题都不为过。个人觉得，在准备面试的过程中，如果你时间充足，看比较多的 html 和 css 面试题，这没多大关系，但是假设你时间不充裕，那就得学会适当的取舍，看 html 和 css 经典面试题，也就是面试当中经常会被问的知识点，同时把重心放到原生 JavaScript 核心知识上面。

二、大公司到底是怎样面试的？

注：大公司面试都有个特点，就是根据一个问题，不断的延伸地问你。

  • 什么是标签语义化
  • 都有哪些标签，都是啥意思
  • 块级标签和行内标签的区别
  • 如何转换
  • display 除了这几个值还有哪些
  • display:none
    • 让元素隐藏，你可以怎么做？
    • display:none 和 visibility:hidden 的区别？
    • opacity 的兼容处理
    • filter 还能做哪些事情
    • ……
  • display:flex
    • 项目中你什么时候用到了 flex
    • 除了这种方式能居中还有哪些？
    • 响应式布局还可以怎么做？
    • 都有哪些盒子模型
  • ……

假如你对上面这些问题的答案都心中有数，那就可以跳过这部分，进入下一部分，假设你对上面问题的答案有一些不清晰的话，建议你之后可以抽时间把相关知识给学习一下，下面进入正题。

三、经典面试题解析

1. 你是如何理解 HTML 语义化的？

背书式回答 - 相关知识点，也相当于是直接把那些知识点给说出来，但是没有自己的看法

  • 用正确的标签做正确的事情。
  • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

出彩地回答 - 举例法/阐述法

我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构。一个语义化的文档，能够使页面的结果更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。

比如我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。

如果是搜索引擎的爬虫对我们的网页进行分析的话，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的。是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO，从 html 5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header、footer、aside 这些语义化的标签，删除了 big、font 这些没有语义的标签。html 5 新增的内容远远不止于此。

阐述法：讲一下以前布局使用 table，然后到使用 div + css 布局，到现在专业的前端会使用正确的标签进行页面开发。

2. 谈谈你对HTML5的理解？

背书式回答：单纯说知识点，略过

出彩地回答 - 说相关知识点，然后细说自己熟悉的某一两方面

HTML5 是定义 HTML 标准的最新的版本。具有新的元素，属性和行为，同时有更大的技术集，允许构建更多样化和更强大的网站和应用程序。

HTML5 新增了一些语义化的标签，比如 header、footer、nav 等等，删除了一些纯样式的标签；表单的改进；还新增了一些内容：

  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地通信（webSocket）
  • 本地存储（localStorage、sessionStorage）
  • 设备能力（地图定位，手机摇一摇）

扩展点：

HTML5 出现的本地存储解决了什么问题？

  • 克服 cookie 的一些限制，同时存储一些需要严格控制的客户端，不需要发送给服务器的一些数据
  • 提供了除 cookie 之外的另一种存储会话的途径
  • 提供了一种大容量存储空间来跨会话存储数据的途径

再说一下cookie，localStorage，sessionStorage的区别 - 要有条理的回答

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie 其实最开始是服务端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后发起同源请求时，发送给服务端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

localStorage 是 html5 提供的一种浏览器本地存储的方法，它一般能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非主动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

sessionStorage 也是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 seesion 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

表格汇总：

特性 cookie localStorage sessionStorage
数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 仅在当前会话有效， 关闭页面或浏览器后被清除
数据存储大小 4K 5M 5M
与服务端通信 每次都会携带在同源 的http请求头中,如果使用cookie保存过多 数据会带来性能问题的 不参与 不参与
用途 服务端生成，用于表示用户身份 用于浏览器缓存数据 用于浏览器缓存数据

3.掌握盒子水平垂直居中的五大方案

背书式回答：将自己了解的方案都回答出来

出彩地回答 - 个人建议

这种需求，在我的项目当中是非常常见的，刚开始的话，我只用到了这种方案，然后随着 css 3 的兴起，flex 这种方式流行起来，特别方便，有一段时间，我去掘金看博客的时候，发现一种方案，这种方案不常用，但是也能实现，我感觉挺有意思的，所以就记住了。

这可以说明你平时关注新技术，探讨新技术和老技术的对比，良好的学习习惯和自学能力。

实现该需求的方案：

  • 定位：三种
  • display:flex
  • flex/grid与margin:auto(最简单写法)
  • JavaScript
  • display:table-cell

首先创建基本的HTML布局和最基本的样式。

<div class="container">
    <div class="center"></div>
</div>

基本的 CSS 样式如下：

/* 公共代码 */
*{padding: 0;margin: 0;}
.container{
    /* 这里为了方便，设置好父盒子的大小 */
    width: 100vw;
    height: 100vh;
}
.center{
    width: 100px;
    height: 100px;
    background-color: #666;
}

方法1：绝对定位与负边距实现（已知高度宽度）

这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。也就是需要知道元素具体的宽高

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这个需求的话，有一个问题，就是需要知道元素具体的宽高

方法2：绝对定位与margin:auto（已知高度宽度）

这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* 注意此处的写法 */
}

方法3：绝对定位+CSS3(未知元素的高宽)

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。但是在项目中，要根据实际情况使用，考虑兼容问题的话，最好不要使用这个。

.container{
    position: relative;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

方法4：flex布局

不能兼容低版本的IE浏览器。

/* 直接在父容器设置即可 */
.container{
    position: relative;
    width: 100vw;
    height: 100vh; /* 必须有高度 */
    display: flex;
    justify-content: center; /* 主轴的对齐方式 */
    align-items: center; /* 交叉轴的对齐方式 */
}

方法5：flex/grid与margin:auto(最简单写法)

容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

.container{
    width: 100vw; /* 必须有高度 */
    height: 100vh;
    display: grid; /* 或者是 flex */
}
.center{
    margin: auto;
}

方法6：JavaScript - 了解即可

通过这个方法实现的，当页面大小重新改变，盒子的位置不会自动更改。一般情况下，能用 css 实现的，就不用 JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 实现盒子垂直水平居中</title>
  <style>
    *{padding: 0; margin: 0;}
    body{
      position: relative;
    }
    .box{
      width: 100px;
      height: 100px;
      background: #666;
    }
  </style>
</head>
<body>
  <div id="box" class="box"></div>
  <script>
      let HTML = document.documentElement,
          box = document.getElementById('box'),
          winW = HTML.clientWidth,
          winH = HTML.clientHeight,
          boxW = box.offsetWidth,
          boxH = box.offsetHeight;

      box.style.position = 'absolute';
      box.style.left = (winW - boxW) / 2 + 'px';
      box.style.top = (winH - boxH) / 2 + 'px';
  </script>
</body>
</html>

方法7：table 布局 - 了解即可

.container{
    width: 100vw;
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
}

4.关于CSS3中的盒模型

回答问题的时候，不要背书式回答，不要背书式回答，不要背书式回答。

出彩地回答 - 分析思考，哪种方式更好，遇到了哪些痛点，结合项目，看别人写的 ui 库的源代码

不单单回答知识点，盒模型是由：内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。其实我们最常用的是标准盒子模型，通过设置 box-sizing: content-box，标准盒模型的宽高是指content 区宽高。之前我遇到一种情况，实现一个100*100 的盒子，设置了 width 和 height，增加了 padding 和 border 的时候，发现盒子会变大，每次修改，我都要手动修改一下 width 和 height。后来 css 3出现了提供了一种方式 box-sizing: border-box，也就是怪异盒子模型，width 和 height 指的是盒子大小，并不是内容大小，不管我怎么调，不管我怎么调border，它会自己通过缩放内容，来实现整个盒子还是100*100，这样写样式比较方便，不用自己去计算值。所以我在项目中都是通过设置 box-sizing: border-box。

在做移动端响应式开发的时候，发现有很多布局方案的话，可以应用于 css 3 的flex 弹性伸缩盒模型。

标准盒模型

preview

怪异盒子模型

img

flex 弹性盒模型

img

5.CSS 如何实现双栏布局？

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>

基本的 CSS 样式如下：

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

下面的代码都是基于这套基本代码做覆盖，通过给容器添加不同的类来实现效果。

双 inline-block 方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;	/* 消除空格的影响 */
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;	/* 顶端对齐 */
    font-size: 14px; /* 需要给子元素重新设置 */
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px); /* 动态计算右侧盒子的宽度 */
}

缺点：

  • 需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的 box-sizing
  • 需要消除空格字符的影响
  • 需要设置 vertical-align: top 满足顶端对齐

双 float 方案

.wrapper-double-float {
    overflow: auto;		/* 清除浮动 */
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

缺点：

  • 需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的 box-sizing
  • 父元素需要清除浮动，个人建议：使用伪元素清楚浮动

float+margin-left方案

.wrapper-float {
    overflow: hidden;		/* 清除浮动 */
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

缺点：

  • 需要清除浮动
  • 需要计算右侧盒子的 margin-left

使用absolute+margin-left方法

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

缺点：

  • 使用了绝对定位，若是用在某个 div 中，需要更改父容器的 position
  • 没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

使用float+BFC方法

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

原理：利用了左侧浮动，但是右侧盒子通过 overflow: auto；形成了 BFC，因此右侧盒子不会与浮动的元素重叠。

缺点：

  • 父元素需要清除浮动

flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

实际开发中使用的比较多是这种方案，代码少，使用简单。需要注意的是，flex 容器的一个默认属性值：align-items: stretch。这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置align-items: flex-start;

grid方案

又一个新型的布局方式。可以满足需求。扩充知识面。

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr; /* 定义每一列的列宽 */
    align-items: start; /* 设置单元格内容的垂直位置（上中下） */
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1; /* grid-column属性是grid-column-start和grid-column-end的合并简写形式 */
}

.wrapper-grid .right {
    grid-column: 2;
}

注意：

  • grid布局也有列等高的默认效果。需要设置: align-items: start;。
  • grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

6. CSS 如何实现三栏布局？

三栏布局，顾名思义就是两边固定，中间自适应。这种布局很古老，但依旧非常经典，因为有好多地方都存在它的身影，包括一些大厂面试的时候还是很喜欢问这个问题的。

注：圣杯布局、双飞翼布局之后分开细说

首先创建基本的HTML布局和最基本的样式。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

基本的 CSS 样式如下：

*{padding: 0;margin: 0;}
.left{
    width: 100px;
    height: 200px;
    background-color: red;
}
.right{
    width: 200px;
    height: 200px;
    background-color: blue;
}
.main{
    height: 200px;
    background-color: green;
}

下面的代码都是基于这套基本代码做覆盖，通过给容器添加不同的类来实现效果。

float 方案

.container-float{
    overflow: auto;
}
.container-float .left{
    float: left;
}
.container-float .right{
    float: right;
}
.container-float .main{
    margin-left: 120px;
    margin-right: 220px;
}

缺点：

  • 父元素需要清除浮动
  • 主要内容无法最先加载，当页面内容较多时会影响用户体验

绝对定位方案

.container-absolute{
    position: relative;
}
.container-absolute .main{
    margin: 0 120px;
}
.container-absolute .left {
    position: absolute;
    left: 0;
    top: 0;
}

.container-absolute .right {
    position: absolute;
    right: 0;
    top: 0;
}

简单实用，并且主要内容可以优先加载。

缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

BFC 方案

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 三栏布局。

.container-float-bfc .left{
    float: left;
    margin-right: 20px;
}
.container-float-bfc .right{
    float: right;
    margin-left: 20px;
}
.container-float-bfc .main{
   	overflow: hidden;
}

缺点：

  • 父元素需要清除浮动

  • 主要内容模块无法最先加载，当页面中内容较多时会影响用户体验

flex 方案

HTML布局：

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS 样式：

.container-flex{
    display: flex;
}
.container-flex .main{
    flex-grow: 1;
}
.container-flex .left{
    order: -1;
    flex: 0 1 100px;
    margin-right: 20px;
}
.container-flex .right{
    flex: 0 1 200px;
    margin-left: 20px;
}

简单实用，未来的趋势。

table 方案 - 了解即可

html 结构：

<div class="container container-table">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

css 代码：

.container-table{
    display: table;
    width: 100%;
}
.left, .main, .right{
    display: table-cell;
}

缺点：无法设置栏间距

7.剖析圣杯布局的核心原理

基本的HTML布局：

注：html 代码中 main 部分首先要放在 container 的最前部分，然后是left，right

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

1、三列的左右两列分别定宽 200px 和 200px，中间部分 main 设置100%撑满

注：这个 css 代码为基础，不断地修改

*{padding: 0;margin: 0;}
.container > div {
    height: 200px;
}
.left{
    width: 200px;
    background: red;
}
.right{
    width: 200px;
    background: blue;
}
.main{
    width: 100%;
    background: green;
}

2、设置全部左浮动，现在 main 由于width是100%，所以占据了一整行。

.container > div {
    float: left;
    height: 200px;
}

3、left元素设置margin-left:-100%;拉回行头

注：设置 margin-left 为负值会让元素自身位置发生变化，由于浮动的关系，元素被往左拉了一个 main 元素的宽度(100%)故回到了开头。

4、right元素设置margin-left: -200px;拉回行尾

5、现在的问题就是左右两边的元素覆盖了 main 元素的内容，我们可以给容器 container 加上两边padding：

6、设置相对定位

在设置了padding 后，左右元素都被挤了进来，我们可以设置position:relative解决，因为浮动元素已经脱离了文档流，所以不能设置absolute。 通过设置left和right元素的相对位置，实现定位：

完整 CSS 代码：

*{padding: 0;margin: 0;}
.container{
    padding: 0 220px; /* 步骤 5*/
}
.container > div {
    float: left; /* 步骤2*/
    height: 200px;
    position: relative; /* 步骤 6*/
}
.left{
    width: 200px;
    background: red;
    margin-left: -100%; /* 步骤 3*/
    left: -220px; /* 步骤 6*/
}
.right{
    width: 200px;
    background: blue;
    margin-left: -200px; /* 步骤 4*/
    right: -220px; /* 步骤 6*/
}
.main{
    width: 100%;
    background: green;
}

完整操作步骤总结

  • html 代码中，main 部分首先要放在 container 的最前部分，然后是left，right

  • 三列的左右两列分别定宽 200px 和 200px，中间部分 main 设置100%撑满

  • 将三者都设置为左浮动，现在 main 由于width是100%，所以占据了一整行。

  • 此时center占满了，所以要把left拉到最左边，使用margin-left:-100%

  • right元素设置margin-left: -200px;拉回行尾

  • 左右两边的元素覆盖了 main 元素的内容，我们可以给容器 container 加上两边padding

  • 在设置了padding 后，左右元素都被挤了进来，我们可以设置position:relative解决

  • 到这里大概就自适应好了，如果想container高度保持一致可以给left main right都加上min-height:200px

相信读者(我)看上面的实现过程，再看完整操作步骤总结，应该是对圣杯布局的实现有了更清晰的认识。

8. 剖析双飞翼布局的核心原理

基本的HTML布局：

 <div class="main">
     <div class="center">
         <div class="center-inner"></div>
     </div>
     <div class="left"></div>
     <div class="right"></div>
</div>

CSS 样式：

*{padding: 0; margin: 0;}
.main > div {float: left;}
.left{
    width: 200px;
    height: 200px;
    background: red;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 200px;
    background: blue;
    margin-left: -200px;
}
.center{
    width: 100%;
}
.center-inner{
    margin: 0 220px;
    height: 200px;
    background: grey;
}

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是 html 结构，双飞翼是在 center 元素内部又设置了一层 inner-center 的元素并设置它的左右 margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负 margin 的技巧，和元素浮动的相对定位技巧来实现。

9.深度掌握CSS底层规范-BFC

1. BFC是什么？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是指一个独立的块级渲染区域，只有块级参与，该区域拥有一套渲染规则来约束块级盒子的布局，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2. 触发条件

上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC；

  • 根元素或其它包含它的元素
  • float 属性不为 none
  • overflow 属性不为 visible
  • display 属性为 inline-block、table-cell、table-caption、flex、inline-flex
  • position 属性为 absolute 或 fixed

3. BFC 渲染规则

  • 内部的Box会在垂直方向，一个接一个地放置；
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关;
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float的元素区域重叠；
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
  • 计算BFC的高度时，浮动元素也参与计算；

4. BFC在布局中的应用

防止margin重叠（塌陷）

根据BFC的第二条规则：Box垂直方向的距离由margin决定，属于同一BFC的两个Box会发生margin重叠

实例: 两个相邻盒子垂直方向margin重叠 解决办法:可以在其中一个p上包裹容器，然后触发其BFC，这样两个p就不在同一个BFC，因此就不会发生重叠；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap{
      overflow: hidden; /* 新的 BFC */
    }
    p{
      background: #ccc;
      width: 200px;
      margin: 100px;
    }
  </style>
</head>
<body>
  <p>haha</p>
  <div class="wrap">
    <p>hehe</p>
  </div>
</body>
</html>
清除内部浮动

根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算

实例: 当子元素均浮动时，其无法撑开父元素 解决办法:让父元素生成BFC

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      border: 5px solid #ccc;
      width: 300px;
      overflow: hidden; /* 形成 BFC */
    }
    .child{
      background: red;
      width: 100px;
      height: 100px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>
</html>
阻止元素被浮动元素覆盖

根据BFC布局规则的第三条： 每个元素的margin box的左边，与包含块border box的左边相接触（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；

按照BFC布局的第四条规则： BFC的区域不会与float box重叠

实例: 自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .aside{
      width: 200px;
      height: 200px;
      background: #ccc;
      float: left;
    }
    .main{
      background: grey;
      height: 300px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>
</html>
总结

以上几个例子都体现了BFC的第五条规则： BFC就是页面上一个隔离的独立容器，容器内的子元素不会影响外部的元素，反之亦然；

因为BFC内部的元素不会影响外部的元素，因此当BFC外部有浮动元素时，BFC为了不影响内部Box的布局，BFC会通过变窄，避免与浮动元素重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度。避免margin重叠也是如此。

10.移动端响应式布局开发

  • media
  • rem
  • flex
  • vh / vw

详细资料可以参考：前端响应式布局原理与方案（详细版）

感慨

写博客是挺费精力的事，我开始享受写博客的过程，它可能给予我的是特别强的自我成就感，从0到1的过程，期待从一个小白到最后可以独当一面的这一刻的到来，同时分享也是一件很快乐的事情，希望能跟大家共同成长进步，成为更好的自己。 关于HTML&CSS经典面试题，先分享到这里，后续会根据实际情况不断地补充，希望对你有所启发。如果觉得本文还不错，记得点赞关注喔！

参考文章：

avatar
文章
阅读
粉丝