CSS面试

2.CSS面试2022-08-03

一、基础

1、可继承属性

1.1、字体系列属性
font-family
font-size
font-weight（normal、bold）
font-style（normal、italic）
1.2、文本系列属性
text-align：文本水平对齐
text-indent：文本缩进
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
1.3、元素可见性
visibility：控制元素显示隐藏
1.4、列表布局属性
list-style：列表风格，包括list-style-type、list-style-image等
1.5、光标属性
cursor：光标显示为何种形态

2、

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

3、隐藏元素的方法有哪些

display：none
渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置
visibility：hidden
元素在页面中仍占据空间
opacity: 0
将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间
position: absolute
通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值
来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path
使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置
transform: scale(0,0)
将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置

4、

link和@import的区别
两者都是外部引用CSS的方式，它们的区别如下：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

5、

transition和animation的区别
transition是过渡属性
强调过渡，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性
它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

6、CSS3中有哪些新特性

6.1、新增选择器
属性选择器
结构伪类选择器
伪元素选择器
6.2、2D转换：transform
位移：transform：translate（100px，100px）
缩放：transform：scale（1，1）
旋转：transform：rotate（45deg）
6.3、3D转换：transform
位移：transform：translate（100px，100px，100px）
旋转：transform：rotate（0，0，1，45deg）
3D呈现：transform-style
flat：子元素不开启3d空间
preserve-3d：子元素开启3d空间
透视：perspective（单位px）
人的眼睛到屏幕的距离；近大远小。
6.4、动画
@keyframes 动画名称 {0% {width：100px} 100% {width：200px}}
6.5、过渡：transition 谁过度给谁加
6.6、其他特性
背景渐变background：linear-gradient（top left，red，pink）
图片模糊：filter：blur（5px）数值越大越模糊
calc函数：width：calc（100% - 80px）
圆角：border-radius
文字特效（text-shadow）
文字渲染（text-decoration）

7、对 CSSSprite 的理解

CSSSprite（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
优点
利用CSS Sprite能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprite最大的优点；
CSS Sprite能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
缺点
在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
CSSSprite在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
维护方面：CSS Sprite在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

8、

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
物理像素：指的是设备屏幕实际拥有的像素点。一个设备生产出来，它的像素就已经确定了，iphone6的分辨率是375px * 667px。
逻辑像素：是我们进行CSS样式设计时的一种抽象单位，它可以自动在不同设备之间调节。
像素密度/设备像素比：设备的物理像素 / CSS像素
对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
也就是说当我们需要一个50px*50px的图片的时候，放到手机上会显示100*100的，图片放大会模糊，可以准备一个原本就是100*100的图片，把他缩小大50*50，那么在手机上即使放大，也不会出现模糊的问题。移动端开发时需要用到@3x, @2x这种图片目的是使图片分辨率高一些，不失真

9、CSS 优化和提高性能的方法有哪些？

9.1、加载性能
css压缩：将写好的css进行打包压缩，可以减小文件体积。
css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。
减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
9.2、选择器性能
关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
尽量少的去对标签进行选择，而是用class。
尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
9.3、渲染性能
慎重使用高性能属性：浮动、定位。
尽量减少页面重排、重绘。
去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
属性值为0时，不加单位。
属性值为浮动小数0.**，可以省略小数点之前的0。
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
不使用@import前缀，它会影响css的加载速度。
选择器优化嵌套，尽量避免层级过深。
css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
9.4、可维护性、健壮性
将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
样式与内容分离：将css代码定义到外部css中。

10、CSS预处理器/后处理器是什么？为什么要使用它们？

10.1、预处理器：less，sass，stylus，用来预编译。sass或者less，增加了css代码的复用性。层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
10.2、后处理器，如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
10.3、使用原因
结构清晰，便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承
完美的兼容了CSS代码，可以应用到老项目中

11、对 CSS 工程化的理解

11.1、CSS 工程化是为了解决以下问题
宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
编码优化：怎样写出更好的 CSS？
构建：如何处理我的 CSS，才能让它的打包结果最优？
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
11.2、以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践
预处理器：Less、 Sass 等；
重要的工程化插件： PostCss；
Webpack loader 等。

12、如何判断元素是否到达可视区域

window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

二、定位

1、对BFC的理解，如何创建BFC

1.1、BFC理解
Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
1.2、如何创建BFC
● 根元素：body；
● 元素设置浮动：float 除 none 以外的值；
● 元素设置绝对定位或者固定定位：position (absolute、fixed)；
● display 值为：inline-block、table-cell、table-caption、flex等；
● overflow 值为：hidden、auto、scroll；
1.3、BFC特点
● 垂直方向上，自上而下排列，和文档流的排列方式一致。
● 在BFC中上下相邻的两个容器的margin会重叠
● 计算BFC的高度时，需要计算浮动元素的高度
● BFC区域不会与浮动的容器发生重叠
● BFC是独立的容器，容器内部元素不会影响外部元素
● 每个元素的左margin值和容器的左border相接触
1.4、BFC应用
解决margin的重叠问题
由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局
可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

三、页面布局

1、对Flex布局的理解及其使用场景

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。
容器属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，是否换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义单行项目在侧轴上如何对齐。
align-content属性定义了多行项目在侧轴的对齐方式。如果项目只有一行，该属性不起作用。
项目属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
flex:1 表示什么
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。flex:1 表示 flex: 1 1 auto，它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

四、场景使用

1、实现一个扇形、圆

原理
用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形
扇形：
div{
border: 100px solid transparent;
width: 0;
height: 0;
border-radius: 100px;
border-top-color: red;
}
圆：
div {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
}
2、画一条0.5px的线

2.1、采用transform: scale()的方式
transform: scale(0.5,0.5);
2.2、移动端：采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

3、如何解决1px问题

3.1、问题
1px 问题指的是：在一些 Retina屏幕的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。
3.2、原因
window.devicePixelRatio = 设备的物理像素 / CSS像素。
打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是2：
这就意味着设置的 1px CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。
3.3、解决方案
a、直接写 0.5px
目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容。
b、伪元素先放大后缩小
思路是先放大、后缩小：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。
这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。
c、思路三：viewport 缩放来解决
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。