前端CSS面试题（重要！！！）（一）
文章目录
-
- 1.css选择器有哪些？
- 2.如何计算 CSS 的优先级?
- 3.CSS 中可继承与不可继承属性有哪些
- 4.CSS 中 display 属性的值及其作用
- 5.怎样利用CSS 隐藏元素?
- 6.使用 link和 @import引用 CSS 的区别
- 7.transition（过渡）和animation（动画）的区别
- 8.为什么有时候用 translate 来改变位置而不是定位
- 9.重排和回流
- 10.CSS3 中的 transform 有哪些属性?
- 11.display:none与visibility:hidden 的区别
- 12.对盒模型的理解
- 13.为什么 li与 li 元素之间有看不见的空白间隔，如何解决？
- 14.CSS3 中有哪些新特性?
- 15.什么是替换元素?说说其概念及计算规则
- 16.CSS Sprite
1.css选择器有哪些？
基础选择器:类型选择器、类选择器(.)、ID选择器(#)、通配符选择器(*)
层次选择器:后代选择器(空格)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)
属性选择器:如[attr=value]
伪类选择器:如:hover、:nth-child()
伪元素选择器:如::before、::aften
2.如何计算 CSS 的优先级?
优先级从高到低：！important关键字，内联选择器，id选择器，类选择器，属性选择器，伪类选择器，元素选择器，伪元素选择器，通配符选择器，后代选择器，子选择器
计算方式：给每个选择器分配权重，比如说，！important+10000，内联样式+1000，id选择器+100，类，属性，伪类选择器+10，元素，伪元素+1，其他的都是0（相邻兄弟选择器，子选择器，后代选择器，通配符选择权），权重高的优先级高，优先级相同，后面的样式会把前面的样式层叠
继承得到的样式的优先级最低
3.CSS 中可继承与不可继承属性有哪些
可继承属性：可以从父元素传递给子元素，主要有：文字和字体相关的属性，布局相关的属性，如：
clolr，font，letter-spacing，line-height，text-align，text-indent，text-transform，visibility，white-sapce，word-spacing
不可继承属性：不可以从父元素传递给子元素，只应用于定义他们自身
background，border，display，height，margin，padding，width，position，top，right，bottom，left，z-index，float，clear
4.CSS 中 display 属性的值及其作用
display用于定义元素的显示，即元素应该如何在页面上布局和显示
display常见的属性值：none元素不显示，且不占据空间，block元素显示为块级，占据一整行，inline-block元素显示未行内块，不会换行，可以设置宽高，
flex将元素显示为弹性容器，子元素使用弹性布局
grid将元素显示未网格容器，子元素使用网格布局
flex布局：
display: flex;将容器设为弹性容器。
flex-direction: row;设置主轴方向，可以设置属性值为：row,column,row-reverse,column-reverse
justify-content: center; 设置主轴方向上的对齐方式。设置属性值为：为flex-start,flex-end,center,space-between,space-around
align-items: center;设置交叉轴方向上的对齐方式。可以设置属性值为flex-start，flex-end，center，space-between，space-around
grid布局：
display: grid;将容器设为网格容器.
grid-template-columns: repeat(3,1fr);定义3列，宽度相等。
5.怎样利用CSS 隐藏元素?
1.display：none；元素不显示，也不占据空间，用于完全移除
2.visibility：hidden；元素不可见，占据空间，用于保留布局空间
3.设置透明度opacity：0；但仍占据空间且可以交互
4.position：absolution；left：-999px；将元素移除可视区域，用于临时将元素从可视区域移除
5.height：0；overflow：hidden；将元素高度设为0，并隐藏其元素，适用于需要在动画中隐藏和显示元素的情况
6.transform：scale（0）；将元素缩放到不可见，适用于通过变换效果隐藏元素的情况
6.使用 link和 @import引用 CSS 的区别
link和@import都可以引入外部样式
link写在html文档的< head> 标签中，@import写在css文件或< style>标签内
link标签在页面加载时立即加载样式表，@important在加载包含他的css文件后加载
link支持所有主流浏览器，@important是css3新增方法，具有浏览器兼容性问题支持IE5以上和现代所有浏览器
link加载并行进行，速度块，@important加载顺序依赖，速度较慢
link可以通过js操作控制，@important不易通过js操作控制
link和@important的权重并不直接比较，因为他们的加载机制不同，link在页面立即加载，
@important是在加载包含他的css文件后加载，权重的高低取决于加载顺序，而不是引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link vs Import</title>
<style>
@import url("styles.css");
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
7.transition（过渡）和animation（动画）的区别
transition和animation都用于在元素样式改变时实现平滑过渡
transition是用于定义元素属性变化时的过渡效果，需要触发某个事件(如悬停，点击)来启动，简单来说，transition只能在2个状态之间转换，只能从一种状态过渡到另一种状态
animation有更多的控制选项，允许定义关键帧，实现复杂动画。不需要触发条件即可自启动。更灵活，适用于复杂动画效果
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: blue;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: example 5s infinite;
}
8.为什么有时候用 translate 来改变位置而不是定位
translate是通过CSS transform实现的，他操作的是元素的渲染层，而不是布局层，这样一来，浏览器就不会因为位置改变而重新计算布局而导致重排（回流），提高渲染性能
9.重排和回流
reflow重排（回流）：指浏览器在DOM发生变化时重新计算元素的位置和几何形状，当使用定位元素改变元素位置时，就会触发回流，在页面复杂时非常消耗性能
repaint重绘：指元素的外观发生变化（比如说颜色，边框）就需要重新绘制这些元素，但不涉及重新计算布局，重绘开销较小
10.CSS3 中的 transform 有哪些属性?
主要包含以下几个子属性：
1.translate:用于移动元素的位置,
2.scale:用于缩放元素的尺寸
3.rotate:用于旋转元素。
4.skew:用于扭曲元素,
5.matrix:可以实现平移、缩放、旋转和扭曲。它接受6个参数，用于表示 2D 变换的矩阵。
11.display:none与visibility:hidden 的区别
都可以控制元素的显示状态
display：none可以使元素从页面中移除该元素，元素不占据空间，元素布局会发生改变，会导致重排（回流），不能直接使用css的动画过渡实现元素的隐藏和显示，因为display属性不能过渡，需要要过改变opacity，height来达到该效果；该元素不在文档流中，用户不能与这个元素进行任何交互
visibility：hidden：将元素设置为不可见，元素仍占据空间，元素布局不会变化，会导致重绘，可以与css的动画和过渡效果结合使用，平滑地使元素从不可见到可见，或从可见到不可见；虽然元素不可见，但仍在文档流中，用户不能看到，但仍能通过光标和键盘交互
12.对盒模型的理解
盒模型用于描述在网页布局中的空间占用，盒模型包括：content，padding，border，margin
盒模型分为：标准盒模型和怪异盒模型
标准盒模型：内容宽度只有content部分，padding，border，margin会额外增加到总宽度和高度，用于做精确的尺寸和间距控制，适用于大多数场景
怪异盒模型：内容宽度=content+padding+border，也就是说，设置的宽度就包含了padding和border，适用于处理多层嵌套的布局，调整和理解整体宽度和高度
可以使用css的
box-sizing：border-box；IE盒模型；
box-sizing：content-box；标准盒模型
13.为什么 li与 li 元素之间有看不见的空白间隔，如何解决？
在 HTML 中， li 元素之间的空白间隔是由于 HTML 标签之间的空白字符(如空格、换行等)被渲染为一个空格字符。这是因为 HTML 中的空白字符(如空格、Tab、换行符)会被浏览器解释为一个正常的空白符。
要解决这个问题，有几个常用的办法!
1)删除 HTML 代码中的空白字符，如空格，换行符，包括标签之间的空格和换行，可读性差，不推荐。
2)使用负的 margin 来压缩这些空白间隔，适合临时调整
3)使用CSS的 display 属性，将 li 元素设置为 display:inline-block;,并设定父元素的字号为零，然后再恢复子元素的字号。最常用的解决方案，因为他可以在保持代码可读性的情况下去除空间，但是需要额外的css定义
4)使用 flex 布局，flex布局不会受到空白字符的影响
14.CSS3 中有哪些新特性?
1.盒子模型(Box Model):包括 box-sizing 属性，可以更好地控制元素的尺寸和边框。
2.背景与边框(Backgrounds and Borders):如多重背景图片、边框图片(border-image)等。
3.文本效果(Text Effects):包括文本阴影(text-shadow)和换行(word-wrap)
4.变形(Transforms)和过渡(Transitions):可以使元素在用户交互时动态地改变样式。
5.动画(Animations):使用 @keyframes 规则，可以创建复杂的动画效果。
6.多列布局(Multi-column Layout):使得文本内容可以像报纸一样分为多列显示。
7.Flex布局和 Grid 布局:提供更强大和灵活的布局机制。
8.媒体查询(Media Queries):使得网页设计可以响应不同设备的尺寸和特性。
9.自定义属性(Custom Properties，也叫 CSS 变量):可以在样式表中定义变量，提高可维护性和重用性。
10.伪类和伪元素:如 :nth-child()和 ::before 等，更精确地选择和操作元素。
15.什么是替换元素?说说其概念及计算规则
替换元素是指在CSS中，元素的内容不是由CSS所控制的，而是由外部资源来决定的
例如：< img>嵌入外部图片
< video>嵌入外部视频、
< iframe>在一个文档中嵌入另一个html文档，
< embed>嵌入外部程序或插件，
< object>嵌入外部对象资源。
这类元素的内容及尺寸通常是由其自身的属性或外部资源来决定，浏览器根据资源的固有尺寸来渲染这些元素。
他们大小的计算规则：替换元素往往有一个固有尺寸，也就是资源本身的宽度和高度，比如图片的分辨率。他们的宽度或高度可以通过css或html属性明确设置替换元素的宽高。（注意css中的宽高是用来覆盖原来固有尺寸的），
替换元素通常默认使用内容盒模型content-box，也就是box-sizing设置为content-box，在这个模型下，宽度和高度不包括内边距和边框；
也可以通过css规则对替换元素进行设置样式，比如说边框，内边距，外边距
注意事项：
替换元素在响应式设计中经常需要使用，如对图片使用百分比的宽高设置，以便在不同设备上适应窗口尺寸。
兼容性问题:老旧浏览器对某些替换元素的支持可能存在兼容性问题，需要做额外的处理。
替换元素和非替换元素的对比：
控制内容的不同:替换元素的内容是外部资源，内容不是由HTML本身的标签和文本定义的。而非替换元素由标签和文本内容组成，完全受CSS控制。
固有尺寸:替换元素有固有尺寸，而非替换元素的尺寸完全受CSS控制。
16.CSS Sprite
精灵图（雪碧图）核心思想就是把多个小图标合并到一张大图中，通过background-position属性来控制显示具体的图标部分
优点：这种技术有利于网页性能优化，减少http请求次数，提高页面加载速度
应用场景：通常应用在较多的小图标被频繁使用的地方，
缺点：如果是大图，或者背景图，使用css sprites并不合适，而且如果精灵图上的图标需要频繁更新，每次更新就需要更新整个精灵图，维护成本比较高，而且他的background-position属性精度要非常准确
.icon {
background-image: url('sprites.png');
background-repeat: no-repeat;
}
.icon-home {
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon-user {
width: 32px;
height: 32px;
background-position: -32px 0;
}