30道HTML+CSS面试题(~持续更新中)

2,965 阅读12分钟

- 前置面试考点

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. 如何简单实现一个三角形

实现三角形思路:

  1. 首先我们需要把宽度为0
  2. 其次我们就可以设置边框
  3. 因为宽度为0,边框会往里面凹,且形成如图效果上下左右四块
  4. 最后只要将其三块设置为透明色就可以达到想要的效果(其中把下边框去了无非少了下部分)
<!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>

image-20210907092226433.png

代码实现:

<!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>

image-20210907091642115.png

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>

image-20210907092942887.png

<!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>

image-20210907094330740.png

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

image-20210907100522616.png

期间发现的问题有:

  • 相邻元素的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特点作用

  1. 开启BFC的元素不会被浮动元素覆盖
  2. 开启BFC的元素父子外边距不会合并(解决margin叠加问题)
  3. 开启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: 会对齐当前 gridflex 行中的元素
align-self: start;/*垂直居上*/

align-self: center;/*垂直居中*/

align-self: end;/*垂直居下*/

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

思路:

  1. 首先画出三个点和最大的盒子
  2. 使用flex布局,且用justify-content分配容器的空间,两端对齐space-between
  3. 那么在第二个设置垂直居中
  4. 第三个点设置垂直居下
<!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. 消除图片底部间隙的方法

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

image-20210909090611369.png

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

image-20210909090928001.png

  • 将父级元素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>

image-20210909091431776.png

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

  • 图片底线对齐: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;
  1. 结构上:元素在页面上将彻底消失,元素不占据空间且无法点击;

  2. 继承性:父元素设置了display:none子元素无论怎么设置都无法显示

  3. 性能:会引起浏览器重绘重排,性能消耗较大

  • opacity: 0;
  1. 结构上:元素在页面上消失,元素占据空间可以点击;

  2. 继承性:父元素设置了opacity:0子元素无论怎么设置都无法显示;

  3. 性能:重建图层,性能消耗小

  • visibility:hidden;
  1. 结构上:元素在页面消失,其占据的空间依旧会保留;无法点击

  2. 继承性:visibility: hidden会被子元素继承,但是子元素可以通过设置visibility: visible;来取消隐藏。

  3. 性能:只会导致浏览器重绘,性能消耗相对小

  • 设置height,width等盒模型属性为0
  1. 元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0

  2. 如果元素内有子元素或内容,还应该设置其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精灵图 把一堆小的图片整合到一张大的图片

优:

  1. 很好的减少网页的请求,大大提高页面的性能;

  2. 减少图片的字节;

  3. 解决了网页设计师在图片命名上的困扰;

  4. 更换风格方便,维护方便。

劣:

  1. 图片合并时需预留好足够空间,宽屏、高分辨率的屏幕下易出现背景断裂;

  2. 开发较麻烦,测量繁琐;(可使用样式生成器)

  3. 维护麻烦,背景少许改动有可能影响整张图片,使得字节增加还要改动css。

25. 什么叫CSS Hack?

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

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

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

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

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

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

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

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

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

30. 重绘和重排的区别

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

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

  • 引发重排操作
  1. 添加、删除可见的dom

  2. 元素的位置改变

  3. 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

  4. 页面渲染初始化

  5. 浏览器窗口尺寸改变

  6. 获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,它会导致队列刷新。所以,在多次使用这些值时应进行缓存。

  • 一些引发重排的属性
widthheightpaddingmargin
displayborder-widthbordertop
positionfont-sizefloattext-align
overflow-yfont-weightoverflowleft
font-familyline-heightvertical-alignright
clearwhite-spacebottommin-height
offsetTopoffsetLeftoffsetWidthoffsetHeight
scrollTopscrollLeftscrollWidthscrollHeight
clientTopclientLeftclientWidthclientHeight
getComputedStyle()(currentStyle in IE)
  • 引发重绘

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

colorborder-stylevisibilitybackground
text-decorationbackground-imagebackground-positionbackground-repeat
outline-coloroutlineoutline-styleborder-radius
outline-widthbox-shadowbackground-size

~持续更新中