「2022」寒冬下我的面试知识点复盘【CSS】篇

菜猫子neko
7,874 阅读19分钟

前言

笔者今年2022寒冬下成功跳槽了阿里，这篇文章就是将自己面试的一些准备、知识总结分享出来~

如果这篇文章对你有用，请一键三连（点赞评论+收藏）让更多的同学看到

如果需要转载，请评论区留言，未经允许请不要私自转载；

防杠声明

这篇文章不是纯堆砌面试题，而是以知识总结为主，主观观点和主观总结居多，里面总结的知识点在我这次的面试中也不全都有用到~如果有写错的地方欢迎评论区提出，如果只是要杠那请右上角X掉慢走；

传送门

这个专栏预计要做以下这些内容，可以根据自己的需要跳转查看

面经：「2022面经」：2年前端拿下字节阿里offer总结

专栏：2022寒冬下我的面试知识点复盘：

「2022」寒冬下我的面试知识点复盘【浏览器原理】篇

「2022」寒冬下我的面试知识点复盘【计算机网络】篇

「2022」寒冬下我的面试知识点复盘【JS】篇（加紧编写中）

「2022」寒冬下我的面试知识点复盘【CSS】篇

「2022」寒冬下我的面试知识点复盘【Vue3、Vue2、Vite】篇

「2022」寒冬下我的面试知识点复盘【工程化】篇（加紧编写中）

「2022」寒冬下我的面试知识点复盘【Nodejs】篇（加紧编写中）

「2022」寒冬下我的面试知识点复盘【TypeScript】篇（加紧编写中）

本文标题思维导图

制作ing

CSS 篇

1.盒模型

概念

盒子模型的组成为：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）

CSS的盒模型有两种：标准盒子模型和IE盒子模型

  • 标准盒子模型：盒子实际总宽高=内容的宽高width\height（content）+ border + padding + margin
  • IE盒子模型：盒子实际总宽高=内容的宽高width\height（content+border+padding）+ margin
如何设置盒模型
  • 可以通过设置box-sizing的值来改变盒模型；
    • box-sizeing: content-box为标准盒子模型；也是默认值；
    • box-sizeing: border-box为IEh盒子模型；

box-sizing的应用场景在于是否想让子元素因为padding和border溢出

盒模型 margin 负值问题
  • margin-top 元素自身会向上移动，同时会影响下方的元素会向上移动；
  • margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
  • margin-left 元素自身会向左移动，同时会影响其它元素；
  • margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动；

2.BFC & 块级格式化上下文

概念

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件
  • position: absolute/fixed：绝对定位
  • display: inline-block / table / flex
  • float 设置除none以外的值；（只要设置了浮动，当前元素就创建了BFC）
  • ovevflow !== visible (可为：hidden、auto、scroll)
规则
  • 属于同一个 BFC 的相邻 Box 垂直排列
  • 属于同一个 BFC 的相邻 Box 的 margin 会发生外边距重叠
  • BFC 在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动子元素也参与计算
特性和应用
  • 阻止margin重叠：同一个 BFC 下外边距（margin）会发生折叠
  • 清除浮动 ：清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自适应两栏布局：左float+右BFC，是利用了BFC 的区域不会与 float 的元素区域重叠的机制
外边距重叠
  • 在CSS当中，上下相邻的两个盒子的外边距可以结合成一个单独的外边距。
    • 注意：只有在文档流中的垂直外边距才会合并

外边距重叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

3.Z-index（层叠上下文）

触发条件
  • 根层叠上下文(html)：本身就有层叠上下文
  • position非static
  • css3新属性
    • flex
    • transform
    • opacity
    • filter
    • will-change
    • webkit-overflow-scrolling
层叠等级：层叠上下文在z轴上的排序
  • 在同一层叠上下文中，层叠等级才有意义
  • z-index的优先级最高

image.png

z-index:auto 和 z-index:0 层叠关系

设置为auto和0后，后出现的覆盖前面的；

4.浮动

