阅读 86

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

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

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

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 时,权重大的优先级高

文章分类
前端
文章标签