【2021.07】html+css面试题

提示：如有不对，请大家多多指点

---

背景

前段时间找工作，所以在csdn看了一些大佬博客和在B站看了一些面试视频，总结了一些关于html、css部分的面试题，方面自己查漏补缺，和大家分享分享。

---

HTML、CSS

1、HTML语义化的理解

利用合适的标签做合适的事
有利于开发者后续维护和理解代码
有利于不同设备的解析
有利于架构良好的html结构，有利于搜索引擎建立索引，抓取，有利于seo

2、行内元素和块级元素，非替换元素和替换元素

行内元素：不会独占一行 display:block
Eg：a span i img input select b
块级元素：独占一行，不管内容长度 display:inline/inline-block
Eg：div p ul ol li h1-h6 table form
空元素：br hr link

3、Img标签的title和alt属性(title是全局属性)

相同点：
他们都会飘出一个小浮层，显示文本内容。
不同点：
1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:。
2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。

4、meta标签

元数据（Metadata）是数据的数据信息。

标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

5、DOCTYPE标签（标准模式和兼容模式）

告诉浏览器该文件的类型。让其知道用哪一种规范解析文档。

6、script标签的defer和async

Defer:
设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。
Async：
async的设置，会使得script脚本异步的加载并在允许的情况下执行async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

7、W3C盒模型和怪异模型（box-sizing）

盒子模型由content、padding、border、margin组成
W3C盒模型的width = content
怪异模型的width = content+padding+border, padding+border发生改变, content会自适应
offsetWidth=(内容宽度+内边距+边框) （各大ui组件库底层使用的怪异模型）
box-sizing：指定width代表那种模型，三个属性如下
Content-box：content （默认值）
Border-box：content+padding+border width 固定, content会自适
Inherit：从父元素继承

8、水平垂直居中的四种方法

定位的方式：

.father{
position:relative;
}
.box{
position:absolute;
top:0;left:0;
bottom:0;right:0;
margin:auto
}

Css3属性：

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

Flex布局：

在弹性盒对象的 <div> 元素中,位于容器的中心
.father{
display:flex;
justify-content:center;
align-item:center
}
.box{
width:300px
}

有趣的方法：

.father{
height:500px;
width:500px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.box{
display:inline-block
}

9、BFC是什么，触发条件是什么，特性及作用

BFC是：
块格式化上下文（block formatting context），一块独立渲染区域，只有Block-level参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关，内部元素的渲染不会影响边界以外的元素。
现象：
一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，那么这个盒子则没有形成bfc
触发条件：
◆float 属性不为 none
◆position 为 absolute 或 fixed
◆display 为 inline-block， table-cell， table-caption， flex，inline-flex
◆overflow：hidden(最优)
特性：
1.开启BFC的元素不会被浮动元素覆盖
父元素设置overflow：hidden
2.开启BFC的元素父子外边距不会合并
3.开启BFC的元素可以包含浮动的子元素(解决浮动高度塌陷)
父元素设置overflow：hidden

10、清除浮动的方法

浮动问题：
子元素设置了float后，脱离父元素，导致父元素无法撑开（也就是子元素的高度没有过渡到父元素）

解决原理：
清除浮动的核心理念就是想办法让浮动元素的父元素有高度, 事情就解决了.
1）父级定义height：
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
简单、 代码少、容易掌握 ，但只适合高度固定的布局.

2）结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，
让父级div自动获取高度。
如果页面浮动布局多，就要增加很多空 div，添加无意义标签，语义化差。

3）父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用.

4）父级 div 定义 overflow：auto；
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5）父级 div 定义 伪类：after 和 zoom（推荐）
//清除浮动代码
.clearfix : after {
content: “ “;
display: block;
clear : both;
visiblity:hidden;
height :0;
line-height :0;
}
.clearfix {zoom: 1}
原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 专有属性)
可解决 ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。

6. 双伪元素法：（推荐）
   .clearfix:before ,
   .clearfix : after {
   content : “ “;
   display: block;
   clear : both;
   }
   .clearfix {
   zoom :1;
   }

11、Position属性

Static（默认值）：没有定位，元素出现在正常的文档流中
Relative（相对定位）：相对于其原先本身位置（出生位置）进行定位
Absolute（绝对定位）：相对于static定位以外的第一个父元素进行定位
Fixed（固定定位）：相对于浏览器窗口进行定位

12、css隐藏元素的方式（他们的区别）

display:none
◆ 结构上:元素在页面上将彻底消失，元素不占据空间且无法点击；
◆ 继承性:父元素设置了 display:none 子元素无论怎么设置都无法显示；
◆ 性能:会引起浏览器重绘重排，性能消耗较大
opacity:0
◆ 结构上:元素在页面上消失，元素占据空间可以点击；
◆ 继承性:父元素设置了opacity:0 子元素无论怎么设置都无法显示；
◆ 性能:重建图层，性能消耗小
visibility:hidden
◆ 结构上:元素在页面消失，其占据的空间依旧会保留;无法点击
◆ 继承性:visibility: hidden 会被子元素继承，但是子元素可以通过设置
visibility: visible; 来取消隐藏。
◆ 性能:只会导致浏览器重绘,性能消耗相对小
设置height，width等盒模型属性为0
◆ 元素的margin，border，padding，height和width等影响元素盒模型的属性设 置成0
◆ 如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素
其他脑洞方法
◆设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
◆设置元素的position与z-index，将z-index设置成尽量小的负数

