CSS面试题

最新推荐文章于 2024-07-23 14:07:14 发布

猿人啊兴

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量39

点赞数

分类专栏： Java面试文章标签： css 前端

本文链接：https://blog.csdn.net/m0_56224451/article/details/133791546

版权

Java面试专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS面试题

1-10

1.css 的渲染层合成是什么浏览器如何创建新的渲染层

CSS渲染层合成（compositing）是浏览器中一种优化渲染性能的技术。该技术允许浏览器在页面中叠加多个渲染层，并将它们组合成最终的呈现结果，从而提高渲染性能和减少页面闪烁等现象。

在CSS渲染层合成中，每个渲染层都是由一个或多个HTML元素、CSS样式和相关属性组成的。浏览器将这些渲染层作为平面层根据z-index值按照顺序堆叠在一起，从而形成最终的呈现结果。

浏览器在创建新的渲染层时，通常会遵循以下几个步骤：

根据DOM树和CSS规则生成初始渲染树（Render Tree）。渲染树包含了视觉元素的结构、大小、颜色和属性等信息。

根据渲染树计算每个元素的布局（Layout），确定每个元素在屏幕上的尺寸和位置等属性。

生成绘制列表（Painting），将渲染树转换成实际的像素输出到屏幕上。

将所有绘制图层合成（Compositing），根据z-index值确定每个渲染层的位置和透明度等信息，并将它们组合成最终的呈现结果。

浏览器在创建新的渲染层时，会根据元素的属性（如transform、opacity等）和样式来确定是否需要创建新的图层。如果一个元素有很多复杂的动画效果和变化，则可能需要单独创建一个图层来进行优化处理。在这种情况下，浏览器会将该元素剥离出当前渲染层，并创建一个新的单独的图层进行优化渲染，从而提高渲染性能和减少页面闪烁等现象。

总结，CSS渲染层合成是一种浏览器优化渲染性能的技术，通过将页面中的元素分解成多个渲染层，并对其进行优化渲染，以提高页面的渲染性能和用户体验。

2.css 优先级是怎么计算的

CSS优先级是用于确定当多个CSS规则应用于同一元素时，哪个规则具有更高的优先级。CSS优先级是通过对选择器进行权重计算来确定的。以下是CSS优先级计算的一般规则：

内联样式（Inline styles）：拥有最高优先级。使用style属性直接在HTML元素上指定的样式。

ID选择器（ID selectors）：比类选择器和标签选择器具有更高的优先级。使用#前缀定义的选择器。

类选择器、属性选择器和伪类选择器（Class selectors, Attribute selectors, and Pseudo-class selectors）：比标签选择器具有更高的优先级。使用.前缀定义的选择器，以及包含方括号[]和以冒号:开头的选择器。

标签选择器（Type selectors）：基本的元素选择器，根据HTML元素名称匹配。

通配符选择器（Universal selector）：使用*选择器匹配任意元素。

继承（Inheritance）：如果一个元素没有指定某个属性的值，则会继承父元素的该属性值。

下面是一个示例，展示了如何计算CSS优先级：

!important声明的样式
p {
  color: blue !important;
}
这个规则会把所有的 <p> 元素的字体颜色都设置为蓝色，并且这个颜色值会覆盖其他任何规则。

内联样式
<p style="color: red;">这段文字使用了内联样式</p>
这个规则会把这个 <p> 元素的字体颜色设置为红色，优先级高于其他选择器。

ID选择器
#header {
  background-color: yellow;
}
这个规则会把 id 属性为 "header" 的元素的背景颜色设置为黄色。

类选择器、伪类选择器、属性选择器
.button:hover {
  background-color: gray;
}

a[target="_blank"] {
  color: blue;
}
这些规则会把带有指定类、伪类或属性的元素的样式进行修改。

标签选择器、伪元素选择器
p {
  font-style: italic;
}

p::first-letter {
  font-size: 150%;
}
这些规则会匹配所有的 <p> 元素，在其中第一个字母上设置字体大小为150%并添加斜体样式。

通配符选择器、子类选择器、相邻兄弟选择器
* {
  margin: 0;
  padding: 0;
}

ul > li {
  font-weight: bold;
}

h2 + p {
  margin-top: 30px;
}
这些规则会应用到所有的元素（通配符选择器）、在一个 <ul> 元素内直接包含的 <li> 元素（子类选择器）以及在某个 <h2> 元素之后出现的第一个 <p> 元素（相邻兄弟选择器）。

3.display的属性值及其作用

当然！下面是一些使用不同display属性值的示例：
使用display: block;将元素设置为块级元素：
<div style="display: block; background-color: red; width: 200px; height: 100px;"></div>
使用display: inline;将元素设置为行内元素：
<span style="display: inline; background-color: blue; padding: 5px;">Inline Element</span>
使用display: inline-block;将元素设置为行内块级元素：
<button style="display: inline-block; background-color: green; width: 100px; height: 40px;">Button</button>
使用display: none;隐藏元素：
<p style="display: none;">This paragraph is hidden.</p>
使用display: flex;创建弹性盒模型布局：
<div style="display: flex; justify-content: center; align-items: center; width: 300px; height: 200px; background-color: yellow;">
  <span>Flexbox Content</span>
