html和css

HTML

html标签

1. 如何理解 HTML 语义化？

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

2. mate标签的属性

3. script标签的defer和async的区别

1. 首先script标签本身的js脚本会同步下载并执行，会阻塞后续dom渲染
2. 设置了defer属性，js脚本异步加载，加载完成后，在触发domContentLoaded事件之后执行
3. 设置了async属性，js脚本异步加载，加载完成后，立即执行，并阻塞dom后续渲染，但不会影响domContentLoaded事件的触发

CSS

css盒模型

1. 标准盒子、ie盒子模型

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

• 标准盒模型：只包含 content 。
• IE盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

• box-sizing: content-box ：标准盒模型（默认值）。
• box-sizing: border-box ：IE（替代）盒模型。

选择器和优先级

1. 选择器

标签选择器、通配符选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器、 后代选择器、子代选择器、兄弟选择器、通用兄弟选择器

2. 优先级

常规优先级：!important 内联 > ID选择器 > 类选择器 > 标签选择器。

浏览器具体的优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

(1) 如果存在内联样式，那么 A = 1, 否则 A = 0; (2) B 的值等于ID选择器出现的次数; (3) C 的值等于类选择器和属性选择器和伪类出现的总次数; (4) D 的值等于标签选择器和伪元素出现的总次数 。

让块级元素垂直居中

1. 利用绝对定位和transform，不定宽高。

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

2. 利用绝对定位和margin: auto，必须定宽高。

.father {position: relative;}
.son {
  position: absolute;top: 0;left: 0;right: 0;bottom: 0;
  margin: auto;height: 100px;width: 100px;
}

3. 利用绝对定位和margin负值，必须定宽高。

.father {position: relative;}
.son {
    position: absolute;left: 50%;top: 50%;
    margin-left: -100px;margin-top: -100px;
    width: 200px;height: 200px;
}

4. 利用flex，补丁宽高的。

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

实现两栏布局（左侧固定 + 右侧自适应布局）

现在有以下 DOM 结构：

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

1. 利用浮动，左边固定宽度并向左浮动，右边margin-left 设为固定宽度。

.outer {height: 100px;}
.left {width: 200px;height: 100%;float: left;background: lightcoral;}
.right {margin-left: 200px;height: 100%;background: lightseagreen;}

2. 利用浮动，左边固定宽度并向左浮动，右侧设置 overflow: hidden来触发 BFC。

.outer {height: 100px;}
.left {float: left;width: 200px;height: 100%;background: lightcoral;}
.right {overflow: auto;height: 100%;background: lightseagreen;}

3. 利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1。

.outer {display: flex;height: 100px;}
.left {width: 200px;height: 100%;background: lightcoral;}
.right {flex: 1;height: 100%;background: lightseagreen;}

4. 利用绝对定位，父级元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。

.outer {position: relative;height: 100px;}
.left {position: absolute;width: 200px;height: 100%;background: lightcoral;}
.right {margin-left: 200px;height: 100%;background: lightseagreen;}

5. 利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute 定位， left 为宽度大小，其余方向定位为 0。

.outer {position: relative;height: 100px;}
.left {width: 200px;height: 100%;background: lightcoral;}
.right {position: absolute;left: 200px;top: 0;right: 0;bottom: 0;height: 100%;background: lightseagreen;}

实现圣杯布局和双飞翼布局（经典三分栏布局）

圣杯布局和双飞翼布局的目的：

• 三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
• 两侧内容固定，中间内容随着宽度自适应。
• 一般用于 PC 网页。

圣杯布局和双飞翼布局的技术总结：

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

圣杯布局：

HTML 结构：

<div id="container" class="clearfix">
  <p class="center">我是中间</p>
  <p class="left">我是左边</p>
  <p class="right">我是右边</p>
</div>

CSS 样式：

#container {padding-left: 200px;padding-right: 150px;overflow: auto;}
#container p {float: left;}
.center {width: 100%;background-color: lightcoral;}
.left {width: 200px;position: relative;left: -200px;margin-left: -100%;background-color: lightcyan;}
.right {width: 150px;margin-right: -150px;background-color: lightgreen;}
.clearfix:after {content: "";display: table;clear: both;}

双飞翼布局：

HTML 结构：

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

CSS 样式：

.float {float: left;}
#main {width: 100%;height: 200px;background-color: lightpink;}
#main-wrap {margin: 0 190px 0 190px;}
#left {width: 190px;height: 200px;background-color: lightsalmon;margin-left: -100%;}
#right {width: 190px;height: 200px;background-color: lightskyblue;margin-left: -190px;}

单位（px、pt、vm、vw、%、rem、em）

文字处理

1. 文字单行或多行溢出

2. 文字单行居中，多行靠左

div{display: flex;flex-direction: row;justify-content: center;}

css隐藏

1. 元素隐藏

div{display: none;}  /*元素隐藏，不占空间*/
div{visibility: hidden;}  /*元素隐藏，占据原有空间*/
div{opacity: 0;}   /*元素透明度为0，占据空间*/ 

BFC

BFC常规流与非常规（浮动）

常规流

在常规流中，都有以下特点： 内联盒子：水平排列，直到当行被沾满之后换行。只有水平外边距、边框、和内边距会被保留 块级盒子：沾满一行，下一个元素自动往下对齐 同级的盒子键的垂直距离会由margin属性决定，相邻两个块级盒子之间的垂直距离会遵循外边距折叠原则会被折叠 个盒子元素按照其在html中的先后顺序，从左到右从上到下布局

浮动

非常规流指的是浮动 当一个元素浮动之后，它会被溢出正常的文档流，然后向左或向右平移，直到父容器的边框亦或是另一个浮动元素 float属性指定一个元素沿其容器的左侧或右侧放置，允许文本和内联元素环绕它

BFC概述

• 在BFC，box会在垂直方向上一个挨着一个的排布
• 垂直方向的间距由margin属性决定
• 在同一个BFC中，相邻的两个box之间的margin会折叠（collapse）
• 在BCF中，每个元素的左边是紧挨着包含块的左边缘的

BFC布局规则

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

BFC的高度是auto的情况下，计算高度方法如下：

• 如果只有inline-level，是行高的顶部和底部的距离
• 如果由block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
• 如果有绝对定位元素，将被忽略
• 如果有浮动元素，那么会增加高度以包裹这些浮动元素的下边缘

BFC的作用

• 解决margin的折叠问题 => 在父元素设置 overflow: hidden;

• 解决因子元素浮动后引发父级盒子高度塌陷问题 => 在父元素设置 overflow: hidden;

• 阻止元素被浮动元素覆盖（实际开发中不能这么用，只是理论）=> 给被浮动元素覆盖的元素设置 overflow: hidden;

其中，ie低版本浏览器可设置zoom: 1，让盒子拥有layout

创建BFC的条件

BFC解决高度塌陷需要满足两个条件：浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Content）；同时浮动元素的父级元素的高度是auto的。

• float的值不为none（可实现，但不可随意给盒子设置浮动）
• position为absolute或fixed（可实现，但不靠谱）
• display为inline-block, flex, inline-flex等（可实现，但不可随意改变盒子为块级元素）
• overflow不为visible（可实现，比较好，但不能满足所有场景）

如何清除浮动

设置浮动一定要在一个独立的盒子容器中，否则就会对页面后续元素产生不必要的影响

• 方法一：让内部元素是浮动的盒子形成BFC，最好的方式 overflow: hidden;

• 方法二：给后面的父盒子设置属性 clear: both;

• 方法三：使用伪元素::after给盒子添加最后一个子元素，在::after设置 clear: both;