【前端基础知识】（一）HTML/CSS-一一网

前言：大家好，我是忆白，本文根据慕课网双越老师《一天时间迅速准备前端面试快速构建初级前端知识体系》课程整理的面试常考题目以及相应知识扩展，持续更新。

如何理解 HTML 语义化

让人更容易读懂（增加代码可读性、可维护性）
让搜索引擎更容易读懂（SEO）
提升无障碍性(通过屏幕阅读器给盲人读页面内容)

块状元素和内联元素

块状（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等

盒模型宽度计算

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

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

首先了解一下offsetWidth的定义：offsetWidth = (内容宽度 + 内边距 + 边框)，不包含外边距

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

两种盒子模型

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

w3c标准盒子模型.jpeg

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

IE盒子模型.jpeg

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

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

margin负值问题

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

BFC的理解与应用

1、什么是 BFC ? 如何应用？

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

2、形成 BFC 的常见条件？

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

3、BFC 的常见应用

清除浮动

float布局问题、手写clearfix

圣杯布局和双飞翼布局

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

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

手写clearfix

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
复制代码

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画色子.png

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

<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>
复制代码

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

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

居中对齐的实现方式

水平居中

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元素：（top: 50% + marigin-top: 负值）
absolute元素：（top:50%; transfom: translate(-50%, -50%)）
absolute元素：top,left,botton,right = 0 + marigin: auto
flex：（display: flex; align-items: center）

line-height如何继承的问题

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

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