前端面试题之CSS篇

宸翰
152 阅读10分钟

2022前端面试系列：

（1）前端面试题之HTML篇

（2）前端面试题之CSS篇

（3）前端面试题之js篇

（4）前端面试题之Vue篇（上）

1. CSS 选择器及优先级

选择器

  • id选择器(#myid)
  • 类选择器(.myclass)
  • 属性选择器(a[rel="external"])
  • 标签选择器(div, h1,p)
  • 伪类选择器(a:hover, li:nth-child)
  • 伪元素选择器(a::after, a::before)
  • 紧邻同胞选择器 h1 + p（选的是h1后紧跟的那个p）
  • 一般同胞选择器 h1 ~ p（选择所有跟在h1后的p）
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器(*)

ps：关系选择器：紧邻同胞选择器、一般同胞选择器、子选择器

优先级：

  • !important
  • 内联样式（1000）<p style=”height: 100px”>内联样式

  • ID选择器（0100）
  • 类选择器/属性选择器/伪类选择器（0010）
  • 标签选择器/伪元素选择器（0001）
  • 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2. 块级元素与内联元素

块级元素

  • style： display: block / table
  • 特点： 独占一行，可设置宽高
  • 包括： div h1(hx) p ul li ol dl dd dt table form address

内联元素

  • style： display: inline
  • 特点： 不会独占一行，相邻的行内元素不换行，宽度即为内容的宽度、padding有效，margin只有水平方向有效，可设置行高，不可以设置width和height属性。
  • 包括： span strong label a em del ins sub sup

内联块元素

  • style： display: inline-block
  • 特点： 除了可设置宽高外其余与内联元素相同
  • 包括： img input select textarea iframe

3. 水平垂直居中

水平居中

  • 对于 行内元素 : text-align: center;
  • 对于确定宽度的块级元素：
  1. width和margin实现：margin: 0 auto;
  2. 绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
  • 对于宽度未知的块级元素
  1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
  2. inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
  3. 绝对定位+transform，translateX可以移动本身元素的50%。
  4. flex布局使用justify-content:center

垂直居中

  1. 利用 line-height 实现居中，这种方法适合纯文字类
  2. 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
  3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
  4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
  5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

让元素在父元素中呈现出水平垂直居中的形态，无非就 3种情况：

  • 单行的文本、inline 或者 inline-block 元素；
  • 固定宽高的块级盒子；
  • 不固定宽高的块级盒子；

一、单行的文本、inline 或 inline-block 元素

水平居中

此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：

.parent {
    text-align: center;
}
复制代码

垂直居中

方法一：通过设置上下内间距一致达到垂直居中的效果：

.single-line {
    padding-top: 10px;
    padding-bottom: 10px;
}
复制代码

方法二：通过设置 height 和 line-height 一致达到垂直居中：

.single-line {
    height: 100px;
    line-height: 100px;
}

二、固定宽高的块级盒子

方法一：absolute + 负 margin

ps：margin-left/top：-(width/2)

image.png 方法二：absolute + margin auto

image.png

方法三：absolute + calc

image.png

三、不固定宽高的块级盒子

方法一：absolute + transform

image.png

方法二：flex

image.png

方法三：grid

image.png

方法四：line-height + vertical-align

image.png

方法五：writing-mode

image.png

方法六：table-cell

image.png

4. CSS优化、提高性能的方法有哪些

  • 删除无用CSS代码
  • 内联首屏关键CSS（Critical CSS） 将渲染首屏内容所需的关键CSS内联到HTML中
  • 异步加载非首屏CSS
  • CSS文件压缩
  • 不要在ID选择器前面进行嵌套其它选择器
  • 遵守盒模型规则
  • 尽量减少页面重排、重绘
  • 抽象提取公共样式，减少代码量

5. flex布局

  • flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。
  • 一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
  • 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

6. 使用 rem 布局的优缺点？

优点： rem与屏幕分辨率关联起来可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

缺点：

  1. 在dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
  2. 使用iframe引用也会出现问题。

7. 什么是BFC? 作用是什么？

BFC：

  • Block formatting context 块级格式化上下文
  • 形成独立的渲染空间，内部元素的渲染不会影响外界

8. 如何创建 BFC？

  • 根元素：html
  • 非溢出的可见元素：overflow 不为 visible
  • 设置浮动：float 属性不为 none
  • 设置定位：position 为 absolute 或 fixed
  • 定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC 渲染规则

  • 内部的盒子会在垂直方向，一个接一个地放置；
  • 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；
  • 每个元素的 margin 的左边，与包含块 border 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此；
  • BFC 的区域不会与 float 盒子重叠；
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 BFC 的高度时，浮动元素也参与计算。

9. 隐藏页面中某个元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素彻底隐藏。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

10. CSS3有哪些新特性

  • 实现圆角border-radius，阴影box-shadow，边框图片border-image
  • 对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
  • 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
  • 增加了更多的CSS选择器、多背景、rgba()
  • 唯一引入的伪元素是::selection；
  • 实现媒体查询@media，多栏布局flex
  • 过渡transition 动画animation

11. position的值有哪些

static： 默认值。没有定位，元素出现在正常的文档流中

relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位

absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

12. display 有哪些值？说明他们的作用

  • block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
  • none 元素不显示，并从文档流中移除。
  • inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block默认宽度为内容宽度，可以设置宽高，同行显示。
  • list-item 像块类型元素一样显示，并添加样式列表标记。
  • table 此元素会作为块级表格来显示。
  • inherit 规定应该从父元素继承display属性的值。

13. width:auto 和 width:100%的区别

一般而言 width:100%会使元素box的宽度等于父元素的contentbox的宽度。 width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

14. box-sizing属性

box-sizing：content-box/border-box/inherit

  • content-box：在元素的宽度和高度属性基础上绘制元素的内边距和边框。【标准盒子模型】
  • border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 。【IE 盒子模型】
  • inherit：继承父元素的 box-sizing 值。

15. px和em和rem的区别

px: 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em的值并不是固定的，会继承父级元素的字体大小，代表倍数

rem的值并不是固定的，是基于根元素 <html> 的字体大小，也代表倍数

16. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

17. CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？

（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。

（2）但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现会和浏览器不同而变化。

在不同浏览器下的区别：

  • 在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
  • 在火狐浏览器、Opera和IE11里，使用collapse值的效果是：table的行会消失，它的下面一行会补充它的位置。
avatar
文章
阅读
粉丝