前端八股文(二)CSS 持续更新中。。。

1.css3新增

1. 新增属性选择器、伪类选择器

2. 新增text-shadow、box-shadow、border-radius

3. 新增transform、transition、动画@keyframes、animation

4. 新增flex、grid布局，媒体查询@media

5. 新增box-sizing：border-box怪异盒模型 content-box标准盒模型

2.说一说盒模型

• 标准盒模型：box-sizing：content-box

content宽高不包括padding和border，实际宽高=content宽高+padding+border

• 怪异盒模型：box-sizing：border-box

content宽高包含padding和border

3.css选择器和优先级

1. 行内样式 style：优先级为 1,0,0,0。

2. ID 选择器 #id：优先级为 0,1,0,0。

3. 类选择器、属性选择器、伪类选择器（如 .class、[type="text"]、:hover）：优先级为 0,0,1,0。

4. 元素选择器、伪元素选择器（如 div、p::before）：优先级为 0,0,0,1。

5. 通配符 * 和关系符（如后代选择器 、子选择器 > 、兄弟选择器 + ）：优先级为 0,0,0,0。

6. !important 优先级最高，用于覆盖无 !important 的规则。

4.CSS可继承属性和不可继承属性

可继承

• font-weight

• color

• font-size

• line-height

• cursor等

不可继承

• margin、padding、border

• display

• background

• overflow

• width、height

• position等

5.dislpay的属性和作用

属性	作用
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	行内块级元素，默认宽度为内容宽度，可以设置宽高，同行显示
table	块级表格
flex	flex容器布局
none	隐藏元素
inherit	从父类继承display属性

6.隐藏元素的方式

1. display: none

   元素完全从文档流中移除，不占据空间。

   不能触发事件。因为元素被彻底隐藏，点击、悬停等事件都不会生效。

2. visibility: hidden`

   元素隐藏但仍保留在文档流中，占据空间。

   不能触发事件。虽然元素还在文档流中，但 visibility: hidden 会阻止鼠标事件的触发。

3. opacity: 0

   元素的透明度设置为 0，完全透明。

   能触发事件。opacity: 0 只是改变了元素的透明度，元素仍然在页面上，占据空间，且可以接收鼠标事件。

4. z-index: 负值

   通过设置负 z-index，可以将元素放到其他元素的下方。

   视情况而定。如果有其他元素遮盖住它，则不能触发事件；如果没有遮盖，它仍可以触发事件。

5. position: absolute（将元素定位到可视区域以外）

   描述：将元素设置为绝对定位并移出视窗。

   是否能触发事件：不能触发。元素位于可视区域之外，无法被用户看到或与之交互，因此不会触发事件。

7.单行、多行文本溢出（不太熟，没问过

单行

 css 代码解读复制代码overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 溢出用省略号显示whtie-space: nowrap; //规定段落中的文本不进行换行

多行

 CSS 代码解读复制代码overflow:hiddentext-overflow: ellipsis;     // 溢出用省略号显示display:-webkit-box;         // 作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列-webkit-line-clamp:3;        // 显示的行数

8.less和sass的区别？

less和sass都是css预处理器

区别：

编译环境不同：sass是在服务端进行处理的，主要有dart-sass、node-sass；less是通过引入less.js对.less文件进行编译处理的，可以在开发时生成css文件直接打包到生产包内

变量作用域不同：sass的变量是全局作用域、less的变量像是函数作用域

变量定义符不一样：sass是$、less是@

sass可以使用条件语句（if、else、for等）、函数，less不可以

9.link和@import的区别

link：

• 通常放在html文件的head中使用

• 用来加载css文件、icon文件等（通过定义rel属性：stylesheet、icon等

• 会并行加载资源（使用rel:preload会预加载

@import：

• 在css文件顶部声明

• 将样式表引入当前的样式表

• 串行加载，在页面加载完毕后被加载

10.常用css单位有哪些

1. px，像素

2. 百分比%

3. rem：相对于根元素的font-size

4. em：相对于父元素的font-size

5. vw、vh：视图窗口(viewport)占比

11.水平垂直居中

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

 .parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

• 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

 .parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

• 使用**flex布局**，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

 .parent {display: flex;justify-content:center;align-items:center;}

12.flex属性理解

容器属性：

• display: flex;：定义一个弹性容器。

• flex-direction：设置主轴方向（如 row、column、row-reverse、column-reverse）。

• flex-wrap：控制子项换行（如 nowrap、wrap、wrap-reverse）。

• 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）。

子项属性：

• flex-grow：定义子项的放大比例（默认为 0，表示不放大）。

• flex-shrink：定义子项的缩小比例（默认为 1，表示可以缩小）。

• flex-basis：定义子项在主轴上的初始大小（可以是具体值或 auto）。

• flex：简写属性，结合了 flex-grow、flex-shrink 和 flex-basis，默认： flex: 0 1 auto;。

• align-self：允许单个子项覆盖 align-items 的对齐设置。

flex:1表示：flex:1 1 auto，即flex-grow:1，flex-shrink:1，flex-basis:auto

13.对BFC的理解？如何创建一个BFC

bfc：块级格式化上下文，在BFC布局里面的元素不受外面元素影响。

创建BFC条件

• 设置浮动：float有值 且不为空

• 设置绝对定位：position（absolute、fixed）

• overfilow值为：hidden、auto、`scroll

• display值为：inline-block、flex、table-cell、table-caption、等

BFC作用：

• 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题

• 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。

• 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

14.position 常用属性 默认值是什么

• static 默认值，没有定位，元素正常在文档流中显示

• relative 相对定位，相对于原来的位置进行定位，占有原来的体积

• absolute 绝对定位，相对于有定位的父元素、祖先元素进行定位。

• fixed 绝对定位，相对于浏览器窗口

• sticky 粘性定位，基于用户滚动位置

15.画一个三角形

通过设置不同方向边框来实现

 CSS 代码解读复制代码div {width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;}

16.画一条0.5px的线

transform: scale(0.5,0.5);缩放高度为1px的元素0.5倍

17.重绘、重排？如何避免

重排：修改样式导致需要对布局进行重新计算

当一个元素的位置、尺寸等发生改变的时候，浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程叫做重排。一般像页面初次渲染、带有动画的元素、添加或删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发重排。重排也叫回流。

重绘：修改样式，布局不会改变

重绘是指浏览器在不改变布局的情况下，更新页面上的元素的外观，例如改变颜色、背景、边框等。重绘不涉及改变元素的位置或大小，仅仅是重新绘制元素的外观。相对于重排，重绘是一项较为轻量的操作。

重拍一定重绘，重绘不一定重排

频繁重排会大大影响前端性能

如何避免重排？

1. 不进行单一的样式修改，而是将多个样式写在一个类里

2. 多使用transform、opacity来代替动画，这两个属性只会引起重绘

3. 将多个dom操作写在文档片段(documentFragement)里，批量更新dom

4. 少使用table布局，多使用flex、grid布局