前端面试题-CSS

文章目录

1、盒子模型

普通盒子（W3C）：box-sizeing：content-box；盒子宽度 = content + padding + border + margin
怪异盒子（IE）：box-sizeing：border-box；盒子宽度 = content + margin（padding 和 border 都会计算在 content 内部）

2、BFC

Block Formatting Context ：块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响;

触发条件:

根元素，即HTML元素
定位元素 position: absolute/fixed
行内块元素 display的值为inline-block、table、flex、inline-flex、grid、inline-grid
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden

BFC 与普通文档流的区别
1、普通文档流：
浮动元素脱离文档流，高度不计算在父元素中；
非浮动元素覆盖浮动元素位置；
子元素 margin 上下值传递给父元素；
相邻两个元素上下的 margin 重叠（两个都为正数以最大的为准、两个都为负数以绝对值最大为准、一正一负则是两者相加之和）；

2、BFC
浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠

规则:

1、属于同一个 BFC 的两个相邻元素垂直排列
2、属于同一个 BFC 的两个相邻元素垂直方向上的的 margin 会发生重叠
3、BFC 的区域不会与外部 float 的元素区域重叠，浮动元素在下方；
4、计算 BFC 的高度时，浮动子元素也参与计算
5、文字层不会被浮动层覆盖，环绕于周围

应用:

阻止margin重叠
防止父元素高度塌陷
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

3、清除浮动方式

清除浮动主要为了解决父级元素因为子级浮动引起内部高度塌陷的问题
1、父级div定义height
2、子元素结尾处加空div标签clear:both
3、父级div定义伪类:after设置clear:both
4、父级div定义overflow:hidden
5、父级div也浮动，需要定义宽度
6、IE浏览器设置父元素 zoom:0

4、脱离文档流的方式

float：left、right；
position：absolute、flexed；

1、浮动元素脱离文档流，类似于 inline-block，非浮动元素会占据浮动元素位置，只不过非浮动元素内的文字会环绕在浮动元素周围，不会被覆盖；
2、定位元素脱离文档流，会覆盖正常元素；

5、层叠上下文的顺序

Z轴上面不同元素的图层：

background/border —— z-index 为负 —— 块级元素 —— 浮动元素 —— 行内元素 —— z-index为0 —— z-index 为正

6、左边固定（100px）右边自适应布局

1、左侧固定宽度，右侧flex自适应
2、左侧左浮动，右侧设置宽度100%，占据左侧普通流位置
3、左侧左浮动，右侧设margin-left等于左侧宽度，右侧通过 calc(100% - 100px)计算宽度
4、左侧绝对定位（absolute），右侧宽度100%
5、左侧绝对定位（absolute），右侧通过 calc(100% - 100px)计算宽度
6、左侧左浮，右侧右浮动，右侧通过 calc(100% - 100px)计算宽度
7、都左浮动，右侧通过 calc(100% - 100px)计算宽度

7、水平居中布局

1、flex：设置 align-item、just-content 为 center；
2、绝对定位：上下左右为 0，margin：auto；
3、绝对定位，上左 50%，transform: translate(-50%,-50%);
4、行内元素：line-height + text-align；
5、知道内部元素宽高：绝对定位，左右 50%，margin左，左上负的宽高一半；
6、父元素宽高确定，display：table-cell，vertical-align: middle;text-align: center;

8、CSS样式叠加的权重

如果多个样式有重合，浏览器会根据权重的大小进行样式覆盖

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、class 类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

9、link与@import的区别

link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式
link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。
@import 老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题
使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的

10、css3 新特性

CSS 是层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观；CSS3 是向后兼容；
1、新增选择器
在这里插入图片描述
2、新样式
边框阴影：box-shadow
边框图片：border-image
圆角边框：border-radius
背景的一些属性：background-origin、background-size
文字效果：word-wrap、text-shadow
颜色：rgba
3、transition 过渡
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
4、transform 转换：旋转，缩放，倾斜或平移给定元素
5、animation 动画
6、渐变：两个颜色之间平稳的过渡
7、布局：Flex弹性布局、Grid栅格布局
8、媒体查询 @media

11、有哪些方式（CSS）可以隐藏页面元素

opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

12、说说em/px/rem/vh/vw/%区别

px：为绝对单位，px的大小和元素的其他属性无关，页面按精确像素展示
em：是相对长度单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
%：相对于父元素的宽度比例，对于定位元素来说是其参考父元素
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vw：屏幕宽度的1%
vh：屏幕高度的1%

13、flex布局那些属性，什么作用

2、元素属性
order：排列顺序。数值越小，排列越靠前，默认为0
flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis：在分配多余空间之前，项目占据的主轴空间；浏览器根据这个属性，计算主轴是否有多余空间
flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self：对齐方式，可覆盖align-items属性（auto | flex-start | flex-end | center | baseline | stretch）