</div>
使用display: grid;创建网格布局：
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
  <div style="background-color: orange; height: 100px;"></div>
  <div style="background-color: purple; height: 150px;"></div>
  <div style="background-color: pink; height: 80px;"></div>
</div>
这些示例展示了不同的display属性值如何影响元素的显示方式和布局。

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对象呈现，之后的内联对象会被排列在同一行内。对于行内元素和块级元素，其特点如下：

（1）行内元素

设置宽高无效；

可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

不会自动换行；

（2）块级元素

可以设置宽高；

设置margin和padding都有效；

可以自动换行；

多个块状，默认排列从上到下。

5.隐藏元素的方法有哪些

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

6.link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式；而@import不支持。

7. transition和animation的区别

transition和animation都是CSS3提供的动画效果，但它们有一些区别：

transition通常用于实现简单的过渡效果，例如当鼠标悬停在一个元素上时，元素的颜色、背景色等属性发生平滑的变化。transition只能控制一种或少数几种属性的过渡效果，并且只有两个状态：开始状态和结束状态。

animation则更加强大和灵活，可以实现更加复杂的动画效果，例如元素旋转、缩放等。animation可以控制多个属性的动画过程，并且可以定义多个关键帧（keyframes）来控制动画的细节，每个关键帧可以指定元素各种属性的状态。

总的来说，transition适用于简单的过渡动画效果，而animation适用于更加复杂和自定义的动画效果。当需要实现较为简单的交互动画时，建议使用transition；而当需要实现复杂的动画效果时，建议使用animation。

以下是transition和animation的示例代码，你可以将其粘贴到HTML文件中运行，查看效果：

<div style="width: 100px; height: 100px; background-color: red; transition: background-color 1s;">
  Hover me
</div>

<script>
  var el = document.querySelector('div');
  el.addEventListener('mouseenter', function() {
    el.style.backgroundColor = 'blue';
  });
  el.addEventListener('mouseleave', function() {
    el.style.backgroundColor = 'red';
  });
</script>

<div style="width: 100px; height: 100px; background-color: red; animation: spin 2s infinite;">
  Spin
</div>

<style>
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
以上两段代码分别演示了transition和animation的使用方法，它们分别会生成一个元素，当用户与元素交互时，元素的样式将发生变化。

8.display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

在渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；

visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

9.伪元素和伪类的区别和作用

伪元素和伪类是CSS中的两个概念，它们分别用于在元素前面、后面、内部等位置添加样式，具有一定的区别和作用。

1. 伪元素

伪元素::before和::after可以在元素的内容前面或后面添加特定的样式，常用于实现一些装饰效果，例如图标、箭头、下划线等，也可以用于清除浮动等。
/* 在元素前面添加一个箭头图标 */
a::before {
  content: "\2190";
}
其中，content属性用于定义伪元素的内容，它可以是文本、图片、计数器等类型的数据。伪元素不会影响文档流，因此在布局时不会占据实际的空间。

2. 伪类

伪类用于为元素的某些状态或位置添加样式，例如：鼠标悬停、被点击、选中等状态，也可以用于选择元素的位置、结构等。常见的伪类包括：

:hover：鼠标悬停状态；

:active：鼠标按下状态；

:link：未访问的链接；

:visited：已访问的链接；

:first-child：某父元素下的第一个子元素；

:last-child：某父元素下的最后一个子元素；
/* 鼠标悬停时改变链接颜色 */
a:hover {
  color: red;
}
其中，伪类用冒号（:）表示，它们的作用是选中满足特定条件的元素，这些条件通常与用户交互、元素结构、链接状态等有关。

3. 区别

根据CSS规范，伪类用单冒号（:）表示，而伪元素用双冒号（::）表示，但实际使用中，大部分浏览器支持将伪元素和伪类的冒号写法混用，因此，如果只使用单冒号或双冒号，不会影响页面效果。

除了语法上的区别，伪类和伪元素还有以下区别：

伪类表示元素的某个状态或特殊情况，而伪元素表示元素的某个位置或内容；

伪类可以应用于任何元素，而伪元素只能应用于具有特定结构的元素，例如::before和::after只能应用在拥有content属性的元素上；

伪类比伪元素受到更好的浏览器支持，尤其是早期的CSS版本；

以上是伪元素和伪类的区别和作用，它们在CSS中被广泛应用，可以帮助开发者实现更加多样化和灵活的效果。

10.对盒模型的理解

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，

IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizeing: content-box表示标准盒模型（默认值）

box-sizeing: border-box表示IE盒模型（怪异盒模型）

11-20

11.为什么有时候⽤translate来改变位置而不是定位

transform是CSS中的一个属性，用于对元素进行变换、旋转、缩放和倾斜等操作，可以改变元素在页面上的位置、形状和大小，实现丰富多样的动画效果和布局效果。

transform属性可以应用于任何HTML元素，并可以结合其他属性一起使用，如translate()、rotate()、scale()等。

以下是transform属性的常见值和用法：

