初级、中级前端面试题整理（一）HTML与CSSHTML 如何理解HTML语义化？团队成员之间能更容易读懂彼此的代码，通

HTML

如何理解HTML语义化？

团队成员之间能更容易读懂彼此的代码，通过代码能快速了解页面结构。
对SEO也就是搜索引擎友好。

常用的语义化标签有

元素名称	元素介绍
header 元素	表示页面中一个内容区块或整个页面标题
main 元素	表示网页中的主要内容。主内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。
footer 元素	表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。
nav 元素	表示页面中导航链接的部分
aside 元素	表示article元素的内容之外的、与article元素的内容相关的辅助信息。

什么是块状元素？什么是内联元素？

块状元素：

独占一行，不与其他元素并列
可以设置width和height。width默认值为100%

内联元素：

与其他内联元素并列
width和height不生效。宽度为元素内容宽度

常见的块状元素与内联元素

/// 块状元素（display：block/table）
div、h1-h6、p、table、header、footer、ul、ol、li等
/// 内联元素（display：inline/inlink-block）
span、img、input、button、a等

CSS

盒模型宽度计算

如下代码：计算 div1 的 offsetWidth 是多少？

<style>
#div1 {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
}
</style>
<div id="div1"></div>

offset = 内容宽度 + 内边距 + 边框宽度，不包括外边距

根据公式计算，offset = 100 + 10 * 2 + 1 * 2 = 122

那么在不改动数值的情况下，如何让offset等于100呢？

我们可以将 box-sizing 设置为 border-box。

box-sizing有两个值，一个是border-box，指width的值为content+padding+border-left+border-right，也就是width=offset；另一个是默认值content-box，指width的值为content。

margin 纵向重叠问题

下面 AAA 和 BBB 之间的距离是多少？

<style>
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

相邻元素的margin-top和margin-bottom会发生重叠，大值将覆盖小值，空白内容的

直接忽略。

答案：15px

margin各方向设置成负值会有什么结果？

margin-top和margin-left设置为负值：当前元素向上或向左移动对应数值。
margin-right和margin-bottom设置为负值：右边元素或者底部元素向本元素靠拢对应数值。
相邻元素的margin都是负值，绝对值的大值将覆盖小值。

什么是BFC，如何应用？

Block format content，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

使用float属性且属性值不为none
使用position属性且属性值是absolute或fixed
使用oveflow属性且属性值不是visible
使用display属性且属性值是flex或inline-block等

BFC的常见应用：

清除浮动

如何实现圣杯布局和双飞翼布局

布局特点：

三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

技术特点：

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，圣杯两侧用padding、双飞翼两侧用margin

圣杯布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

flex布局问题

常见容器属性

常见容器属性	属性功能
flex-direction	设置主轴方向
justify-content	设置主轴子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式(多行)
align-items	设置侧轴上子元素的排列方式(单行)
flex-flow	复合属性，相当于设置了 flexdirection和 flex-wrap

flex-direction 设置主轴方向

属性值	说明
row(默认值)	主轴为水平方向【从左到右】
row-reverse	主轴为水平方向【从右到左】
column	主轴为垂直方向【从上到下】
column-reverse	主轴为垂直方向【从下到上】

flex-wrap 设置换行

flex布局中默认子元素不换行，如果不设置换行，增加元素装不开时，会缩小子项的宽度，以强行放入父盒子一行展示

属性	说明
nowrap(默认)	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

justify-content 设置主轴对齐方式

属性值	对齐方式(以默认主轴为例)
flex-start(默认值)	左对齐
flex-end	右对齐
center	居中对齐
space-between	两边贴边，平分剩余空间
space-around	平分剩余空间给每个子项，两侧不贴边
space-evenly	均匀分布

实现一个三个点的骰子

<head>
    <style>
        .box {
            display: flex;
            /* 设置主轴(x轴)两端对齐*/
            justify-content: space-between;

            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            padding: 20px;
        }
        .item {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #666;
        }

        /* 第二个圈沿侧轴(y轴)居中对齐 */
        .item:nth-child(2) {
          align-self: center;
        }
        /* 第三个圈沿侧轴(y轴)底部对齐 */
        .item:nth-child(3) {
          align-self: end;
        }

      </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

实现一个四点的骰子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        display: flex;
        /* 修改为两端对齐 */
        justify-content: space-between;
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        padding: 20px;
        /* 允许项目换行 */
        flex-wrap: wrap;
        /* 垂直方向也设置两端对齐 */
        align-content: space-around;
      }
      .item {
        margin: 0 30px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </body>
</html>

实现一个五点的骰子

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        display: flex;
        /* 修改为两端对齐 */
        justify-content: space-between;
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        padding: 20px;
        /* 允许项目换行 */
        flex-wrap: wrap;
        /* 垂直方向也设置两端对齐 */
        align-content: space-around;
      }
      .item {
        margin: 0 30px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
      }
      .item:nth-child(3) {
        margin: 0 40%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </body>
</html>

absolute和relative分别依据什么定位？

relative 依据自身定位，相对于自己原来的位置移动，并且不会影响其他外界元素（不脱离标准流，仍然占有原来的位置）。
absolute依据最近一层的父级定位元素（absolute、relative、fixed）定位，或者body元素定位，绝对元素不再占有原先的位置（脱离标准流）。

居中对齐有哪些实现方式？

水平居中
- flex布局：justify-content:center
- inline元素：text-align:center
- block元素：margin:0 auto
- absolute元素：left:50%、margin-left: - width / 2
- translateX：margin-left:50%、transform:translateX(-50%)
垂直居中
- flex布局：align-items:center
- inline元素：line-height等于height值
- absolute元素：top:50%、margin-top: -height/2
- absolute元素：top:50%、transform:translateY(-50%)
- absolute元素：top:0、bottom:0、margin:auto 0;

line-height的继承问题

如果父元素的line-height为带单位的数值，那么直接继承带单位的数值。例如：父元素的line-height:20px;子元素的line-height=20px
如果父元素的line-height为纯数值，那么继承数值*父元素的font-size。例如父元素的样式为font-size:12px;line-height:2;那么子元素的line-height为24px;
如果父元素的line-height为百分比，那么继承该百分比，但是font-size使用本身的值。例如父元素的样式为font-size:12px;line-height:200%;，子元素的样式为font-size:14px;那么子元素的line-height为28px而不是24px

rem是什么？响应式的常用方案有哪些？

rem是一个相对长度单位，相对于根元素（html）的字体大小font-size的值进行乘积计算，常用于响应式布局。

响应式布局常用方案为：

通过媒体查询media-query、根据不同屏幕宽度设置根元素字体大小font-size，再通过rem实现响应式
flex布局
百分比数值布局
vw和vh

vw、vh和rem方案对比

什么是vh与vw？它们与视口高度的关系是什么？

vh是网页视口高度的1/100
vw是网页视口宽度的1/100
网页视口高度就是window.innerHeight，是可视区域高度，不包含浏览器的导航栏、并且随着网页窗口的调整而改变。与以下两个值做对比：
- window.screen.height 整个设备的屏幕高度
- document.body.clientHeight body高度，随网页内容而改变