13、felx布局（内容宽度等分）

flex-内容宽度等分
//css
       .box {
            display: flex;
        }
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

14、双栏布局，左边固定，右边自适应

(1)、float使左边的元素脱离文档流，右边的元素可以和左边的元素显示在同一行，设置margin-left让右边的元素不覆盖掉左边的元素
.left:{width:200px;float: left;} .right:{ margin-left: 200px;}

(2)、左边绝对定位，右边设置margin-left
.left:{ width:200px;position: absolute;} .right:{ margin-left: 200px;}

(3)、flex布局可以使两个子元素显示在同一行，只要左边的宽度固定
父级：display: flex;
左侧固定：width:200px；float:left;
右侧自适应:flex:1

15、三栏布局，左右固定，中间自适应

.main{
     display: flex;
 }
 .left{
     flex: 0 0 200px;
     background-color:rebeccapurple;
 }
 
 .right{
     flex: 0 0 200px;
     background-color:green;
 }
 .center{
     flex: 1;
     background-color:pink;
 }

16、重排（回流）和重绘

回流：
构造渲染树和DOM节点以及它对应的样式结合起来，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
重绘：
通过构造渲染树和回流阶段后节点可见，以及可见节点的样式和具体的几何信息(位置、大小)，再将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。
当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：
1、添加或删除可见的DOM元素
2、元素的位置发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
3、内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
4、浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

注意：
回流一定会触发重绘，而重绘不一定会回流，回流比重绘做的事情要多，带来的开销也大，在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。
如何最小化重绘和重排：
1、用 translate 替代 top
2、用 opacity 替代 visibility
3、不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
4、把 DOM 离线后修改，比如：先把 DOM 给 display: none（有一次 reflow），然后修改100次，然后再显示出来
5、不要把 DOM 节点的属性值放在一个循环里当成循环里的变量
6、不要使用 table 布局，可能很小的一个改动就会造成整个 table 的重新布局动画实现的速度的选择
7、对于动画新建图层
8、启用 GPU 硬件加速

17、css选择器，优先级

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
权重算法：(0,0,0,0) ——> 第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，合起来就是当前选择器的权重。

18、css动画，animation属性和tranition属性

◆ transition：用于做过渡效果，没有帧概念，只有开始和结束状态，性能开销较小,被动触发
◆ animate：用于做动画，有帧的概念，可以重复触发且有中间状态，性能开销较大,主动触发

19、css Spries：精灵图 把一堆小的图片整合到一张大的图片上。

优势：
1.很好的减少网页的请求，大大提高页面的性能；
​ 2.减少图片的字节；
​ 3.解决了网页设计师在图片命名上的困扰；
​ 4.更换风格方便。
劣势：
1.图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；
2.开发较麻烦，测量繁琐；（可使用样式生成器）
3.维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

20、px rem em

Px：像素，绝对单位。相对于显示器屏幕分辨率而言
Em：值不固定，相对长度单位。会继承父元素的字体大小。
Rem：值不固定，相对长度单位。始终是基于根元素（html）的字体大小，用于响应式布局

21、Css中的link和@import的区别

区别：css加载的顺序不同
Link：属于xhtml标签。页面加载的同时，link引用的css也会被加载
@import：完全是css提供的一种方式。等页面全部加载完后，import的css样式才会被加载

22、伪类(:after)，伪元素 (::before)

伪类：单冒号和伪类名称组成
伪元素：双冒号和伪元素名称组成

23、Css优化、提高性能的方法

移除空的css规则
正确使用display的属性
不滥用浮动和web字体
不声明过多的font-size
不在选择器中使用id标识符
遵守盒模型
尽量减少页面重绘、重排
抽取公共样式、减少代码量

24、什么是响应式布局，原理是什么？

响应式布局是网站能够兼容多个终端，而不是为每一个终端做一个版本
基本原理是利用媒体查询检测屏幕尺寸做处理

25、margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的

也会重叠

26、margin负值问题

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

27、line-height如何继承

◆写具体数值,如30px,则继承该值(比较好理解)
◆写比例,如2/ 1.5 ,则继承该比例(比较好理解)
◆写百分比,如200% ,则继承计算出来的值(考点)

28、设计思路

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。

• 优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

29、浏览器内核

主要分成两部分：渲染引擎和JS引擎。

渲染引擎：将代码转换成页面输出到浏览器界面。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

30、document.ready和onload的区别

document.ready和onload的区别为：加载程度不同、执行次数不同、执行速度不同。

（1）、加载程度不同

1.document.ready：在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2.onload：在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

（2）、执行次数不同

1.document.ready：document.ready可以写多个.ready，可以执行多次，第N次都不会被上一次覆盖。
2.onload：onload只能执行一次，如果有多个，那么第一次的执行会被覆盖。

（3）、执行速度不同

1.document.ready：onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。

2.onload：document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

---

总结

一直觉得笨一点没关系，只要我保持学习，总有一天会飞起来。