前言
❝我是从5月中旬裸辞的，其实在裸辞时，我已经拿了3个 北京
❞offer,都是远程面试的，过程还算可以。
我是不太喜欢北京这个城市的，后来都放弃了。又踏上了面试求职之路，一边刷题一边面试，复盘。找工作运气真的很重要， 运气 + 技术能力，面试过程太难了，来回跑折腾。
如今，我现在已经入职新公司一个月了，公司还可以，955，办公环境和同事也都挺Nice。
接下来，我将把我之前遇到的高频面试题分享给读者，送给正在面试的你，由于篇幅 比较长，为了方便阅读
「本篇文章 分享高频HTML+CSS面试题」
发车了
HTML
1. DOCTYPE 的作用是什么 ？
❝
<!DOCTYPE>声明位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。解析模式 分为
❞标准模式和兼容模式.
2. 标准模式 与 兼容模式区别
❝「标准模式」的渲染方式和
JavaScript引擎的解析方式都是以浏览器支持的最高标准运行。「兼容模式」页面以宽松的向后兼容方式显示
❞
3. 行内元素 与 块级元素
❝在 HTML4 中，元素被分为两大类：
inline 行内元素和block 块级元素「行内元素」: 一个 行内元素只占据它自身的空间大小。
常见的行内元素有：
a b span img button input label select textarea
「块级元素：」 块级元素占据父容器的整个宽度。
常见的块级元素有：
❞
div ul ol li dl dt h1 h2 h3 h4 h5 h6 p
4. 行内元素 与 块级元素的 主要区别是
❝在 盒模型中，行内元素 设置
❞widthheight无效， 可以设置line-height
5. 空元素定义
❝标签内没有内容的
html标签称为 空元素。空元素是在开始标签中关闭的。常见的空标签有：
❞
br hr img input link meta
6. 页面导入样式时， link 和 @import 的 区别
❝目前主要使用的还是
link导入 样式， 因为@import兼容性不太好，它是 在 ` CSS2.1 才有的语法，只能在 IE5+ 中 可以识别。
使用
link不仅可以引入 样式文件，还可以引入网站图标等; 而@import只是引入样式作用。加载顺序不同:
❞使用 link 时， 它是和页面同时加载的, 而` @import 是 等待页面 加载完成，才会加载样式的。
7. 对浏览器内核的理解
❝主要分为两部分：
渲染引擎和JS引擎「渲染引擎：」 主要职责就是负责渲染所请求网站内容，默认支持显示
html, xml 图片. 它还可以借助第三方插件来渲染，例如 pdf。
「JS引擎：」 解析和执行
❞JavaScript来实现网页动态效果。
8. 常见浏览器内核
❝❞
IE 浏览器内核：IE内核。 Chrome 浏览器内核： Chrome 内核/Blink 内核FireFox 火狐浏览器内核： Gecko 内核/FireFox 内核Safari 浏览器内核： Webkit 内核Opera 浏览器内核： Blink 内核360浏览器 猎豹浏览器内核： IE + Chrome双内核百度浏览器内核： IE 内核
9. 浏览器渲染原理
❝❞
首先解析请求的网站资源文档，根据文档 构建一颗 DOM树，DOM树由DOM元素 和属性节点组成。然后解析 CSS， 生成 CSSOM规则树。根据 DOM 树和CSSOM 规则树构建生成渲染树,浏览器生成渲染树后，会很根据渲染树进行布局，确定 元素的大小 位置。 布局阶段结束后就是绘制内容显示在页面上。
10. 什么是回流 和 重绘
回流
❝1. 概念
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
2.什么时候会发生回流？
页面初始渲染，这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸，比如边距、填充、边框、宽度和高度等 改变元素内容，比如文字数量，图片大小等 改变元素字体大小 改变浏览器窗口尺寸，比如resize事件发生时 激活CSS伪类（例如： :hover）设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的currentStyle时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。❞
常见引起重排属性和方法 -- -- -- width height margin padding display border-width border position overflow font-size vertical-align min-height clientWidth clientHeight clientTop clientLeft offsetWudth offsetHeight offsetTop offsetLeft scrollWidth scrollHeight scrollTop scrollLeft scrollIntoView() scrollTo() getComputedStyle() getBoundingClientRect() scrollIntoViewIfNeeded()
重绘
❝**重绘：**当渲染树中的一些元素只需要更新属性的外观，而不影响布局操作就称之为 「重绘」， 例如：改变背景，字体颜色等。
常见的引起重绘的属性：
属性： -- -- -- color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size 怎样减少重绘
❞
「样式集中改变」 「分离读写操作」 .....
11. 对语义化的理解
❝❞
它使页面内容结构化，结构更清晰，便于浏览器，搜索引擎解析。 有利于网站的SEO 优化排名。
12. SEO 一些优化小技巧
❝❞
合理的
titledescription.keyword: 浏览器会对这三项权重排名❝
title: 强调网站主题内容，每个页面的title不一样，
description: 网站主要内容描述，提炼关键。❞
keywords: 列出关键词即可语义化
HTML代码， 便于浏览器解析。尽量减少使用
iframe， 搜索引擎不会抓取iframe中的内容图片加上
alt提高网站性能也是一方面。
13. 常见的浏览器存储技术有哪些
❝浏览器常见的存储技术包括：
cookie,localStronge和sessionStronge大规模数据存储：
❞indexDB
14. 对 cookie sessionStronge localStronge 理解
❝「cookie：」 它是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，携带
cookie,进行身份通信，cookie最多可以存储4 K 数据，它的时间由exoires属性指定，并且cookie只能被同源页面共享。
「sessionStrong:」 它是一次会话存储的数据，当页面关闭时，它的数据也会随之销毁掉，最大存储 5M
**localStronge: ** 它是浏览器本地永久存储的一种方法，它 与
❞sessionStronge的区别是不会随之浏览器关闭消失，除非主动删除，最大存储 5M
15. iframe 有哪些缺点
❝❞
iframe会 阻塞页面的onload事件，它会等待iframe加载执行完后，再执行onload事件。搜索引擎无法解析 iframe，不便于SEO优化浏览器后退功能失效
16. img 标签的 title 和 alt 有什么区别
❝
title: 当鼠标滑到元素上时显示❞
alt: 当图片无法加载时显示文字内容，提供图片的可访问性，
CSS
1. 对盒子模型的理解
❝它分为
IE 盒模型和W3C 标准盒模型.盒模型包括：
内容 content,填充 padding,边界 margin,边框 border
IE 盒模型和 W3C 标准盒模型的区别是：
W3C 标准 盒模型: 属性widthheight只包含内容content, 不包含border和padding
❞
IE 盒模型: 属性widthheight包含contentborderpadding
2. ::after 和 :hover 中 双冒号和单冒号的区别是？
❝
单冒号: 用于CSS3伪类选择器中
双冒号: 用于CSS3伪元素选择器中
伪类选择器是用来向元素添加特殊效果的，用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled。常用伪类选择器
关于
a标签的四种状态
选择器 示例 示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 关于
form表单的伪类选择器
选择器 示例 示例说明 :focus input:focus 选择元素输入后具有焦点 :enabled input:enabled 匹配每个已启用的元素 :disabled input:disabled 匹配每个被禁用的元素 :checked input:checked 匹配每个已被选中的 input 元素 :required input:required 选择有"required"属性指定的元素属性 :optional input:optional 选择没有"required"的元素属性 :read-only input:read-only 选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :valid input:valid 选择所有有效值的属性 :invalid input:invalid 在表单元素中的值是非法时设置指定样式 :in-range input:in-range 用于标签的值在指定区间值时显示的样式 :out-of-range input:out-of-range 选择指定范围以外的值的元素属性
伪元素:指它创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。伪元素只有以下几种
❞
选择器 示例 示例说明 ::first-letter p::first-letter 选择器的首字母 ::first-line p::first-line 选择器的首行 ::selection p::selection 被用户选取的部分 ::before p::before 在选择器前增加内容 ::after p::after 在选择器后增加内容
3. CSS 样式权重
❝css优先级规则：
css选择规则的权重值不同时，权重值高的优先；css选择规则的权重值相同时，后定义的规则优先；css属性后面加!importand时，无条件绝对优先；❞
内联选择器style>id 选择器>class / 伪类 / 属性 选择器>标签 / 伪元素
4. 实现水平居中
4.1 text-align: center
❝外层盒子 设置 对齐方式 为
居中内层盒子
❞display为inline-block,
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
<style>
.container {
text-align: center;
}
.box {
width: 300px;
height: 300px;
border-radius: 15px;
background: red;
display: inline-block;
}
</style>
4.2 margin: 0 atuo
div {
width: 500px;
margin: 0 auto;
}
5.水平垂直居中
5.1 绝对定位
.box{
width: 200px;
height: 200px;
background: deepskyblue;
position: absolute; //绝对定位
top: 50%;
left: 50%;
/* - 高的一半 - 宽的一半 */
margin: -100px -100px;
}
5.2 transform
.box{
width: 200px;
height: 200px;
background: deepskyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
❝
translate(-50%,-50%)在这个代码段的具体作用是什么？当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
❞
5.3 flex
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
<style>
.container{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 300px;
height: 300px;
background: orange;
}
</style>
总结
❝❞
利用绝对定位，将元素的左上角通过 top:50%和left: 50%定位到页面中心，然后使用margin来调整元素到页面中心，-width/2 -height/2利用绝对定位，将元素的左上角通过 top:50%和left: 50%定位到页面中心， 然后使用transform: translate(-50%, -50%)将元素调整到页面中心使用 flex，在父元素上，设置aligin-items 垂直居中和justify-content 水平居中
6. display 有哪些值，它们的作用是？
❝
block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。如果不指定宽度，默认为100% 宽none元素不显示，并从文档流中移除inline行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显inline-block默认宽度为内容宽度，可以设置宽高，同行显示list-item像块类型元素一样显示，并添加样式列表标记。table此元素会作为块级表格来显示。inherit规定应该从父元素继承display属性的值。❞
块级元素 blockdiv ul ol li dl dt h1 h2 h3 h4 h5 h6 p行内元素 inlinea b span img button input label select textarea
7. 利用 CSS实现 一个 📐 三角形
/* 采用的是相邻边框连接处的均分原理
将元素的宽高设置为0，border-width 来设置线条粗细
然后使用 transparent 隐藏掉任意3条边即可
*/
#box {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red transparent ;
cursor: pointer;
}
8. 你遇到过哪些浏览器兼容性有哪些？解决方法是?
❝❞
不同浏览器的默认的
margin和padding不同。❝解决方案:
可以使用
❞reset.css，重置浏览器的css默认属性
9. width：auto 和 width：100% 区别
❝
width : 100%: 它会的宽度等于父元素的宽度大小。❞
width : auto: 它会使元素撑满整个父元素，marginpaddingbordercontent会自动 分配空间。
10. 使用图片 base64 优点缺点
❝
base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。
优点:「1. 减少图片HTTP 请求」
缺点:「1.文件体积比源文件大1/3,影响浏览器加载，渲染时间加长」
「2.兼容性问题，
❞ie8以下的版本不支持」
11. 什么是BFC? 如何生成BFC？
❝定义
BFC是 块级可视化上下文，一个元素形成了BFC之后，它内部元素产生的布局不会影响到外部元素，外部元素布局也不会影响到BFC内部元素。一个
BFC像是一个隔离区域，和其它区域互不影响。如何生成
BFC？❞
根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-caption position的值为absolute或fixed
12. CSS 有哪些文档流，它们的作用分别是？
❝文档流分别是：
「定位流」 「浮动流」 「普通流」 普通流
在常规流中，盒一个接着一个排列; 在块级格式化上下文里面， 它们竖着排列； 在行内格式化上下文里面， 它们横着排列; 当position为static或relative，并且float为none时会触发常规流； 对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置； 对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。 浮动流
左浮动元素尽量靠左、靠上，右浮动同理 这导致常规流环绕在它的周边，除非设置 clear 属性 浮动元素不会影响块级元素的布局 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局 最高点不会超过当前行的最高点、它前面的浮动元素的最高点 不超过它的包含块，除非元素本身已经比包含块更宽 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的 定位流
❞
绝对定位方案，盒从常规流中被移除，不影响常规流的布局； 它的定位相对于它的包含块，相关 CSS属性：top、bottom、left、right；如果元素的属性position为absolute或fixed，它是绝对定位元素； 对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；
13. 说说 postion 有哪些属性? 它们的作用分别是？
❝
position❞
static默认定位❝按正常布局走，
❞top,right,bottom,left和z-index属性无效。
relative相对定位❝元素会放置在定位时的位置，不改变原有布局，通过改变
top,right,bottom,left来改变所在位置，但原所在位置会留下预留空间。小结：通过自身改变位置，但会预留空间。
❞
absolute绝对定位❝元素会「脱离文档流」，不会预留原有位置空间。
如果就近都没有指定
position, 那么它会 以全局 为定位来定位了。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
「最佳实践」 ：也是我常用的 技巧布局方式
❞子绝父相它基本可以满足你复杂的日常布局需求。
fixed固定定位❝元素会「脱离文档流」，不会预留原有位置空间。
元素的包含块为
viewport视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。元素的位置在屏幕滚动时不会改变。
❞
sticky粘性定位❝元素根据正常文档流进行定位，然后相对它的最近滚动祖先 和 最近块级祖先 。
包括table-related元素，基于
top,right,bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。「元素在跨越特定阈值前为相对定位，之后为固定定位。」
「应用：」 手机通讯录联系人
❞
14. 关于Flex 面试常考问题？
14.1 左右定宽，中间自适应
❝中间 flex = 1, 宽用百分比，左右固定宽，父元素 display:flex。
❞
14.2 等分布局
❝父元素 display:flex，子元素 flex:1
❞
15. px、em、rem、rpx 用法与区别
❝
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸.
. em的值并不是固定的； . em会继承父级元素的字体大小。
remrem是
CSS3新增的一个相对单位,使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。p {font-size:14px; font-size:.875rem;}「使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用
px,或者两者同时使用。」
手机端适配时可以采用 rem
rpx❞
rpx是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
加我微信：扫码下方二维码 , 备注 "技术交流"， 拉你进交流群。
群内学习氛围挺好，拒绝划水党和伸手党。
本文分享自微信公众号 - 前端自学社区（gh_ce69e7dba7b5）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