参考：https://blog.csdn.net/s2765504026/article/details/123607546

14、flex:1 是那三个属性的简写

flex 实际上是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写；
flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
flex-shrink: 1 ：该属性默认为 1 ，如果空间不足，元素缩小。
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间；

15、LVHA 的解释

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

1、当鼠标滑过a链接时，满足:link和:hover两种状态；
2、当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态；
3、当链接访问过时，情况基本同上，只不过需要将:link换成:visited；

因此得出LVHA这个顺序

16、calc函数

calc函数是css3新增的功能，可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值；

width: calc( 100% -100px);

1、calc()函数支持 “+”, “-”, “*”, “/” 运算;
2、对于不支持 calc()的浏览器，整个属性值表达式将被忽略

17、伪类和伪元素的区别

伪类：用于向某些选择器添加特殊的效果，比如：:hover、:link、:active、:focus、:first-child 等；

伪元素：用于将特殊效果添加到某些选择器中；不存在在DOM文档中，是新创建的虚拟元素，代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于DOM树中；比如：::before、::after、::first-line、::fiest-letter 等；

区别：
1、根本区别在于是否创造了新的元素，这个新创造的元素就叫伪元素；
2、使用：伪类用单冒号，伪元素用双冒号；
3、伪类可以同时有多个，伪元素同时只能有一个；
4、伪类作用整个元素，伪元素作用于元素的一部分；

18、CSS加载问题

css加载不会阻塞DOM树的解析;
css加载会阻塞DOM树的渲染；
css加载会阻塞后面js语句的执行

19、三行隐藏的方法

使用 webkit 扩展属性实现多行隐藏

.text{
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;//换行
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;//限制行数，需要配合上面两个webkit一起使用
}

20、一行隐藏的方法

.text{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;//强行一行展示
	width: 800px;
}

21、页面置灰

body {
    
    
	filter: grayscale(100%); /* 百分比或者 0~1 */
}

22、 CSS中可继承的属性

可继承的只有：颜色、文字、字体间距、行高对齐方式，列表样式；
1、所有元素可继承：visibility和cursor。
2、内联元素可继承：
letter-spacing
word-spacing
white-space
line-height
color
font
font-family
font-size
font-style
font-variant
font-weight
text-decoration
text-transform
direction
3、块状：text-indent和text-align。
4、列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

23、inline 和 inline-block区别

inline：设置 width、height 无效；margin和padding属性，水平方向的有效，竖直方向的无效；
inline-lock：作为block对象呈现，行内展示，可以设置width、height、margin、padding；

24、display:inline-block 什么时候不会显示间隙？

1、移除空格（写 div 的时候，div在同一行）
2、使用margin负值
3、使用font-size:0：元素设置高度，不然会不显示
4、letter-spacing
5、word-spacing

25、position: fixed什么时候会失效

Chrome浏览器/FireFox浏览器下，元素的祖先元素设置了transform属性则会导致固定定位属性失效；

26、重绘和回流

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

回流必将引起重绘，而重绘不一定会引起回流。

如何最小化重绘和回流：

避免频繁使用 style，而是采用修改class的方式。
将动画效果应用到position属性为absolute或fixed的元素上。
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
对于 resize、scroll 等进行防抖/节流处理。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是CPU加速。

27、will-change

是CSS3新增的标准属性，它的作用很单纯，就是"增强页面渲染性能"，当我们在通过某些行为触发页面进行大面积绘制的时候，浏览器往往是没有准备，只能被动的使用CUP去计算和重绘，由于事先没有准备，对于一些复杂的渲染可能会出现掉帧、卡顿等情况。而will-change则是在真正的行为触发之前告诉浏览器可能要进行重绘了，相当于浏览器把CUP拉上了，能从容的面对接下来的变形。

使用：
whil-change: scroll-position; 即将开始滚动
will-change: contents; 内容要动画或者变化了
will-transform; transform相关的属性要变化了(常用)

注意：

will-change虽然可以开启加速，但是一定要适度使用
开启加速的代价为手机的耗电量会增加
使用时遵循最小化影响原则，可以对伪元素开启加速，独立渲染
可以写在伪类中，例如hover中，这样移出元素的时候就会自动remove掉will-change了
如果使用JS添加了will-change，注意要及时remove掉，方式就是style.willChange = ‘auto’

28、css像素、设备像素、设备独立像素、dpr、ppi区别

1、CSS像素
px是一个相对单位，相对的是设备像素；一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素；
2、设备像素
又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已；从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt；
3、设备独立像素
与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素；也可以理解成分辨率；（比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位）；一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰；
4、dpr
设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取；dpr = 设备像素/设备独立像素；（当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素）
5、ppi
每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