浮动会造成什么
  • 父元素高度塌陷
  • 与浮动元素同级的非浮动元素会填补原有位置
如何清除浮动的影响
  • 给父元素设置高度 height
  • 在浮动元素后面添加 clear:both的空 div 或者br标签
  • 给父元素添加 overflow:hidden 或者 auto 样式
  • 使用:after在父元素末尾加一个点，并添加 clear: both 属性；
设置元素浮动后 display 值是多少

自动变成display:block;

5.各种居中

水平居中方案
  • 行内元素，给其父元素设置text-align:center
  • 定宽块级元素，该元素设置margin:0 auto
  • 定宽块级元素，还可以用绝对定位设置和left:50%;加margin-left:-1/2宽度；
  • 不定宽块级元素，设置父元素为flex布局，子元素设置margin:0 auto即可
  • 不定宽块级元素，设置父元素为flex布局，且设置justify-content: center;
  • 不定宽块级元素，设置父元素为position: relative;子元素position: absulote;left: 50%;transform: translateX(-50%);
垂直居中方案
  • 若元素是单行文本, 则可设置line-height等于父元素高度
  • 定高块级元素，该元素设置margin:auto 0
  • 定高块级元素，可以用绝对定位+top:50%;+margin-top
  • 不定高块级元素，设置父元素为flex布局，子元素设置margin: auto 0即可
  • 不定高块级元素，设置父元素为flex布局，且设置align-items: center;
  • 不定高会级元素，可以用绝对定位和transform
  • 不定高块级元素，设置父元素为table布局，子元素display: table-cell;vertical-align:middle;
水平垂直居中方案
  • 子元素为块级元素，父元素flex布局，子元素设置margin:auto;
  • 子元素未知，父元素flex布局，设置justify-content: center;align-items: center;
  • 子元素用绝对定位，设置上下左右为0，margin:auto;父元素position: relative;
  • 子元素已知宽高，绝对定位 left: 50%;top: 50%; 再 margin 自己的负一半；或者 transform: translate(-50%,-50%);

6.各种布局方案

两栏布局
  • 左float+ 右margin（左设置固定宽度+向左浮动，右边设置margin-left为左边的固定宽度；）
  • 左fixed+右margin
  • 双float+ 右calc
  • 双inline-block+右calc
  • 左float+右BFC，是利用了BFC 的区域不会与 float 的元素区域重叠的机制
  • 最简单常用：使用flex布局（左定宽，右flex1）

image.png

三栏布局
  • 左右float+中margin：左右栏定宽并设置浮动，中间一栏设置左右两个方向的margin值且不设置宽度；（中间一栏必须放在最后）
  • 左右绝对定位+中margin：左右两栏设置绝对定位放左右，中间设置两个方面的margin值；
  • 圣杯布局：父元素设置左右padding，子元素三栏都通过float浮动，通过负值margin进行调整
  • 双飞翼布局：对圣杯布局的改进，取消了相对定位（不了解的话文章有很多）
  • 最简单的flex布局，左右设置flex: 0 1 200px;中间设置flex:1;父元素flex。

7.Flex

flexbox（弹性盒布局模型）
  • 通常被称为flexbox，flex是弹性布局，是CSS3的一种布局方式，给子元素提供了空间分布和对齐能力。它由（Flex Container容器/Flex item项目成员）构成。
  • flex布局的元素称为Flex Container容器，它的所有子元素都是Flex item项目成员；
  • 容器有两个轴线排列，水平轴和垂直轴，默认为水平轴排列；

该布局模型的目的是提供一种更加高效的方式来对容器中的项目成员进行布局、对齐和分配空间。通常可用于水平垂直居中，两栏、三栏布局等的场景里

