CSS面试题

1.说说flexbox（弹性盒布局模型）,以及适用场景？

属性：flex-direction flex-wrap flex-flow align-items align-content

flex-direction

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

nowrap（默认值）：不换行
wrap：换行，第一行在下方
wrap-reverse：换行，第一行在上方

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等

align-items

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

2.让Chrome支持小于12px 的文字方式有哪些？区别？

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化
-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

3.css选择器有哪些? 优先级? 哪些属性可以继承?

选择器

id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
伪类选择器

优先级

内联 > ID选择器 > 类选择器 > 标签选择器

继承属性

字体系列属性
文本系列属性
元素可见性
表格布局属性
列表属性
引用
光标属性
继承中比较特殊的几点：
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的

无继承的属性

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

4.说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

CSS像素

CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位px是一个相对单位，相对的是设备像素（device pixel）
一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素
CSS像素又具有两个方面的相对性：
在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）
在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）
在页面进行缩放操作也会 引起css中px的变化，假设页面放大一倍，原来的 1px 的东西变成 2px，在实际宽度不变的情况下1px 变得跟原来的 2px 的长度（长宽）一样了（元素会占据更多的设备像素）
假设原来需要 320px 才能填满的宽度现在只需要 160px
px会受到下面的因素的影响而变化：
每英寸像素（PPI）
设备像素比（DPR）

设备像素

设备像素（device pixels），又称为物理像素
指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已
从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt
类似于 密度

设备独立像素

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素在javaScript中可以通过window.screen.width/ window.screen.height 查看
比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素
至于 1 个虚拟像素被换算成几个物理像素，这个数值我们称之为设备像素比，也就是下面介绍的dpr

dpr

dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取

dpr = 设备像素 / 设备独立像素

当dpr为3，那么1px的CSS像素宽度对应3px的物理像素的宽度，1px的CSS像素高度对应3px的物理像素高度

ppi

ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

总结

无缩放情况下，1个CSS像素等于1个设备独立像素
设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变
PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）
在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素
设备像素比（dpr） = 设备像素 / 设备独立像素
每英寸像素（ppi），值越大，图像越清晰

5.css盒模型的理解

它将每个元素看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。盒模型有两种类型：标准盒模型和IE盒模型。标准盒模型的宽度和高度只包括内容区域，而IE盒模型的宽度和高度包括了内容区域、内边距和边框。

6.css定位的理解

CSS中有多种定位方式，包括相对定位、绝对定位、固定定位和粘性定位。

• 相对定位（relative）：相对于元素在文档流中的原始位置进行定位，通过设置top、right、bottom、left属性来调整元素的位置。
• 绝对定位（absolute）：相对于最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。可以通过设置top、right、bottom、left属性来调整元素的位置。
• 固定定位（fixed）：相对于浏览器窗口进行定位，元素的位置在滚动时不会改变。可以通过设置top、right、bottom、left属性来调整元素的位置。
• 粘性定位（sticky）：相对定位和固定定位的结合，元素在滚动到特定位置时变为固定定位，否则为相对定位。可以通过设置top、right、bottom、left属性来调整元素的位置。

7.css权重

CSS权重是指CSS样式表中不同选择器对样式应用的优先级。当多个选择器同时应用到同一个元素上时，权重决定了哪个样式规则将被应用。
CSS权重可以通过以下规则进行计算：

内联样式（inline styles）的权重最高，为1000。
ID选择器的权重为100。
类选择器、属性选择器和伪类选择器的权重为10。
元素选择器和伪元素选择器的权重为1。

通用选择器（*）、关系选择器（+、>、~）和否定伪类选择器（:not）的权重为0。
对于给定的选择器，可以通过将其所有权重相加来计算其最终权重。选择器权重越高，其样式规则越优先应用。
当两个或多个选择器具有相同的权重时，后声明的样式规则将覆盖前面声明的规则。如果两个选择器的权重完全相同，则根据CSS的“就近原则”来决定最终应用哪个样式规则。

需要注意的是，内联样式将直接应用于元素，因此具有最高的优先级。但是，为了保持代码的可维护性和可扩展性，建议尽量避免过多使用内联样式，而是将样式规则定义在CSS样式表中。

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

在CSS中，display: none和visibility: hidden都可以用来隐藏元素，但它们之间有一些重要的区别。

display: none会完全从文档流中移除元素，即该元素不会在页面上占据任何空间。相反，visibility: hidden只是将元素隐藏起来，但仍然占据着原来的空间。

使用display: none隐藏元素时，其子元素以及后代元素也会被隐藏，不会显示在页面上。而使用visibility: hidden隐藏元素时，元素的子元素和后代元素仍然保持可见状态。

当元素被隐藏时，使用display: none会触发文档重新布局和渲染，而使用visibility: hidden不会触发重新布局和渲染，因此对性能的影响较小。

当需要动态地显示或隐藏元素时，可以使用JavaScript来切换display属性的值，而切换visibility属性的值则不会导致文档重新布局。

总的来说，display: none适用于完全从页面中移除元素并且不占据空间的情况，而visibility: hidden适用于隐藏元素但仍保留原来的空间和子元素的情况。选择使用哪种方法取决于具体的需求和效果。

9.Sass和Less的区别

Sass和Less都是CSS预处理器，它们在原生CSS的基础上提供了一些额外的功能和语法糖。两者的主要区别在于语法和功能上有一些不同：
语法：Sass使用缩进式的语法，而Less使用类似于CSS的大括号和分号的语法。Sass的语法更加简洁，但需要严格的缩进规则。Less的语法更接近原生CSS，但可能需要更多的分号和大括号。

功能：Sass提供了更多的功能，如嵌套规则、变量、混合（mixin）、继承（extend）等。它还有一个功能强大的函数库和控制流语句。Less的功能较少，但也提供了类似的嵌套、变量和混合功能。