CSS 相关面试题

星期五817
102 阅读14分钟

juejin.cn/post/690553…

1. CSS选择器及其优先级

image.png

4. display的block、inline和inline-block的区别

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

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

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念，用于描述块级盒子在布局时的工作原理和规则。BFC 定义了一套规范化的规则，用于确定块级盒子如何布局、定位其内部元素以及与周围元素的关系。

BFC 的主要特点和行为包括：

  1. 内部元素的垂直排列：在 BFC 内部，块级盒子的元素会按照垂直方向排列，它们的边界会形成一个矩形框，并且它们的边距会发生重叠。
  2. 边距重叠的限制：在 BFC 中，相邻块级盒子的垂直边距会发生重叠，但是 BFC 的边界会限制边距重叠的范围，使得边距重叠的影响仅局限于 BFC 内部。
  3. 浮动元素的包裹：在 BFC 中，浮动元素会被包裹在块级盒子的周围，不会影响到外部元素的布局。
  4. 清除浮动：BFC 中的元素可以通过设置 overflow 属性值为 auto、hidden 或 scroll 来清除浮动，从而防止外部元素受到浮动元素的影响。
  5. 定位：在 BFC 中，元素的定位会相对于包含块来计算，而不会影响到外部元素。

常见触发 BFC 的方式包括：

  • 设置 overflow 属性值为除 visible 以外的值（如 auto、hidden、scroll）。
  • 设置 float 属性值为除 none 以外的值。
  • 设置 position 属性值为 absolute 或 fixed。
  • 设置 display 属性值为 inline-block、table-cell、table-caption、table、flex 或 inline-flex。

BFC 的概念对于理解布局和处理一些常见的布局问题非常重要，如清除浮动、边距重叠等。

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

触发条件

  • 根层叠上下文(html)：本身就有层叠上下文

  • position非static

  • css3新属性

    • flex
    • transform
    • opacity
    • filter
    • will-change
    • webkit-overflow-scrolling
层叠等级：层叠上下文在z轴上的排序
  • 在同一层叠上下文中，层叠等级才有意义
  • z-index的优先级最高

image.png

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布局时，不应该先设置完子元素布局后再使用。

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物理像素

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

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

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

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

css
复制代码
transform: scale(0.7);
元素竖向的百分比设定是相对于容器的高度吗
  • 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的
  • 但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
文本超出显示省略号
css
复制代码
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

10. 对requestAnimationframe的理解

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

优势：

  • CPU节能，
  • 函数节流
  • 减少DOM操作

Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

  • 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

  • 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

avatar
文章
阅读
粉丝