CSS 面试复习指北

沐华
9,830 阅读10分钟

作为一个前端，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使用场景：

  1. 外边距重叠，如

    • 父子元素都设置了margin-top
    • 兄弟元素margin-bottom和margin-top会重叠
    • 空元素设置了上下margin值不一样 这三种情况没有BFC的话，margin会重叠取margin较大的那个

  2. 左边定宽，右边自适应，只需要给右边创建BFC即可 

  3. 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 布局也是高频考点，而且也是我们开发中很常用的布局方式之一，一定要熟悉。这一块阮一峰大佬讲的很详细了

阮一峰的 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再执行js
  • H5标准的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>

结语

如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力，感谢支持 ^_^

更多前端文章，或者加入前端交流群，欢迎关注公众号【沐华说技术】，大家一起共同交流和进步呀

avatar
文章
阅读
粉丝