10-07 03:53 阅读 2189

30道HTML+CSS面试题（~持续更新中）

- 前置面试考点

HTML面试题

如何理解HTML语义化
默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

CSS考察知识点分析：

布局
响应式
定位
CSS3
图文样式
动画

CSS基本面试

盒子模型的宽度是如何计算？
margin纵向重叠问题
margin负值问题
BFC理解和应用
float布局的问题，以及clearfix
flex画色子
absolute和relative
居中对齐有哪些方式？
line-height的继承问题
rem是什么？
如何实现响应式?
关于css的动画

html和css在面试的时间不长45分钟时间占大概1/4的时间，下面开始进入正片~

1. 如果理解 HTML 语义化

增加代码可读性
让搜索引擎更容易读懂（SEO）

2. 块状元素&内联元素？

块级元素：display:block/table;有div h1 h2 table ulol p 等

内联元素：display:inline/inline-block;有span img input button 等

3. 盒模型宽度计算

offsetWidth = (内容宽度+内边距+边框)，无外边距

下面举例计算其offsetWidth ：

div{ with:100px; padding:10px border 1px solid #ccc; margin: 10px; } 复制代码

其offsetWidth 为122px

注意:如果让offsetWidth等于100px如何做

div{ with:100px; padding:10px border 1px solid #ccc; margin: 10px; box-sizing:border-box; } 复制代码

大家可以看box-sizing的具体用法

box-sizing - CSS（层叠样式表） | MDN (mozilla.org)

4. 如何简单实现一个三角形

实现三角形思路：

首先我们需要把宽度为0
其次我们就可以设置边框
因为宽度为0，边框会往里面凹，且形成如图效果上下左右四块
最后只要将其三块设置为透明色就可以达到想要的效果（其中把下边框去了无非少了下部分）

<!DOCTYPE html> <html lang="en"> <head>     <title>如何实现一个扇形</title>     <style>         #triangle{             width: 0;             border-top: 100px solid red;             border-bottom: 100px solid yellow;             border-left: 100px solid green;             border-right: 100px solid blue;         }     </style> </head> <body>     <div id="triangle"></div> </body> </html> 复制代码

代码实现：

<!DOCTYPE html> <html lang="en"> <head>     <title>如何实现一个扇形</title>     <style>         #triangle{             width: 0;             border-top: 100px solid #000;             border-left: 100px solid transparent;             border-right: 100px solid transparent;         }     </style> </head> <body>     <div id="triangle"></div> </body> </html> 复制代码

5. 如何实现一个扇形

实现扇形跟上个实现三角形是一样的，无非多加了边框圆角，其次把不需要的设置为透明色

<!DOCTYPE html> <html lang="en"> <head>     <title>如何实现一个扇形</title>     <style>         #triangle{             width: 0;             border-top: 100px solid red;             border-bottom: 100px solid yellow;             border-left: 100px solid green;             border-right: 100px solid blue;             border-radius: 100px;         }     </style> </head> <body>     <div id="triangle"></div> </body> </html> 复制代码

<!DOCTYPE html> <html lang="en"> <head>     <title>如何实现一个扇形</title>     <style>         #triangle{             width: 0;             border-top: 100px solid red;             border-bottom: 100px solid transparent;             border-left: 100px solid transparent;             border-right: 100px solid transparent;             border-radius: 100px;         }     </style> </head> <body>     <div id="triangle"></div> </body> </html> 复制代码

6. margin纵向重叠问题

下面以一段代码为例aaa 到 bbb之间的间距是多少呢？

<!DOCTYPE html> <html lang="en"> <head>     <title>margin纵向重叠问题</title>     <style>         p{             font-size: 16px;             line-height: 1;             margin-top: 10px;             margin-bottom: 15px;         }     </style> </head> <body>     <p>aaa</p>     <p></p>     <p></p>     <p></p>     <p>bbb</p> </body> </html> 复制代码

按道理来讲：aaa到bbb之间15px + (10px + 15px )*3+10px = 100px

但事实上aaa到bbb之间的距离为：15px

期间发现的问题有：

相邻元素的margin-top和margin-bottom发生重叠
空白内容的<p> </p>

7. 对margin的top left right bottom设置为负值，有何效果？

聊这这个问题我们需要知道：

margin-top left是平移元素自身
margin-right bottom 平移其他元素

效果:

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

8. 什么是BFC？如何应用？

块格式化上下文（block formatting context）
一块独立渲染区域，内部元素的渲染不会影响边界以为的元素。

那么形成BFC的常见条件：

float属性不为none
position为absolute或fixed
display为inline-block, table-cell,table-caption,flex,inline-flex
overflow不为visible

开启BFC特点作用

开启BFC的元素不会被浮动元素覆盖
开启BFC的元素父子外边距不会合并(解决margin叠加问题)
开启BFC的元素可以包含浮动的子元素（解决浮动高度塌陷）

9. 手写clearfix(清除浮动)

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

10. flex布局实现三个点的色子

聊这个问题有必要回顾一下常见语法

flex-direction 弹性布局的方向默认row水平方向，水平相对为row-reverse，纵向为column，纵向相反为column-reverse
flex-wrap 弹性项目转行，默认为“nowrap”，详见参考链接CSS flex-wrap 属性 (w3school.com.cn)
justify-content:如何分配弹性容器的元素之间及其周围的空间,记住以下7个即可：

justify-content: center;     /* 居中排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end;   /* 从行尾位置开始排列 */ justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around;  /* 均匀排列每个元素每个元素周围分配相同的空间 */ justify-content: space-evenly;  /* 均匀排列每个元素每个元素之间的间隔相等 */ justify-content: stretch;       /* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 */ 复制代码

align-self：会对齐当前 grid 或 flex 行中的元素

align-self: start;/*垂直居上*/ align-self: center;/*垂直居中*/ align-self: end;/*垂直居下*/ 复制代码

align-items：所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。也是start,center，end三个属性。详见参考链接：align-items - CSS（层叠样式表） | MDN (mozilla.org)

知道以上的属性我们很容易知道有怎么实现三个点的色子

思路：

首先画出三个点和最大的盒子
使用flex布局，且用justify-content分配容器的空间，两端对齐space-between
那么在第二个设置垂直居中
第三个点设置垂直居下

<!DOCTYPE html> <html lang="en"> <head>     <title>实现三个点的色子</title>     <style>         .box{             width: 200px;             height: 200px;             border: 2px solid #ccc;             border-radius: 10px;             padding: 20px;             display: flex;             justify-content: space-between;             /* flex-direction: row-reverse;  */         }         .item{             display: block;             width: 40px;             height: 40px;             border-radius: 50%;             background-color: #666;         }         .item:nth-child(2){             align-self: center;         }         .item:nth-child(3){             align-self: flex-end;         }     </style> </head> <body>     <div class="box">         <div class="item"></div>         <div class="item"></div>         <div class="item"></div>     </div> </body> </html> 复制代码

11.实现盒子边定宽，右盒子自适应

1.左边设置左浮动，右盒子width=calc(100vw - 100px) margin-left=左边盒子的宽度

<!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         .body{             margin:0;             padding:0;         }         .left{             width: 100px;             height: 100vh;             background-color: aqua;             float: left;         }         .right{             width: calc(100vh - 100px);             height: 100vh;             margin-left: 100px;             background-color: brown;         }     </style> </head> <body>     <div class="left"></div>     <div class="right"></div> </body> </html> 复制代码

2.左盒子左浮动，右盒子右浮动，设置width:calc(100%-左盒子宽度)

<!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         .left{             width: 100px;             height: 100vh;             background-color: aqua;             float: left;         }         .right{             float: right;             width: calc(100% - 100px);             height: 100vh;             background-color: brown;         }     </style> </head> <body>         <div class="left"></div>         <div class="right"></div> </body> </html> 复制代码

3.父容器为flex布局，左边的子容器固定宽，右边的子容器设置为flex:1

<!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         .body{             margin:0;             padding:0;         }         .father{             display: flex;         }         .left{             width: 100px;             height: 100vh;             background-color: aqua;         }         .right{             flex: 1;             height: 100vh;             background-color: brown;         }     </style> </head> <body>     <div class="father">         <div class="left"></div>         <div class="right"></div>     </div>      </body> </html> 复制代码

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

relative依据自身定位
absolute依据最近一层定位元素（有定位）定位
fixed:按照视口定位
sticky

13.居中对齐有哪些实现方式？

1. 水平居中

inline/inline-block 元素：text-align:center
block元素：margin：0，auto
absolute元素：left: 50% + margin-left负值一半元素宽度
absolute元素：left,right=0 + margin: 0 auto
absolut元素: left:50% + transform: translate(-50%,0)
absolute元素:默认父元素display:flex;justify-content:center;

2. 垂直居中

inline元素：line-height的值等于height值
absolute元素：top:50% + margin-top负值一半元素高度
absolute元素：top,bottom=0 + margin auto 0;
absolute元素:top,bottom=0 + margin:auto 0;
弹性flex: 默认父元素display:flex; align-items: center;
单元格table-cell元素：父元素display: table-cell; vertical-align:middle

14. line-height如何继承

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

.father{ font-size:20px; line-hight:200%; } .child{ /*问child的line-height多少?*/ } 复制代码

显然child根据父元素的值来计算的20px * 200% = 40px

15. 如何使用CSS实现单行多行文本溢出处理

1. 单行文本溢出

<!DOCTYPE html> <html lang="en"> <head>     <title>实现单行和多行文本溢出</title>     <style>         .box{             width: 100px;             white-space: nowrap;/*不转行*/             overflow: hidden;/*超出则隐藏*/             text-overflow: ellipsis;/*超出则打点*/         }     </style> </head> <body>     <div class="box">         ukdkasldaskajhas83182903812iewsa213sjansn     </div> </body> </html> 复制代码

2. 多行文本溢出

<!DOCTYPE html> <html lang="en"> <head>     <title>实现单行和多行文本溢出</title>     <style>         .box{             width: 100px;             display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示 */             -webkit-box-orient: vertical;/*转行方向排列*/              -webkit-line-clamp:3;/*转3行*/             overflow: hidden;/*超出则隐藏*/             word-break: break-all;/*强制转换*/         }     </style> </head> <body>     <div class="box">         ukdkasldaskajhas831829038238901237982199312iewsa213sjansn     </div> </body> </html> 复制代码

16. 消除图片底部间隙的方法

首先我们需要知道什么是图片间隙

把图片变成块级元素display:block

将父级元素font-size:0

<!DOCTYPE html> <html lang="en"> <head>     <title>消除图片底线之间的间隔</title>     <style>         .father{             font-size: 0;         }         img{             /* display: block; */         }     </style> </head> <body>     <div class="father">         <img src="./1579713706279534.jpg" alt="">         <img src="./1579713706279534.jpg" alt="">     </div> </body> </html> 复制代码

还有另外两种方式首先图片比较大的情况，一个在上面一个在下面,不一一实现

图片底线对齐：img{vertical-align:bottom;}
行高足够小-基线位置上移：.box{line-height: 0;}

17. 响应式设计是什么？原理？

是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

基本原理是通过媒体查询检测不同设备屏幕尺寸做处理。

页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 复制代码

18. rem是什么及 px，em，rem的区别？

px像素。绝对单位，像素px是相当于于显示器屏幕分辨率而言的
em,相对长度单位，相对于父元素，不常用

font-size是相当于父元素的字体大小， 而width和height是相对自身的字体大小 复制代码

rem,相对于根元素html的字体大小，常用于响应式布局

font-size、width和height始终相对于根字体大小 复制代码

19. 响应式布局常见的方案？

media-query,根据不同的屏幕设置根元素font-size
rem，基于根元素的相对单位

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         @media only screen and(min-width:375px)and(max-width:413px){             /* iPhone 6/7/8和iPhone x */             html{                 font-size: 100px;             }         }         @media only screen and(min-width:414px){             /* iPhone 6或者更大的尺寸*/             html{                 font-size: 110px;             }         }         body{             font-size: 0.16rem;         }         #div1{             width: 1rem;             height: 1rem;             background: rgb(211, 211, 211);         }     </style> </head> <body>     <div id="div1">         this is div     </div> </body> </html> 复制代码

20. transition和animation有何区别？

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

21. will-change属性（CSS3新特性）

提高页面滚动、动画等渲染性能will-change

scroll-position;

opacity;

transfrom

left,top;

22. 使用一个元素显示以及隐藏的方式？

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来隐藏其子元素

23. 选择器优先级

! important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法:(0,0,0,0)—―>

第一个0对应的是important的个数，

第二个0对应的是id选择器的个数，

第三个0对应的类选择器的个数，

第四个0对应的是标签选择器的个数，

合起来就是当前选择器的权重。

比较:先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

'nth-child"选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果

其一是子元素，其二是子元素刚好处在那个位置

"nth-of-type"选择的是某父元素的子元素，而且这个子元素是指定类型。

<style> ul>li:nth-of-type(1){  color:red } </style> <body> <ul> <p>p</p> <li>1</li>//此处为红色 <li>2</li> </ul> <body> 复制代码

24. CSS Sprites是什么？它的优势和劣势？

CSS Sprite精灵图把一堆小的图片整合到一张大的图片

优：

很好的减少网页的请求，大大提高页面的性能;
减少图片的字节;
解决了网页设计师在图片命名上的困扰;
更换风格方便，维护方便。

劣：

图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂;
开发较麻烦，测量繁琐;（可使用样式生成器)
维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

25. 什么叫CSS Hack？

解决各浏览器对css解释不同所采取的，区别不同浏览器制作不同CSS样式的设置就叫作CSs Hack。

26. 介绍对浏览器内核的理解

浏览器内核分或两部分:渲染引擎和JS引擎。

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

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

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

29. 描述下渐进增强和优雅降级设计思想

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

优雅降级（从下往上）:一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

30. 重绘和重排的区别

重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。简而言之，发生几何信息变化导致页面布局的改变.

重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。也就是发生非几何信息的变化导致页面布局改变，比如改变某个元素的背景色、文字颜色、边框颜色等等

引发重排操作

添加、删除可见的dom
元素的位置改变
元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
页面渲染初始化
浏览器窗口尺寸改变
获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会导致队列刷新。所以，在多次使用这些值时应进行缓存。

一些引发重排的属性

width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height
`offsetTop`	`offsetLeft`	`offsetWidth`	`offsetHeight`
`scrollTop`	`scrollLeft`	`scrollWidth`	`scrollHeight`
`clientTop`	`clientLeft`	`clientWidth`	`clientHeight`
`getComputedStyle()`	`(currentStyle in IE)`

引发重绘

下面这些样式都会引起重绘

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

~持续更新中

作者：kang
链接：https://juejin.cn/post/7005766163409928200