29、移动端不同设备根字体大小

如果没有人为取改变根元素字体大小的话，默认是1rem = 16px；根元素默认的字体大小是16px

30、响应式布局

头部必须有meta声明viewport；
1、媒体查询
可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局

@media screen (min-width: 375px) and (max-width: 600px) {
    
    body: {
    
    font-size: 18px}}

2、百分比
浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果；（布局的复杂度比较大，不建议使用）
3、vw/vh
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一
4、rem
rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px；可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值；

31、谷歌浏览器设置字体小于12px

1、zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

p{
    
    
	font-size:12px;
	zoom:0.8
}

2、transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

transform:scale(0.8);

使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

32、css 预编译，区别

css 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用；预处理器便是这些问题的解决方案；

预处理器扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便；本质上，预处理是Css的超集；最终会通过解析器，编译生成对应的 Css 文件；

常见的有 sass 、less 、stylus；

优势：
1、嵌套
三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同；区别只是 Sass 和 Stylus 可以用没有大括号的方式书写；
2、变量：为 Css 增加了一种有效的复用方式；
less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开；
sass声明的变量跟less十分的相似，只是变量名前面使用$开头；
stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=。在stylus中我们不建议使用@符号开头声明变量；
3、作用域
sass中不存在全局变量，所以，在sass中最好不要定义相同的变量名；
less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止；
4、混入
在less中，混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明；
Sass声明mixins时需要使用@mixin，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式；
stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接；
5、模块化：将Css代码分成一个个模块
都可以只有 @import 引入一个 css 模块；

33、Canvas和svg的区别

1、canvas是H5提供的新绘图方法，svg很早就出现了；
2、canvas基于像素点，是位图，放大缩小会失真，svg是用html标签绘制，放大缩小不会失真；
3、canvas在js里面绘制，svg在html里面；
4、canvas支持颜色比svg多；
5、canvas无法修改已经绘制的图像，svg可以获取到标签进行修改；

34、viewport

width 设置viewport宽度，为一个正整数，或字符串‘device-width’；device-width 设备宽度
height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
user-scalable 是否允许手动缩放

35、1px问题

1、媒体查询利用设备像素比缩放，设置小数像素（小数像素兼容差）
2、设置border-image（需要精确的图片，圆角可能模糊）
3、background-image渐变（无法实现圆角）
4、box-shadow（没有圆角问题，缺点是颜色不好控制）
5、transform：scale（0.5）（比较推荐）
6、使用viewport+rem实现（较常用）

36、优雅降级和渐进增强（css）

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（高版本->低版本）
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（低版本->高版本）

37、display: none;与visibility: hidden;的区别

它们都能让元素不可见

区别：
1、display:none：会让元素完全从渲染树中消失，不占据任何空间；visibility: hidden：不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见；
2、display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成；visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式；
3、修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

38、position定位有哪些方式，有什么不同

static：元素默认状态，可以将设置position的元素回到文档流中，对设置 z-index 的元素无效；
relative：相对定位，不脱离文档流，并按照文档流中的顺序进行排列；一般作为绝对定位的定位父元素；
absolute：绝对定位，脱离文档流，参照物为第一个定位祖先或根元素；
fixed：固定定位，脱离文档流，以浏览器可视窗口作为参照物；
sticky：不脱离文档流，仍然保留元素原本在文档流中的位置；当元素在容器（相对定位）中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

39、为什么要初始化CSS样式?

不同浏览器标签的默认值是不一样的，不初始化，不同浏览器渲染出来的效果会有差异；

40、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

41、rgba()和opacity的透明效果有什么不同

rgba()和opacity都能实现透明效果；
但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

42、等高布局

1、负的 margin：设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom；（所有布局元素）
2、table元素中的table-cell元素默认就是等高的：display：table-cell；（所有布局元素）
3、flex：子元素都设置 flex：1
4、absolute：设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果

43、一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方案1：
.sub { height: calc(100%-100px); }
方案2：
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }
方案3：
.container { display:flex; flex-direction:column; }
.sub { flex:1; }

44、正则表达式修饰符

i：不区分大小写
g：全局匹配
m：多行匹配
s：默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 之后, . 中包含换行符 \n

45、offsetWidth、clientWidth、scrollWidth

常规盒子：
offsetWidth：width + padding + border
clientWidth：width + padding
scrollWidth：padding + 内容实际尺寸

怪异盒子：
offsetWidth：width （因为怪异盒子，width 包含padding + border）
clientWidth：width - border
scrollWidth：内容实际尺寸 - border

注意

1、在网页中的应该使用偶数的字体，更容易和 web 设计的其他部分构成比例关系