前端面试题-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布局那些属性，什么作用

1、容器属性
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）
align-content：多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用（flex-start | flex-end | center | space-between | space-around | stretch）

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 设计的其他部分构成比例关系