HTML+CSS 前端面试题目(持续更新···)

搞学习等不了的
899 阅读14分钟

此面试题都是我从各路大神整理的面试题中摘录的 , 仅供我个人学习参考

题目中如果存在错误或漏洞 , 麻烦大家在评论区指出 , 我加以改正

html5有哪些新特性

  • Canvas绘图
  • SVG绘图
  • 地理定位
  • 本地存储

如何理解 HTML 语义化

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

块状元素&内联元素

常用的块状元素有：

<div>、<p>、<h1>...<h6>、
<ol>、<ul>、<dl>、<table>、
<address>、<blockquote> 、<form>

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素

常用的内联块状元素有：

<img>、<input>、<td>

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

盒模型宽度计算

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

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
}
/*
	offsetWidth值为100+20+2=122px
*/

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

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
    /*告诉浏览器你想要设置的边框和内边距的值是包含在width内的,自动计算width*/
	box-sizing:border-box;
}

如何简单实现一个三角形

  1. 首先我们需要把宽度为0
  2. 其次我们就可以设置边框
  3. 因为宽度为0，边框会往里面凹，且形成如图效果上下左右四块
  4. 最后只要将其三块设置为透明色就可以达到想要的效果（其中把下边框去了无非少了下部分）
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		.box{
			width: 0;
			border-top: 100px solid transparent;
			border-left:100px solid transparent ;
			border-right:100px solid transparent ;
			border-bottom: 100px solid #999;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="box"></div>
</body>
</html>

如何画一个扇形

和三角形的实现是一样的 , 只是加入了圆角边框

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		.box{
			width: 0;
			border-top: 100px solid transparent;
			border-left:100px solid transparent ;
			border-right:100px solid transparent ;
			border-bottom: 100px solid #999;
			border-radius: 100px;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="box"></div>
</body>
</html>

margin纵向重叠问题

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

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

margin-top left是平移元素自身

margin-right bottom 平移其他元素

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

什么是BFC?

什么是BFC ?

BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

全称Block Formatting Context，简称BFC

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局

不同的BFC区域，它们进行渲染时互不干扰

创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

  • 创建BFC的元素，它的高度会计算浮动元素的高度
  • 创建BFC的元素，它的边框盒不会与浮动元素重叠
  • 创建BFC的元素，不会和它的子元素进行外边距合并

如何触发BCF ?

image.png 常见的触发方法 :

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

BFC的使用 ?

解决高度坍塌

使用场景 : 解决高度坍塌

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			border: 1px solid red;
			/*父级盒子触发BFC , 自动计算高度时会计算浮动元素高度*/
			overflow: hidden;
		}
		.temp{
			float: left;;
			width: 100px;
			height: 100px;
			background-color: #008c8c;

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="temp"></div>
	</div>
</body>
</html>

Margin 边距重叠

使用场景 : 解决外边距重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.con{
            /*父级盒子触发BFC ,若无触发BFC, 外边距会合并*/
			overflow: hidden;
		}
		.box{
			width: 100px;
			height: 100px;
			margin: 50px;
			background-color: #008c8c;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box"></div>
	</div>
	<div class="con">
		<div class="box"></div>
	</div>
</body>
</html>

保护元素不被浮动元素覆盖

使用场景 : 保护元素不被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.con{
			width: 200px;
			height: 200px;
			background-color: red;
			/*触发BFC , 它的边框盒不会与浮动元素重叠*/
			overflow: hidden;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: #008c8c;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="con"></div>
</body>
</html>

手写clearfix(清除浮动)

		xxx::after{
			content: '';
			display: block;
			clear: both;
		}

了解过position属性吗，都有啥特点？

  • static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

  • relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

  • absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过zindex属性定义。

  • fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

  • sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。

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

水平居中

inline/inline-block 元素：

text-align:center;

block元素：

margin:0 auto;

absolute元素：

left:50%;
margin-left:一半元素宽度(负数);

left:0;
right:0;
margin:0 auto

left:50%;
transform:translate(-50%,0)

display:flex;
justify-content:center

垂直居中

inline元素：

line-height:等同于height的值

absolute元素：

top:50%;
margin-top:一半元素高度(负数);

top:0;
bottom:0;
margin:auto 0;

弹性flex:

display:flex;
align-items:center

水平垂直居中

left和right的值不能超过其相对元素width减去它自身width的一半,

否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。

position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;

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

单行文本溢出

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

多行文本溢出

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

rem是什么及 px，em，rem,vw/vh的区别？

rem

rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem , 常用于响应式布局

em

元素用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，

处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

一般电脑的分辨率有{1920 * 1024}等不同的分辨率

1920 * 1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

transition和animation有何区别？

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

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

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

什么是SPA？

单页面Web应用（single page web application,SPA）：SPA是一种特殊的web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面。

它将所有活动局限于一个web页面中，仅在该web页面初始化时加载相应的HTML、JavaScript、css。

一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

在SPA应用中，应用加载之后就不会再有整页刷新。

相反，展示逻辑预先加载，并有赖于内容Region(区域)中的视图切换来展示内容。

**优点：**用户体验好 、良好的前后端分离。

缺点：

  • 1.不利于SEO。
  • 2.初次加载耗时相对增多。
  • 3.导航不可用，如果一定要导航需要自行实现前进、后退。

重绘与重排

1、重绘

重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

2、重排

重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：

  • DOM元素的几何属性变化
  • DOM树的结构变化（例如节点的增减、移动）
  • 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
  • 改变元素的一些样式（例如调整浏览器窗口大小）

两者的区别

  1. 重绘不会带来重新布局，并不一定伴随着重排。

  2. 在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：

  • 将多次改变样式属性的操作合并成一次操作
  • 将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素
  • 在内存中多次操作节点，完成后再添加到文档中去
  • 如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示
  • 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量

前端性能优化方案

1、减少DOM操作

2、部署前，图片压缩，代码压缩

3、优化js代码结构，减少冗余代码

4、减少http请求，合理设置HTTP缓存

5、使用内容分发cdn加速

6、静态资源缓存

7、图片延迟加载

浏览器内核的理解

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

  • Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]
  • Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  • Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
  • Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

  • （1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • （2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • （3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
  • （4）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

如何进行SEO优化

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt属性

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

img标签上title与alt属性的区别是什么?

alt：当图片不显示是用文字代表

title：为该属性提供信息

页面导入样式时，使用link和@import有什么区别

1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS；

2、页面被加载时，link会同时被加载；而**@import引用的CSS会等到页面被加载完成后再加载；

3、link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别；

4、link支持使用JavaScript控制DOM修改样式；而@import不支持。

如何实现浏览器内多个标签页之间的通信*

内容复杂 , 后续补充

.cookies,sessionStorage,localStorage 的区别？

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加 密）。

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小

cookie 数据大小不能超过 4k。

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

怎样处理 移动端 1px 被 渲染成 2px 问题

meta 标签中的 viewport 属性 ，initial-scale 设置为 1 rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可；

meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5 rem 按照设计稿标准走即可

浏览器是如何渲染页面的？

解析 HTML 文件，创建 DOM 树

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加 载）。

解析 CSS

优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

构建渲染树

将 CSS 与 DOM 合并，构建渲染树（Render Tree）

布局和绘制

布局和绘制，重绘（repaint）和重排（reflow）

CSS 的权重和优先级

权重

从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个 元素选择器，或者伪元素+1，通配符+0

优先级

权重相同，写在后面的覆盖前面的 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

avatar
文章
阅读
粉丝
相关推荐
2021 前端面试 | “HTML + CSS + JS”专题
175k阅读
 · 
1.9k点赞
「2021」高频前端面试题汇总之CSS篇
241k阅读
 · 
1.2k点赞
前端基础面试题（HTML,CSS,JS）
46k阅读
 · 
491点赞
2022高频前端面试题——CSS篇
89k阅读
 · 
300点赞
2023前端面试题总结
149k阅读
 · 
2.1k点赞
最近两周出去面试遇到的面试题（前端初级、长更）
347k阅读
 · 
4.8k点赞
「2021」高频前端面试题汇总之JavaScript篇（上）
591k阅读
 · 
3.3k点赞
前端工程师面试题(html+css)
7.7k阅读
 · 
160点赞
2020 前端面试 | 第一波面试题总结
113k阅读
 · 
1.5k点赞
做了一份前端面试复习计划，保熟～
572k阅读
 · 
9.2k点赞

友情链接：