容器的 flex 属性
  • flex-direction属性：有 row | row-reverse | column | column-reverse 等取值，决定主轴的方向（即项目成员的排列方向）。
    • row（默认值）：主轴为水平方向，起点在左端。
    • row-reverse：主轴为水平方向，起点在右端。
    • column：主轴为垂直方向，起点在上沿。
    • column-reverse：主轴为垂直方向，起点在下沿。
  • flex-wrap属性：有 nowrap | wrap | wrap-reverse 等取值如果一条轴线排不下，如何换行。
    • nowrap（默认）：不换行。
    • wrap：换行，第一行在上方。
    • wrap-reverse：换行，第一行在下方。
  • flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  • justify-content属性：定义了项目在主轴上的对齐方式（水平方向）。
  • align-items属性：定义项目在交叉轴上的对齐方式（垂直方向）。
  • align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目成员的 flex-grow、flex-shrink、flex-basis 属性作用
  • flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    • 如果所有项目的flex-grow属性相等（或都为1），将等分剩余空间，如果有一个为2，那么它占据的剩余空间将比其他项目多；
  • flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，也就是项目的本来大小。
  • flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

如果设置 flex:1，就等于 flex: 1 1 0;设置 flex:0；就等于 flex: 0 0 0;

子元素均设置 flex 1 宽度是否一样
  • Flex 1 相当于 flex: 1 1 0；项目占的主轴空间为0，所以平分；
  • 但是：如果子元素有padding属性的话，元素占的地方会被增加；
  • 如果子元素有margin属性的话，元素的宽度不变，但是content内容的宽度变小；
使用时应该注意些什么？
  • 在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后再使用。

8.伪类和伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。

比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

区别

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素，伪元素是::双冒号

CSS3新增伪类
  • p:first-of-type 选择属于其父元素的首个元素
  • p:last-of-type 选择属于其父元素的最后元素
  • :enabled :disabled 表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

9.position定位

  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • fixed：生成固定定位的元素，相对于浏览器窗口进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • static 默认值。没有定位，元素出现在正常的文档流中
  • inherit 规定从父元素继承 position 属性的值
  • sticky 粘性定位，适用于浏览器滚动到一定高度时，让一部分内容固定；
position: fixed什么时候会失效？
  • 若是设置了position: fixed属性的元素，它的上级元素设置了transform任意属性则会导致固定定位属性失效。
  • 注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有。

10.display属性

display属性的几个取值
  • block 转换成块状元素。
  • inline 转换成行内元素。
  • none 设置元素不可见，从文档流中移除。
  • inline-block 元素像行内元素一样显示，但元素的内容像块类型元素一样显示。
  • list-item 像块类型元素一样显示，并添加样式列表标记。
  • table 作为块级表格来显示
  • inherit 表示从父元素继承 display 属性的值
display:inline-block 为什么会显示间隙

因为原来HTML代码中的回车换行等被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙

如何消除 display:inline-block 的间隙
  • 移除空格
  • 使用margin负值
  • 使用font-size:0
  • letter-spacing
  • word-spacing

11.CSS选择器权重 & 优先级

优先级权重
选择器优先级权重
id选择器100
类选择器10
属性选择器10
伪类选择器10
标签选择器1
伪元素选择器1
相邻兄弟选择器0
子选择器0
后代选择器0
通配符选择器0
注意点
  1. !important声明的样式优先级最高，如果冲突再进行计算。
  2. 如果优先级相同，则选择最后出现的样式。（后出现的覆盖之前的）
  3. 继承得到的样式的优先级最低。
  4. 不同来源下：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

12.隐藏元素的方法

CSS属性来隐藏元素的方法
  • visibility: hidden： 这个属性只是简单的隐藏某个元素，元素继续占用空间，不可交互
  • display: none： 元素会变得不可见，元素从文档流中消失，不再占用文档的空间，不可交互
  • opacity: 0：本质上是将元素的透明度设置为0，就看起来隐藏了，但是依然占据空间且可以交互
  • position: absolute： 设置一个很大的 left负值定位，使元素定位在可见区域之外
  • transform: scale(0)： 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留，但不可交互；
  • height: 0： 将元素高度设为 0
