【前端面试基础】（一）HTML/CSS

1. 说说对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的好处：

让人更容易读懂（增加代码可读性）。
让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构

常见的语义化标签：

css 复制代码

<h1>~<h6>标签：标题标签，h1等级最高，h6等级最低

<header></header>：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框

<nav></nav>：定义页面的导航链接部分区域

<main></main>：定义页面的主要内容，一个页面只能使用一次。

<article></article>：定义页面独立的内容，它可以有自己的header、footer、sections等

<section></section>：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分

<aside></aside>：一般用于侧边栏

<footer></footer>：文档的底部信息

<small></small>：呈现小号字体效果

<strong></strong>：用于强调文本

2、块状元素和内联元素

行内元素：

与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
块状（display: block/table） : div、h1-h6、p、ul、ol、li、table、header、footer、aside、section、form、table等
内联（display: inline/inline-block）: span、img、input、button、a、b、q、i、em、label等

3、盒模型宽度计算

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

xml 复制代码

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

offsetWidth=（内容宽度+内边距+边框），不包括外边距

因此，答案为：(100 + 2x10 + 2x1) px = 122px
那么如果想让 offsetWidth 等于100px，如何做呢？首先了解一下两种盒子模型

两种盒子模型

W3C盒子模型(content-box)： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。

IE的盒子模型(border-box)： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。

一般默认是使用w3c的盒子模型，我们可以通过在样式中添加：box-sizing: border-box切换为IE盒模型，此时就可以实现上面所说的让offsetWidth等于100px了。

4、margin纵向重叠的问题

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

xml 复制代码

<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 会发生重叠(取两者之间的大值)
空白内容的<p></p>也会发生重叠
答案：15px

5、margin负值的问题

margin-top和margin-left 设置负值，元素分别向上、向左移动
margin-right设置负值，右侧元素左移，自身元素不受影响
margin-bottom负值，下方元素会上移，自身元素不受影响

正常的： margin-bottom负值:

margin-right设置负值:

6、BFC理解和应用

什么是 BFC ? 如何应用？

Block format context，块级格式化上下文

一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

2、形成 BFC 的常见条件？

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block 等

3、BFC 的常见应用

清除浮动

非BFC模型

图片已经被挤出外面了

BFC模型

7、float布局的问题，以及clearfix

clearfix

css 复制代码

     /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
        .clearfix{
        *zoom:1;/* 兼容IE低版本*/
        }

圣杯布局和双飞翼布局

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

大致步骤：
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding一个用margin

xml 复制代码

<!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;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </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>

xml 复制代码

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

8、flex布局问题

1、常见容器属性

常见容器属性	属性功能
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	均匀分布

align-items 侧轴对齐方式(单行)

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	居中对齐(重要)
stretch	没设置高度时(沿侧轴拉伸至父盒子高)

align-content 设置侧轴上的子元素排列方式(多行)

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

属性值	说明
flex-start	在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴分布两头，再平分剩余空间
stretch	设置子项高度平分父元素高度

2、子项常见属性

flex属性

定义子项目分配剩余空间，用flex来表示占多少份数。

align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3、flex画色子

考察对flex的应用，上代码：

xml 复制代码

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

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

relative依据自身定位，相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置），并且不会影响其他外界元素（不脱离标准流，仍然占有原来的位置）。
absolute依据最近一层的定位元素(absolute relative fixed)定位，如果一直往上找都没有定位元素，则依据body元素定位。绝对定位不再占有原先的位置（脱离标准流）。

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

水平居中

inline元素：text-align: center
block元素：margin: auto
absolute元素：（left: 50%(往右移动一半) + marigin-left: 负值）向右移动父元素50%，再向左移动自身一半(比如自身宽度200px，就可以marigin-left: -100px，这里也可以用translateX(-50%))。
translateX：（marigin-left: 50%; transform: translateX(-50%)）
flex：（display: flex; justify-content: center）

垂直居中

inline元素：line-hight等于height值
absolute元素：（left:50%+top: 50% + marigin-top: 负值）-----必须知道子元素的宽和高才行
absolute元素：（left:50%+top:50%; transfom: translate(-50%, -50%)）
absolute元素：top,left,botton,right = 0 + marigin: auto
flex：（display: flex; align-items: center）

11、line-height如何继承的问题

下面的代码中，p标签的行高将会是多少？

xml 复制代码

<style>
    body {
        font-size: 20px;
        line-height: 200%;
    }
    p {
        font-size: 16px;
    }
</style> 
<body>
    <p>AAA</p>
</body>

这里答案为 40 px

如果父元素写具体数值，如30px，则子元素继承该值（比较好理解）
如果父元素写比例，如1.5 ，则继承该比例，假如body是1.5，那么p标签就是16x1.5=24px（比较好理解）
写百分比，如 200%，则继承父元素字号大小乘以百分比计算出来的值（考点，也是一个坑）20px*200%=40px

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

rem 是一个长度单位

px，绝对长度单位，最常用
em，相对长度单位，相对于父元素字体大小font-size，不常用
rem，相对长度单位，相对于根元素(html)的字体大小font-size（假设html的font-szie是100px，那么1 rem就是100px），常用于响应式布局

响应式布局常用方案

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

网页视口尺寸与 vw-vh

rem实现响应式存在一个小弊端：有阶梯性，不能对应每一个宽度的像素都实现响应式，只能设置某一段范围内，呈现阶梯型变化。

网页视口尺寸，以高度为例

window.screen.height 整个设备的屏幕高度
window.innerHeight 网页视口高度，可视区域高度
document.body.clientHeight body高度，随网页内容多少变化

vw 和 vh

vh 网页视口高度的 1/100
vw 网页视口宽度的 1/100
vmax为vw和vh的最大值，vmin为vw和vh的最小值

参考文章：响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh） - 掘金 (juejin.cn)

【前端面试基础】（一）HTML/CSS

1. 说说对HTML语义化的理解

2、块状元素和内联元素

3、 盒模型宽度计算

两种盒子模型

4、margin纵向重叠的问题

5、margin负值的问题

6、BFC理解和应用

什么是 BFC ? 如何应用？

2、形成 BFC 的常见条件？

3、BFC 的常见应用

7、float布局的问题，以及clearfix

clearfix

圣杯布局和双飞翼布局

8、flex布局问题

1、常见容器属性

flex-direction 设置主轴方向

flex-wrap 设置换行

justify-content 设置主轴对齐方式

align-items 侧轴对齐方式(单行)

align-content 设置侧轴上的子元素排列方式(多行)

2、子项常见属性

flex属性

align-self 控制子项自己在侧轴上的排列方式

3、flex画色子

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

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

水平居中

垂直居中

11、line-height如何继承的问题

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

rem 是一个长度单位

响应式布局常用方案

网页视口尺寸与 vw-vh

网页视口尺寸，以高度为例

vw 和 vh

3、盒模型宽度计算