作为一个前端,HTML 和 CSS 是必学的基础,也是前端必考的知识点,有些人明明框架源码都能侃侃而谈,可是这些基础却支支吾吾说不明白,从而错过好的 offer 是真的很可惜,所以好好复习下基础真的很有必要
为此笔者专门梳理了一下相关面试常见考点
>>>、/deep/、:deep()、::v-deep
都是深度选择器
,或者说样式穿透
,用于组件内修改UI组件库默认样式而不影响全局
区别是 >>>
只作用于 CSS,在 Less/Sass 中无法识别,所以用 deep 代替,在 Vue3.0之前用 /deep/
,Vue3.0之后可能会报错,所以推荐用 :deep(.class)
,::v-deep
已弃用
position
有些人还只知道4个属性~
static
:正常文档流,无定位relative
:正常文档流,相对自身定位absolute
:脱离文档流,相对上级有 position 属性且值不为 static 的元素定位,若没有则相对 body 定位fixed
:脱离文档流,相对于浏览器窗口定位sticky
:根据窗口滚动自动切换 relative 和 fixed,由 top 决定
几种隐藏的区别
visibility:hidden
:隐藏元素,会继续在文档流中占位,所以触发重绘,隐藏后不能触发点击事件display:none
:隐藏元素,会从页面中删除掉,所以会触发重排和重绘opacity:0
:透明,会继续在文档流中占位,所以触发重绘。由是是作用于元素自身,所以子元素会继承,全部变透明,透明后可以触发点击事件rgba(0,0,0,0)
:透明,会继续在文档流中占位,所以触发重绘。由于只作用于颜色或背景色,所以子元素不会继承,透明后可以触发点击事件
另外 transition
过渡不支持 display:none
,其他三个是支持的
什么时候会导致重排
- 添加、删除、更新 DOM 节点
- display: none
- 动画
- 添加或改变字号、宽高等样式
- 用户行为,比如滚动、调整窗口大小
怎么减少重排影响呢?
- 避免使用大量 style 属性,而是用 class
- 让动画元素脱离文档流,这样不会影响到其他的布局分层
- 能用 CSS 动画的就不要用 JS 动画
- 尽量不要用 table 布局
margin 和 padding
margin 和 padding 对行内元素的影响,比如 span,默认设置不了宽高的,但是可以设置 margin 和 padding, 不过设置后 margin 和 padding 都只有水平方向有效果,垂直方向是没有效果的
两个div上下排列,都设置 margin 会怎样?
会发生边距重叠,margin 都大于0就取较大值,一正一负就相加,都负取较大绝对值
为什么会这样?就是由于 BFC
说一下 BFC
BFC就是块级元素格式化上下文
,相当于一个容器,里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文
BFC渲染规则或特性:
- BFC元素垂直方向的边距会发生重叠,由 margin 决定
- BFC的区域不会与浮动元素的区域重叠
- BFC是一个独立的容器,子元素不会影响外面元素
- 计算BFC高度的时候,浮动元素也会参与计算
怎么创建BFC或触发BFC:
- html 就是一个 BFC
- float值不为none,也就是说设置了浮动即可
- position的值为absolute或者fixed
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- overflow为auto或hidden
BFC使用场景:
-
外边距重叠,如
- 父子元素都设置了margin-top
- 兄弟元素margin-bottom和margin-top会重叠
- 空元素设置了上下margin值不一样 这三种情况没有BFC的话,margin会重叠取margin较大的那个
-
左边定宽,右边自适应,只需要给右边创建BFC即可
-
BFC可以阻止浮动元素的覆盖。父元素没有设置高度,子元素浮动了,不参与父元素高度计算。当父元素没设置高度或高度为0,而子元素浮动了,就会导致父元素下面的兄弟元素向上顶,与浮动了的子元素重叠,只需给父元素创建BFC即可
清除浮动
设置浮动后 display
自动变成 block
由于父元素没写高度时,子元素浮动后会导致父元素发生调试塌陷,所以需要清除浮动
- 给父级设置
overflow: hidden
- 给父级设置高度
- 父级也设置成浮动
- 浮动元素下添加空标签
div
并设置 CSS 样式:{ clear: both;height:0;overflow:hidden }
- 使用伪类,如下
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{
zoom: 1;
}
盒模型
- 标准模式:元素的真实占位宽高 =
content + border + padding
- 怪异模式:元素的真实占位宽高 =
content
(包含border和padding)
设置了width/height,content就是width/height,没设置content就是内容的宽高
通过CSS的 box-sizing
属性切换模式,content-box
就是标准模式,border-box
就是怪异模式
flex 弹性盒模型相关
flex 布局也是高频考点,而且也是我们开发中很常用的布局方式之一,一定要熟悉。这一块阮一峰大佬讲的很详细了
标签之间空白间隙如何解决
- float: left
- 父元素 font-size:0,子元素再单独设置字体
- margin 负值
- letter-spacing 字间距
- word-spacing 词间距
- html 标签不换行(不利于阅读)
- 使用注释拼接,如下
<li>第一行</li><!--
--><li>第二行</li>
常见样式兼容问题
- 不同浏览器默认 margin 和 padding 不一样
- Chrome 默认文字最小12px,可添加 CSS 属性 -webkit-text-size-adjust:none(新版浏览器已弃用); 或用transform:scale()缩小;或者在浏览器设置修改字体大小最小限制
- 超链接访问过后 hover 和 active 样式就不出现了,解决办法是调整CSS属性顺序lvha:a:link{} a:visited{} a:hover{} a:active{}
- Chrome 中 visibility 的值为 collapse和hidden是一样的,在Firefox,Opera和IE中,值为collapse和display:none是一样的
- CSS3 属性添加针对不同浏览器的前缀
:before 和 ::before 的区别
- 单冒号是
CSS2.1
引入的,用于伪类,操作文档已有的元素,侧重于丰富选择器的选择能力 - 双冒号是
CSS3
引入的,用于伪元素,会创建文档树之外的元素,侧重于表达或定义不在语法定义范围内的抽象元素
媒体查询
通过媒体查询可以为不同大小尺寸的设备使用不同的 CSS,达到自适应的目的。可以通过 html 或者 CSS 设置
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
<link ref="stylesheet" type="text/css" href="xxx.css" media="only screen and(max-device-width: 480px)">
@media only screen and(max-device-width:480px){ ... }
link 和 @import
link
:是html引入方式;最大限度支持并行下载;优先级高于 @import;可以通过 ref="alternate stylesheet" 指定候选样式@import
:是CSS引入方式,必须写在样式之前;可以嵌套,但过多嵌套会导致串行下载,出现文档样式暂失效;老浏览器不支持
如何利用标签提升渲染速度
link标签
通过rel
属性进行预加载
,如
<link rel="dns-prefetch" href="//xx.baidu.com">
rel有几个属性:
dns-prefetch
:浏览器会对href中的域名进行DNS解析并缓存,当再次请求该域名资源时,能省去查询IP的过程,从而减少时间损耗prefetch
/preload
:都是预先下载并缓存某个资源,不同的是prefetch可能会在浏览器忙时被忽略,而preload则一定会预先下载preconnect
:正式发送http请求前预先执行DNS解析、TCP握手、TLS协商。通过消除往返延迟来节省时间prerender
:浏览器不仅会加载资源,还会解析执行页面,并进行预渲染
script标签
由于浏览器底层运行机制,渲染引擎在解析HTML时遇到script标签引用文件是会暂停解析过程的,同时通过网络线程加载文件,文件加载后切换至js引擎执行相应代码,代码执行完成后再切换回渲染引擎继续渲染页面
可是首次渲染可能并不依赖这些js文件,这就延长了页面渲染的时间,所以为了减少这些时间损耗,可以通过script标签三个属性来实现:
async
:立即请求文件,但不阻塞渲染引擎,而是文件加载完毕后再阻塞渲染引擎并执行js先defer
:立即请求文件,但不阻塞渲染引擎,等解析完HTML再执行jsH5
标准的type="module"
:让浏览器按照ES6标准将文件当模板解析,默认阻塞效果和defer一样,也可以配合async在请求完成后立即执行
href和src的区别
href是引用
,src是引入
href:
- href引入的CSS会阻塞页面渲染,CSS加载完成才会进行渲染,所以渲染出来就是带样式的
- 不会阻塞js加载,但是会阻塞js的执行,因为js执行可能会操作DOM,所以CSS加载完之前执行js是可能会有问题的
src:
- src引入的js会阻塞页面的渲染(没有defer和async的情况下),因为js很可能操作DOM修改文档结构
- 多个脚本时不会不阻塞后续资源的加载,但是会阻塞后续js逻辑的执行,按顺序执行
SEO 和语义化
SEO
就是搜索引擎优化,利用搜索引擎的搜索规则来提高网站的自然排名,比如对网站的标题、关键字、描述精心设置,比如网站的结构布局设计和网页代码优化
语义化
就根据内容结构化选择合适的标签和特有的属性去格式化文档内容,在没有CSS的情况下也能呈现出很好的内容结构,代码结构,便于开发者阅读和维护,同时也利于SEO
alt和title的作用及区别
共同点是有利于SEO
不同点是alt是图片不能正常显示时出现的提示信息;title是鼠标移到元素上时显示的提示信息,而且大多数标签都支持title属性,但是优先级要低于alt(都在图片上图片不能正常显示时);title内容可以比alt更长
HTML自动刷新或跳转
除了定时器控制页面跳转还有更简洁的方法,比如meta
标签
<!-- 5秒后自动跳转到page2.html -->
<meta http-equiv="Refresh" content="5; URL=page2.html">
<!-- 30秒后自动刷新当前页面 -->
<meta http-equiv="Refresh" content="30">
比如实现PPT自动播放功能或者自动返回首页,或者做大屏幕监控的时候用这样的方法来自动刷新,是不是很简单呢
当然它的缺点是刷新和跳转是不可取消
的,如果需要动态刷新或者手动取消的,还是推荐定时器
水平垂直居中
固定宽高
absolute + 负margin
.content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 这里的 50px 为宽高的一半 */
margin-left: -50px;
}
absolute + margin auto
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
不固定宽高
absolute + translate
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
vertical-align + 伪元素
.box {
width: 300px;
height: 300px;
text-align: center;
}
.box:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
...
<div class="box">
<span class="content">这碗又大又圆,这面又长又宽</span>
</div>
flex
.box {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
...
<div class="box">
<div class="content">这碗又大又圆,这面又长又宽</div>
</div>
grid
.box {
width: 300px;
height: 300px;
display: grid;
}
.content {
justify-self: center;
align-items: center;
}
...
<div class="box">
<div class="content">这碗又大又圆,这面又长又宽</div>
</div>
table-cell
.box {
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
...
<div class="box">
<span class="content">这碗又大又圆,这面又长又宽</span>
</div>
writing-mode
.box {
width: 300px;
height: 300px;
writing-mode: vertical-lr;
text-align: center;
}
.content {
writing-mode: horizontal-tb;
display: inline-block;
width: 100%;
}
...
<div class="box">
<div class="content">
<span>这碗又大又圆,这面又长又宽</span>
</div>
</div>
结语
如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【赞】都是我创作的最大动力,感谢支持 ^_^
更多前端文章,或者加入前端交流群,欢迎关注公众号【沐华说技术】,大家一起共同交流和进步呀