CSS 面试复习指北

394次阅读  |  发布于2年以前

作为一个前端，HTML 和 CSS 是必学的基础，也是前端必考的知识点，有些人明明框架源码都能侃侃而谈，可是这些基础却支支吾吾说不明白，从而错过好的 offer 是真的很可惜，所以好好复习下基础真的很有必要

为此笔者专门梳理了一下相关面试常见考点

>>>、/deep/、::v-deep

都是深度选择器，可以操作样式穿透，用于局部修改UI组件库默认样式

区别是 >>> 只作用于 CSS，在 Less/Sass 中无法识别，所以用 deep 代替，在 Vue3.0之前用 /deep/，Vue3.0之后用 ::v-deep

position

有些人还只知道4个属性~

几种隐藏的区别

另外 transition 过渡不支持 display:none，其他三个是支持的

什么时候会导致重排

怎么减少重排影响呢？

margin 和 padding

margin 和 padding 对行内元素的影响，比如 span，默认设置不了宽高的，但是可以设置 margin 和 padding, 不过设置后 margin 和 padding 都只有水平方向有效果，垂直方向是没有效果的

两个div上下排列，都设置 margin 会怎样？

会发生边距重叠，margin 都大于0就取较大值，一正一负就相加，都负取较大绝对值

为什么会这样？就是由于 BFC

说一下 BFC

BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文

BFC渲染规则或特性：

怎么创建BFC或触发BFC：

BFC使用场景：

  1. 外边距重叠，如

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

3 . BFC可以阻止浮动元素的覆盖。父元素没有设置高度，子元素浮动了，不参与父元素高度计算，由于父元素高度为0，导致父元素的兄弟元素向上顶，与子元素重叠，只需给父元素创建BFC即可

清除浮动

设置浮动后 display 自动变成 block

由于父元素没写高度时，子元素浮动后会导致父元素发生调试塌陷，所以需要清除浮动

.clearfix:after{
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}
.clearfix{
   zoom: 1;
}

盒模型

通过CSS的 box-sizing 属性切换模式，content-box就是标准模式，border-box就是怪异模式

标签之间空白间隙如何解决

 <li>第一行</li><!--
--><li>第二行</li>

常见样式兼容问题

:before 和 ::before 的区别

媒体查询

通过媒体查询可以为不同大小尺寸的设备使用不同的 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标签

通过rel属性进行预加载，如

<link rel="dns-prefetch" href="//xx.baidu.com">

rel有几个属性：

script标签

由于浏览器底层运行机制，渲染引擎在解析HTML时遇到script标签引用文件是会暂停解析过程的，同时通过网络线程加载文件，文件加载后切换至js引擎执行相应代码，代码执行完成后再切换回渲染引擎继续渲染页面

可是首次渲染可能并不依赖这些js文件，这就延长了页面渲染的时间，所以为了减少这些时间损耗，可以通过script标签三个属性来实现：

href和src的区别

href是引用，src是引入

href:

src:

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;
}

不固定宽高

posolute + 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>

结语

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

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8