translate()：平移元素的位置。可以指定X轴和Y轴上的偏移量，也可以只指定一个。例如：

translateX(n)：沿X轴方向平移n个单位长度；

translateY(n)：沿Y轴方向平移n个单位长度；

translate(X, Y)：同时指定X轴和Y轴方向的平移量。

rotate()：旋转元素。可以指定旋转角度，正值为顺时针旋转，负值为逆时针旋转。例如：

rotate(angle)：旋转角度为angle（单位为度）。

scale()：缩放元素的大小。可以指定X轴和Y轴上的缩放比例，也可以只指定一个。例如：

scaleX(n)：沿X轴方向缩放n倍；

scaleY(n)：沿Y轴方向缩放n倍；

scale(X, Y)：同时指定X轴和Y轴方向的缩放比例。

skew()：倾斜元素。可以指定X轴和Y轴上的倾斜角度，也可以只指定一个。例如：

skewX(angle)：沿X轴方向倾斜angle角度；

skewY(angle)：沿Y轴方向倾斜angle角度；

skew(X, Y)：同时指定X轴和Y轴方向的倾斜角度。

transform-origin：设置变换的基点。可以指定旋转、缩放和倾斜等变换的中心点。

示例用法：
/* 平移元素 */
.box {
  transform: translate(50px, 50px);
}

/* 旋转元素 */
.box {
  transform: rotate(45deg);
}

/* 缩放元素 */
.box {
  transform: scale(2, 1.5);
}

/* 倾斜元素 */
.box {
  transform: skewX(30deg);
}
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局或重绘，只会触发复合。而改变绝对定位会触发重新布局，进而触发重绘和复合

12.CSS3中有哪些新特性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）

增加了旋转,缩放,定位,倾斜,动画,多背景

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadoweflect）

文字特效（text-shadow）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

13.常见的图片格式及使用场景

（1）BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。

（2）GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

（3）JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

14.::before 和 :after 的双冒号和单冒号有什么区别

（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

注意： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语

法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

15.常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

16.px、em、rem的区别及使用场景

三者的区别：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。

em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

17.响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理：基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。关于兼容：页面头部必须有mate声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

18.margin和padding分别适合什么场景使用

何时使用margin：

需要在border外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白

空白处需要背景颜色

上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变

padding或者指定盒子的display：inline解决。

19.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色

彩好。大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www

上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久

了，兼容性不好，目前谷歌和opera支持。

20.列举一些CSS框架

Bootstrap：是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

ElementUI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。

React 组件，全链路开发和设计工具体系，数十个国际化语言支持。

21-30

21.相对，固定，绝对和静态定位的元素有什么区别

相对定位、固定定位、绝对定位和静态定位是CSS中常用的元素定位方式，它们之间有以下区别：

静态定位（position: static）：元素的默认定位方式，按照默认文档流进行布局，不受top、right、bottom、left等属性的影响。

相对定位（position: relative）：元素相对于其默认位置进行定位，使用top、right、bottom、left等属性可以调整其位置，但不脱离文档流，所以如果某个元素移动，其余所有元素的位置也会随之调整。

绝对定位（position: absolute）：元素完全脱离了文档流，相对于其包含块进行定位，包含块可以是其父元素或祖先元素，使用top、right、bottom、left等属性进行定位。如果没有指定包含块，则相对于文档的初始包含块进行定位。

固定定位（position: fixed）：元素相对于浏览器窗口进行定位，即使滚动页面或浏览器窗口改变大小，元素位置也不会改变，使用top、right、bottom、left等属性进行定位。

总的来说，四种定位方式各有特点，开发者需要在具体场景下根据需求选择合适的定位方式。例如，在实现悬浮导航栏、固定广告等定位效果时，可以使用固定定位；在实现图片与文本的对齐效果时，可以使用相对定位；在实现弹出层、菜单等遮罩层效果时，可以使用绝对定位等。

22.制作一个访问量很高的大型网站，你会如何来管理所有CSS文件,js 与图片

涉及到人手、分工、同步

（1）先期团队必须确定好全局样式，编码模式等

（2）编写习惯必须一致

（3）标注样式编写人，各模块都及时标注（标注关键样式调用的地方）

（4）页面进行标注

（5） Css与html分文件夹并行存放，命名都要统一

（6） Js分文件夹存放，命名以该JS功能为准英文翻译

（7）图片采用整合的.png格式文件使用，尽量整合在一起，方便将来的管理。

猿人啊兴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS面试题

CSS渲染层合成（compositing）是浏览器中一种优化渲染性能的技术。该技术允许浏览器在页面中叠加多个渲染层，并将它们组合成最终的呈现结果，从而提高渲染性能和减少页面闪烁等现象。在CSS渲染层合成中，每个渲染层都是由一个或多个HTML元素、CSS样式和相关属性组成的。浏览器将这些渲染层作为平面层根据z-index值按照顺序堆叠在一起，从而形成最终的呈现结果。浏览器在创建新的渲染层时，通常会遵循以下几个步骤：根据DOM树和CSS规则生成初始渲染树（Render Tree）。
复制链接

扫一扫