前端面试HTML和CSS总结，这一篇就够了！
一，面试基础 HTML和CSS
ps：这俩面试答不上来的，基本就可以回去了，以下是HTML题，一般来说这地方不会出太多题，面试官也不愿意花太多时间在这上面。
1，HTML语义化，如何理解语义化？
让人更容易懂（增加代码的可读性）
让搜索引擎更容易懂，有利于爬虫抓取
在没有css的情况下，页面也能更好的展现出其内容结构，代码·结构
2，script 标签中 defer 和 async 的区别？
script：会阻碍HTML解析，只有下载好并执行完脚本才会继续解析HTML
async：解析HTML的过程中会异步下载脚本，下载成功后立即执行，可能会阻断HTML的解析
defer：完全不会阻断HTML解析，解析完成之后在按顺序执行脚本
图解 script 标签中的 async 和 defer 属性
3，从浏览器地址栏输入 url 到请求返回发生了什么
3.1，输入url之后，会解析出主机，端口，路径，协议等信息，构造一个HTTP请求
3.2，DNS域名解析
3.3，TCP链接，http请求
3.4，服务器处理请求并返回HTTP报文
3.5，浏览器渲染（HTML解析，css解析，js解析，render树）
推文：从输入 URL 开始建立前端知识体系
推文：从 URL 输入到页面展现到底发生什么
推文：字节面试被虐后，是时候搞懂 DNS 了
从上到下依次阅读
4，HTTP和HTTPS的区别
http：
不安全
协议对客户端没有状态存储【没有状态】
每次请求需要TCP三次握手四次挥手，和服务器重新建立连接【没有连接】
基本的特性，由客户端发起请求，服务端响应
简单快速、灵活
使用明文、请求和响应不进行确认
https：
安全
HTTP安全版本，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
采用混合加密技术，传输过程无法直接查看明文内容【传输加密】
通过证书认证客户端访问的是自己的服务器【身份认证】
传输过程防止被篡改【数据完整】
ps：以下是css的面试题，打不出来的话可能会有非常不好的印象
5，css盒子模型的介绍
css3中盒子模型有两种，一种是W3C标准盒子模型，一种是IE盒子模型
两种盒子模型都是由content，margin，padding，border构成，其大小都是由content，padding，border决定的，但是盒子内容却有所不同：
标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。
可以通过 box-sizing 来改变元素的盒模型：
box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。
6，css选择器
选择器 权重 使用示例
!important 1111 * {color: '#00f' !important}
行内 1000 <span style={color:'#00f'} />
id 0100 #id{color:'#00f}
class 0010 .calssName{color:'#00f}
标签 0001 div{color:'#00f}
子选择 0001 div > span{color:'#00f}
伪类 0001 a:hover {color:'#00f}>
优先级的计算规则：
相信每位写过CSS的朋友都知道，CSS选择器的优先级关系是: 内联 > ID选择器 > 类选择器 > 标签选择器
但是，浏览器具体的优先级算法是怎样的？可能还有些人不知道 。《CSS REFACTORING》 中提到了算法的过程
A specificity is determined by plugging numbers into (a, b, c, d):
If the styles are applied via the style attribute, a=1; otherwise, a=0.
b is equal to the number of ID selectors present.
c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
d is equal to the number of type selectors and pseudoelements present.
简单来说就是通过，A,B,C,D四个值来确定，具体的规则如下：
如果存在内联样式，那么 A = 1，否则 A = 0 ；
B 的值等于 ID选择器（#id） 出现的次数；
C 的值等于 类选择器（.class） 和 属性选择器（a[href="https://example.org"]） 和 伪类（:first-child） 出现的总次数；
D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。
而比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
举个栗子：
<div class="nav-list" id="nav-list">
<div class="item">nav1</div>
<div class="item">nav2</div>
</div>
#nav-list .item {
color: #f00;
}
.nav-list .item {
color: #0f0;
}
上边代码，算出 #nav-list .item 的优先级是（0，1，1，0） 算出 .nav-list .item 的优先级是（0，0，2，0）
首先比较第一位都是0，相等，往右边找第二位，#nav-list .item的优先级第二位是1，.nav-list .item 优先级的第二位是0，所以#nav-list .item的优先级大于.nav-list .item
推荐：深入理解 CSS 选择器优先级
7，重排（reflow）和重绘（repaint）的区别
两种概念：
重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
重绘：：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
如何减少重排和重绘
最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中
使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显
开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘作者：vortesnail
浏览器渲染的过程
解析HTML生成DOM树，解析CSS生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树（Render Tree）
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上。
为了构建渲染树，浏览器主要完成了以下工作：
从DOM树的根部开始遍历出每个可见的节点 （不可见的节点有：script、meta、link等。还有一些通过css进行隐藏的节点。比如display:none）
对每个可见的节点，找到CSSOM树上对应的规则，并应用他们
根据每个可见节点以及其对应的样式，组合生成渲染树
注意：渲染树只包含可见的节点
注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上
从上边的例子我们可以看到span标签的样式有一个display:none，它最终并没有在渲染树上
回流（Layout）
我们通过构造渲染树，将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流
为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%
而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值
重绘（Painting）
最终，我们通过构造渲染树和回流阶段，知道了那些元素是可见的，以及可见节点的样式和具体的几何图像信息（也就是在页面上的位置，大小）那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点
何时会发生回流重绘？
既然前边我们都知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。举几个栗子：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
注意：回流一定会触发重绘，而重绘不一定会回流
根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点
推荐腾讯 IVWEB 团队的这篇文章：你真的了解回流和重绘吗
8，对BFC的理解
全程 block format contex 块级格式上下文，就是一块独立渲染区域，不影响文档流
创建 BFC 的方式：
绝对定位元素（position 为 absolute 或 fixed ）。
行内块元素，即 display 为 inline-block 。
overflow 的值不为 visible 。
推荐文章：可能是最好的 BFC 解析了...
9，实现两栏布局（左侧固定，右侧自适应）
DOM结构：
<div class="outer">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
方法一：
利用浮动，左边元素宽度固定，右边元素的margin-left固定，注意：右边元素的width是auto，跟随父级自动撑满
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
margin-left: 200px;
height: 100%;
background: lightseagreen;
}
方法二：
同样利用浮动，将左边元素宽度固定，然后給右边元素加上overflow：hidden，这样就触发了 BFC ，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
overflow: hidden;
height: 100%;
background: lightseagreen;
}
方法三：
利用 flex布局，左边元素固定宽度，右边的元素设置 flex: 1
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
flex: 1;
height: 100%;
background: lightseagreen;
}
方法四：
利用定位，給父级元素相对定位，給左边元素绝对定位，固定左边元素的宽度，右边元素margin-left 留出位置
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
margin-left: 200px;
height: 100%;
background: lightseagreen;
}
方法五：
也是定位，給右边元素绝对定位，給父级相对定位，然后固定左边元素的宽度，給右边元素设置 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; }
10，实现圣杯布局和双飞翼布局（经典的三栏布局）
询问圣杯布局和双飞翼布局的目的：
三栏布局，中间的内容一定要优先渲染（内容最重要）
两边固定，中间的随着页面自适应
用于pc端页面
技术总结：
使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin
圣杯布局：
<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;
}
双飞翼布局：
<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;
}
11，水平垂直居中
方法一：flex 布局
.box{
display: flex;
justify-content: center;
align-items: center;
}
方法二：利用绝对定位，left：50% top：50% 然后再通过 margin-left 和 margin-top 设置负值实现
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
方法三：和上边的方法差不多，但用了css3新增的属性 translate 来实现
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法四：利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，注意：该方法必须盒子有宽高
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
height: 100px;
width: 100px;
}
关于div居中的方法还有很多这里推荐一篇：面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）
12，flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局
推荐阅读：Flex 布局教程
13，line-height 如何继承？
父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值
父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例
父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值
-
目录导航
或点击复制连接
2022-11-07 09:16:48 1个人觉得很赞
公告
昵称：六扇有伊人
园龄：3年8天
注册时间：2021-11-16
当前在第：1页
总共：1条
搜索
精品文章 48小时阅读排行
优秀文章 7天获赞排行