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的功能较少,但也提供了类似的嵌套、变量和混合功能。