opacity: 0、visibility: hidden、display: none 优劣和适用场景。
  • 从结构上看：
    • display:none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） ，内容不可见，不可点击
    • visibility: hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘），内容不可见，不可点击
    • opacity: 0 隐藏对应元素，在文档布局中仍保留原来的空间（重绘），内容不可见，可以点击
  • 从继承上看：
    • display: none 和 opacity: 0 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
    • visibility: hidden 是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible 可以让子孙节点显式。
rgba() 和 opacity 的透明效果比较
  • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
  • 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

13.动画 & 过渡效果

animation
  • css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义
transform
  • transform主要用于给元素做变换,主要由以下几种变换,rotate(旋转),scale(缩放),skew(扭曲),translate(移动)和matrix(矩阵变换).
  • transform本身是没有过渡效果的,它只是对元素做大小、旋转、倾斜等各种变换,通过和transition或者animation相结合,可以让这一变换过程具有动画的效果

transition 和 animation 以及 transform 的区别

  • transform 本身没有动画效果，它实现动画需要依赖其余两者
  • Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值
  • transition 设置的是 css 属性变化时的过渡动画，而 animation 动画会自动执行；
transition 定义的动画触发一次执行一次，想再次执行就需要再次触发；animation 可以执行指定次数或者无数次；
  • 
transition定义的动画只有两个状态,开始态和结束态,animation可以定义多个动画中间态,且可以控制多个复杂动画的有序执行.
如何优化动画性能
  • 尽量减少js动画，如需要，使用对性能友好的 requestAnimationFrame
  • 开启硬件加速
  • 使用 css3 的 transform 代替left、top减少使用引起页面重排的属性：（该CSS属性可以旋转，缩放，倾斜，或者上传给定的元素。这是通过修改CSS 可视格式模型的坐标空间来实现的。）
  • requestAnimationFrame() 方法，会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成
  • requestIdleCallback() 方法，它指定只有当一帧的末尾有空闲时间，才会执行回调函数。
手写动画的最小时间间隔是多久

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

transform 的 rotate translateX 先后顺序有何不同？

如果先旋转再平移的话，会按照旋转后的坐标系进行平移。哪个在前就先执行。

14.link和@import

  • link可以放在html任意位置，@import一定要写在除@charset外的其他任何 CSS 规则之前，并且@import之后的分号必须书写不可省略；（不符合就不会生效且不报错）
  • link的内容会被并行加载，html内的@import也会被并行加载，但是link内的import需要等到页面加载完后才会加载（可能会导致页面跳一下FOUC）
  • @import需要 IE5 以上才能使用，link作为html标签没有兼容问题；
  • link可以使用 js 动态插入，@import也可以通过js插入，但是比较麻烦；需要新建一个style标签，在style标签里面再注入import指令再插入到页面上；
  • 导入方式并不会影响样式权重规则
  • 都会阻塞页面渲染，同样支持媒体查询；

15.像素单位

px、em、rem、vw、vh
  • px：绝对单位，页面按精确像素展示。
  • em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
  • rem：以根元素的字体大小为基准。例如html的font-size: 16px，则子级1rem = 16px。
  • vw和vh：都是针对当前浏览器窗口大小而言，1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。
移动端开发为什么需要二倍图

因为逻辑像素（CSS）和 物理像素不相等，苹果有的是320物理像素，有的是640物理像素

16.杂问题

绘制三角形
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;

image.png

绘制扇形
border: 50px solid transparent;
width: 0;
heigt: 0;
border-radius: 50px;
border-top-color: blue;

image.png

如何实现小于12px的字体效果

我们用css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

transform:scale()这个属性只可以缩放可以定义宽高的元素

而行内元素是没有宽高的，所以对于行内元素设置小于12px，我们可以加上一个display:inline-block;

transform: scale(0.7);
元素竖向的百分比设定是相对于容器的高度吗
  • 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的
  • 但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
文本超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）
  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代
CSS 中的background-image 属性可以和 background-color 属性一起生效么？

目前来看可以生效，且background-image在background-color上。

ackground-size: cover和contain 区别
  • cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
  • contain：缩放背景图片以完全装入背景区，可能背景区部分空白。
avatar
文章
阅读
粉丝