# CSS面试题

# flex

Flexbox（弹性盒子布局）是 CSS3 提供的一种现代布局模式，它能够更简单、更完整地实现响应式布局，特别适合处理一维布局（即沿一条直线布置项目）。

Flex 布局由**弹性容器（flex container）和弹性项目（flex item）**组成：

容器属性

display

定义容器为 flex 布局：

.container {
  display: flex; /* 块级弹性容器 */
  /* 或 */
  display: inline-flex; /* 行内弹性容器 */
}

flex-direction

决定主轴方向（项目的排列方向）：

.container {
  flex-direction: row; /* 默认值，水平从左到右 */
  flex-direction: row-reverse; /* 水平从右到左 */
  flex-direction: column; /* 垂直从上到下 */
  flex-direction: column-reverse; /* 垂直从下到上 */
}

flex-wrap

定义项目是否换行：

.container {
  flex-wrap: nowrap; /* 默认，不换行 */
  flex-wrap: wrap; /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

flex-flow

flex-direction和 flex-wrap的简写：

.container {
  flex-flow: row wrap; /* 方向为row，允许换行 */
}

justify-content

定义项目在主轴上的对齐方式：

.container {
  justify-content: flex-start; /* 默认，起点对齐 */
  justify-content: flex-end; /* 终点对齐 */
  justify-content: center; /* 居中 */
  justify-content: space-between; /* 两端对齐，项目间隔相等 */
  justify-content: space-around; /* 每个项目两侧间隔相等 */
  justify-content: space-evenly; /* 项目与容器边缘及项目间间隔完全相等 */
}

86aa7765-7132-4af7-9bfd-1104418577ab

align-items

定义项目在交叉轴上的对齐方式：

.container {
  align-items: stretch; /* 默认，拉伸填满容器高度 */
  align-items: flex-start; /* 交叉轴起点对齐 */
  align-items: flex-end; /* 交叉轴终点对齐 */
  align-items: center; /* 交叉轴居中对齐 */
  align-items: baseline; /* 项目第一行文字的基线对齐 */
}

align-content

定义多根轴线的对齐方式（只有一根轴线时无效）：

.container {
  align-content: stretch; /* 默认，轴线占满整个交叉轴 */
  align-content: flex-start; /* 交叉轴起点对齐 */
  align-content: flex-end; /* 交叉轴终点对齐 */
  align-content: center; /* 交叉轴居中对齐 */
  align-content: space-between; /* 两端对齐，轴线间隔相等 */
  align-content: space-around; /* 每根轴线两侧间隔相等 */
}

项目属性

order

定义项目的排列顺序，数值越小越靠前：

.item {
  order: 0; /* 默认值 */
}

flex-grow

定义项目的放大比例（剩余空间分配）：

.item {
  flex-grow: 0; /* 默认不放大 */
}

flex-shrink

定义项目的缩小比例（空间不足时）：

.item {
  flex-shrink: 1; /* 默认可缩小 */
}

flex-basis

定义项目在分配多余空间之前的主轴空间：

.item {
  flex-basis: auto; /* 默认值，项目本来大小 */
  flex-basis: 100px; /* 固定宽度 */
}

flex

flex-grow, flex-shrink和 flex-basis的简写：

.item {
  flex: 0 1 auto; /* 默认值 */
  flex: 1; /* 等同于 flex: 1 1 0 */
}

align-self

允许单个项目有与其他项目不一样的对齐方式：

.item {
  align-self: auto; /* 默认，继承父容器的align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

实际应用示例

水平垂直居中

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

等宽导航栏

.nav {
  display: flex;
}
.nav-item {
  flex: 1;
  text-align: center;
}

圣杯布局

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
  display: flex;
}
.main {
  flex: 1;
}
.sidebar {
  width: 200px;
}

Flex 布局极大地简化了传统 CSS 布局的复杂性，特别是在响应式设计中表现出色，是现代 Web 开发中不可或缺的工具。

# display与visibility的区别

联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染树元素继续占据空间，只是内容不可见修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

# z-index以及触发时机?

注意：Z-index 仅能在定位元素上奏效.

在position的值是relative、absolute、fixed、sticky时候可以触发

# 介绍一下 CSS 的盒子模型？

组成部分：

margin(外边距)- 清除边框外的区域，外边距是透明的。 border(边框)- 围绕在内边距和内容外的边框。 padding(内边距)- 清除内容周围的区域，内边距是透明的。 content(内容)- 盒子的内容，显示文本和图像。

W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度

0001590718782925053.20250424141816.44940759939704188138342244508121

IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度

0001590718782925053.20250424141817.62427151865366800908660091305204

如何开启不同盒子模型 box-sizing:content-box; 标准盒子模型 box-sizing:border-box; IE盒子模型

# 简明说一下 CSS link 与 @import 的区别和用法

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

# rgba和opacity的透明效果有什么不同？

Rgba即可以指定元素颜色也可以指定透明度，opacity只能控制元素透明度不能设置颜色 Rgba透明度是基于实际颜色，而opacity是针对元素本身透明度设置，在使用rgba是可以实现元素不同部位透明度不同，而opacity使元素透明度一致支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity

# 隐藏元素的方法有哪些？

display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件

opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件

z-index: 负值: 来使其他元素遍盖住该元素，以此来实现隐藏

transform: scale(0,0): 将元索缩放为 0，来实现元素的隐藏。

# transition和animation区别

触发方式不同：transition 通过 CSS 属性值的变化来触发动画效果，而 animation 则需要通过设置关键帧（keyframes）来指定动画序列。控制方式不同：transition 只能控制开始和结束状态之间的过渡动画，而 animation 可以指定多个关键帧，控制元素动画的每一个阶段，包括动画开始、中间和结束的时刻、变换状态以及持续时间等。耗费资源不同：相对来说，animation 消耗的浏览器资源更多，因为它需要计算多个关键帧之间的动画效果，而 transition 只需在两种状态之间进行简单的计算即可。兼容性不同：transition 相对来说更加兼容不同的浏览器，而 animation 在某些旧版浏览器上可能无法正常工作。

# css选择器

基础选择器

最常用的基本选择方式，直接匹配 HTML 元素。

元素选择器

匹配指定标签名的所有元素。

p { color: blue; } /* 所有<p>标签文字变蓝 */
div { margin: 10px; } /* 所有<div>标签添加外边距 */

类选择器（.class）

匹配所有带有指定class属性的元素（一个元素可有多个类，用空格分隔）。

.warning { background: yellow; } /* 所有class含"warning"的元素 */
.btn-primary { padding: 8px 16px; } /* 匹配class="btn-primary"的元素 */

ID 选择器（#id）

匹配带有指定id属性的唯一元素（HTML 中 id 需唯一）。

#logo { width: 200px; } /* 匹配id="logo"的元素 */
#user-info { border: 1px solid #ccc; }

通配符选择器（*）

匹配文档中所有元素（慎用，可能影响性能）。
```
* { margin: 0; padding: 0; } /* 清除所有元素的默认边距 */
```

组合选择器

通过关系组合多个选择器，定位特定关系的元素。

后代选择器（空格）

匹配某个元素内部的所有后代元素（包括子元素、孙元素等）。

.nav li { list-style: none; } /* .nav内的所有<li>（无论嵌套层级） */
div p { font-size: 14px; } /* 所有<div>内部的<p>标签 */

子选择器（>）

仅匹配某个元素的直接子元素（不包含孙元素）。

.nav > li { display: inline; } /* .nav的直接子元素<li>（不包括嵌套在其他元素内的li） */
ul > li { margin: 5px 0; }

相邻兄弟选择器（+）

匹配某个元素紧接其后的第一个同级元素。

h2 + p { color: red; } /* 紧跟在<h2>后的第一个<p>标签 */
.active + .item { opacity: 0.8; } /* .active后面紧邻的第一个.item */

通用兄弟选择器（~）

匹配某个元素之后所有的同级元素（不要求紧邻）。

h2 ~ p { line-height: 1.6; } /* <h2>之后所有的<p>兄弟元素 */
.first ~ .box { border: 1px dashed #666; }

属性选择器

根据元素的属性或属性值匹配元素。

[属性名]：匹配包含指定属性的元素

[disabled] { cursor: not-allowed; } /* 所有带disabled属性的元素 */
[data-id] { border: 1px solid; } /* 所有带data-id属性的元素 */

[属性名="值"]：匹配属性值完全等于指定值的元素

input[type="text"] { width: 200px; } /* type属性为"text"的<input> */
[class="btn"] { padding: 5px; } /* class严格等于"btn"的元素 */

[属性名^="值"]：匹配属性值以指定值开头的元素

a[href^="https"] { color: green; } /* href以"https"开头的链接（安全链接） */

[属性名$="值"]：匹配属性值以指定值结尾的元素

img[src$=".png"] { border: 2px solid pink; } /* 图片路径以.png结尾的<img> */

[属性名*="值"]：匹配属性值包含指定值的元素

[class*="btn-"] { font-weight: bold; } /* class中包含"btn-"的元素（如btn-primary、btn-danger） */

# 伪类选择器

:hover：选择鼠标悬停在元素上的状态。
:active：选择正在被激活的元素，通常是鼠标点击元素但还未释放鼠标按钮的状态。
:focus：选择当前获取焦点的元素，例如输入框。
:first-child：选择作为其父元素的第一个子元素的元素。
:last-child：选择作为其父元素的最后一个子元素的元素。
:nth-child(n)：选择作为其父元素的第 n 个子元素的元素，可以使用表达式来选择特定位置的子元素。
:nth-of-type(n)：选择作为其父元素的第 n 个指定类型的子元素的元素。
:not(selector)：选择不匹配指定选择器的元素。
:checked：选择被选中的表单元素，如复选框或单选按钮。
:disabled：选择被禁用的表单元素。
:empty：选择没有子元素的元素。
:nth-last-child(n)：选择作为其父元素的倒数第 n 个子元素的元素。
:nth-last-of-type(n)：选择作为其父元素的倒数第 n 个指定类型的子元素的元素。

# 伪元素选择器

::before：在元素内容之前插入生成的内容。
::after：在元素内容之后插入生成的内容。
::first-line：选择元素的第一行文本。
::first-letter：选择元素的第一个字母。
::selection：选择用户选择的文本部分。
::placeholder：选择输入框的占位符文本。
::backdrop：选择元素的背景层。

# CSS3新特性

新增各种css选择器(:not(.input):所有class不是’input’的节点)：属性选择器，伪类选择器，伪元素选择器，基本选择器
三个边框属性 border-radius：创建圆角边框 border-shadow：为元素添加阴影 border-image：使用图片来绘制边框
背景 background-clip：确定背景画区 background-origin：设置是从border-box，padding-box，content-box那个盒子的左上角开始对其 background-size：调整背景图片大小 background-break：元素可以被分成几个独立的盒子
文字 word-wrap：normal|break-word 使用浏览器默认的换行|允许在单词内换行 text-overflow：设置或检索当前行超过指定容器的边界如何显示，属性由两个值 clip：修剪文本 ellipsis：显示省略符号来代表被修剪的文本 text-shadow：可向文本应用阴影。能够规定水平阴影，垂直阴影，模糊距离，以及阴影颜色 text-decoration：CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可以提供 text-fill-color：设置文字内部填充颜色 text-stroke-color：设置文字边界填充颜色 text-stroke-width：设置文字边界宽度
颜色（新增颜色表示方式rgba与hsla） rgba分为两部分，rgb为颜色值，a为透明度 hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
transition过渡，transform转换，animation动画
flex弹性布局，Grid栅格布局
媒体查询

# calc, support, media各自的含义及用法

@support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。

# px和em,rem区别

px:绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em:相对长度单位，相对于当前对象内文本的font-size，em的值并不是固定的，em会继承父级元素的font-size（参考物是父元素的font-size）
rem:相对于html根元素的font-size

# 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？

rem：rem是全部的长度都相对于根元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em：子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一般电脑的分辨率有{1920 1024}等不同的分辨率 19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。如果窗口高度1080，宽度1920那么。 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px。

# css sprite（雪碧图，精灵图）是什么,有什么优缺点？

CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

减少HTTP请求，极大提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小更换风格方便，只需要在一张或几张图片上修改颜色或样式即可缺点：

图片合并麻烦维护麻烦

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

设备像素：又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

css像素：适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位。css中长度分为两类：绝对单位和相对单位，px属于相对单位

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看

dpr：设备像素比，代表设备独立像素到设备像素的转换关系

ppi：像素密度，表示每英寸所包含的像素点数目

# 对line-height的理解，赋值方式

163ebf5aefebb10c~tplv-t2oaga2asx-zoom-in-crop-mark_1304_0_0_0

概念：

line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。原理：

我们可以理解为将div分为三份，分别为上边距，内容，下边距。举例：div高度100px，字体为16px，那么上下边距计算为(100px-16px)/2 赋值方式：

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代

# 谈谈你对BFC的理解？触发条件？应用场景？

概念： BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件：

根元素，即HTML元素浮动元素：float值为left、right overflow值不为 visible，为 auto、scroll、hidden display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid position的值为absolute或fixed 应用场景：

防止margin重叠清楚内部浮动自适应多栏布局

# 介绍一下grid网格布局

理解：Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

容器属性：

display：grid该容器是一个块级元素/inline-grid该容器是一个行内元素 grid-template-columns 属性，grid-template-rows 属性：设置列宽，行高几行几列。如果重复宽高可通过repeat(3,200px)表示3行列，200px宽高 grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性设置行列间距，grid-gap是两者简写 grid-template-areas 属性：用于定义区域 grid-auto-flow 属性：划分网格以后，容器的子元素会按照顺序，顺序就是由grid-auto-flow决定项目属性：

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性：指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置 grid-area 属性：属性指定项目放在哪一个区域。由grid-template-areas 属性划分区域 justify-self 属性、align-self 属性以及 place-self 属性

自适应布局

grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));

# CSS3动画有哪些？

transition 实现渐变动画 transition动画详解

transform 转变动画 transform属性详解

animation 实现自定义动画 animation详解

# 回流跟重绘？什么场景下会触发？

回流（Reflow）：当 DOM 元素的几何属性（位置、尺寸、布局等）发生变化时，浏览器需要重新计算元素的位置和大小，并重新构建渲染树，这个过程称为回流。回流成本很高（会触发整个渲染树的重新计算）。

触发场景：改变width/height、margin/padding、top/left，添加 / 删除元素，窗口大小变化等。
重绘（Repaint）：当 DOM 元素的非几何属性（颜色、背景、透明度等）变化时，浏览器无需重新计算布局，只需重新绘制元素外观，这个过程称为重绘。重绘成本低于回流，但频繁重绘仍会影响性能。

触发条件：

回流：添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代页面一开始渲染的时候（这避免不了）浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）重绘------ 触发回流一定会触发重绘颜色的修改文本方向的修改阴影的修改

如何减少重绘和回流：

批量操作 DOM，减少布局计算次数
脱离文档流后操作 DOM
虚拟列表（针对长列表）
避免使用table布局

# 如果要做优化，CSS提高性能的方法有哪些？

内联首屏关键CSS 避免使用css表达式异步加载CSS 资源压缩合理使用选择器减少使用昂贵的属性如 box-shadow/border-radius/filter/透明度/:nth-child 等不要使用@import

# 如何实现单行／多行文本溢出的省略样式？

单行文本溢出

white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 clip：当对象内文本溢出部分裁切掉 ellipsis：当对象内文本溢出时显示省略标记（…） text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的多行文本溢出省略

基于高度截断 – 伪元素 + 定位 position: relative：为伪元素绝对定位 overflow: hidden：文本溢出限定的宽度就隐藏内容） line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数 height: 40px：设定当前元素高度 ::after {} ：设置省略号样式 – 设置伪元素 position: absolute：给省略号绝对定位 content：“…” 基于行数截断 – 纯css -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box：和-webkit-line-clamp结合使用，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical：和-webkit-line-clamp结合使用，设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden：文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

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

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制。

解决方案：

zoom ： “变焦”，可以改变页面上元素的尺寸，属于真实尺寸 -webkit-transform:scale()：针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩 -webkit-text-size-adjust:none：该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小区别：

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

# 在原生css，sass，less中如何定义变量

css：--

/* 全局变量（在 :root 中定义，作用于整个文档） */
:root {
  --primary-color: #4285f4; /* 蓝色 */
  --font-size-base: 16px;
  --spacing: 20px;
}

/* 局部变量（仅作用于 .card 类及其子元素） */
.card {
  --card-bg: #ffffff;
  --border-radius: 8px;
}

/* 使用变量 */
body {
  color: var(--primary-color);
  font-size: var(--font-size-base);
  padding: var(--spacing);
}

.card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-color);
}

scss：$

/* 全局变量 */
$primary-color: #4285f4;
$font-size-base: 16px;
$spacing: 20px;

/* 局部变量（仅在 .card 作用域内有效） */
.card {
  $card-bg: #ffffff;
  $border-radius: 8px;
  
  background: $card-bg;
  border-radius: $border-radius;
}

/* 使用变量 */
body {
  color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing;
}

/* 变量计算（使用 Sass 内置函数） */
.container {
  width: $spacing * 10; /* 200px */
  margin: $spacing / 2; /* 10px */
}

/* 带默认值的变量（!default 表示如果变量未定义则使用此值） */
$secondary-color: #34a853 !default;

less：@

/* 全局变量 */
@primary-color: #4285f4;
@font-size-base: 16px;
@spacing: 20px;

/* 局部变量（仅在 .card 作用域内有效） */
.card {
  @card-bg: #ffffff;
  @border-radius: 8px;
  
  background: @card-bg;
  border-radius: @border-radius;
}

/* 使用变量 */
body {
  color: @primary-color;
  font-size: @font-size-base;
  padding: @spacing;
}

/* 变量计算 */
.container {
  width: @spacing * 10; /* 200px */
  margin: @spacing / 2; /* 10px */
}

# 说说对Css预编语言的理解？有哪些区别?

理解：扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便。本质上，预处理是Css的超集。包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

有哪些：sass,less,stylus

比较less和sass：

相同点：首先sass和less都是css的预编译处理语言，它们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用区别： less是基于JavaScript的在客户端处理所以安装的时候用npm sass是基于ruby所以在服务器处理 less优缺点优点： less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时缺点： JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器 sass优缺点优点：功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式缺点：复杂对于新手比较不友好

# 什么是FOUC？如何避免？

FOUC：即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

如何避免：

样式表前置：根据浏览器渲染的顺序，将CSS在中引入或者嵌入尽量使用link避免使用@import、

# 清除浮动的方式，各自优缺点？

额外标签法：给谁清除浮动，就在其后额外添加一个空白标签

优点：通俗易懂，书写方便。（不推荐使用）缺点：添加许多无意义的标签，结构化比较差。

父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。

优点：简单、代码少、浏览器支持好

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）缺点：由于IE6-7不支持

# 在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

# 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

# base64的原理及优缺点？

优点可以加密，减少了HTTP请求缺点是需要消耗CPU进行编解码

# 流体布局，圣杯布局，双飞翼布局？

圣杯布局和双飞翼布局的区别：

相同点两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。不同点主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。

# postcss的作用

PostCSS是一个使用JS插件转换CSS的工具。这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等。

作用：

支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin) 编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。丰富的插件系统，解放你的双手。 css模块化，将作用域限制于组件内，避免了全局作用域的问题，再也不用担心样式名重复了 Postcss属于css后处理器，动态编译css，也就是说，在运行的时候进行编译。

# css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

# 水平居中方法

元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto; 绝对定位和移动: absolute + transform 使用flex-box布局，指定justify-content属性为center display设置为tabel-ceil

# 详细说一说css3的animation，transition

animation css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义动画过程每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，这些相关的动画子属性有： animation-name定义动画名 animation-duration定义动画播放的时长 animation-delay定义动画延迟播放的时间 animation-direction定义动画的播放方向 animation-iteration-count定义播放次数 animation-fill-mode定义动画播放之后的状态 animation-play-state定义播放状态，如暂停运行等 animation-timing-function定义播放的方式，如恒速播放、减速播放等。 transition transition-property ：规定设置过渡效果的css属性名称 transition-duration ：规定完成过渡效果需要多少秒或毫秒 transition-timing-function ：指定过渡函数，规定速度效果的速度曲线 transition-delay ：指定开始出现的延迟时间

# 什么是css Hack？常见Hack

描述：是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

常见hack：

属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线””，而firefox两个都不能认识。选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。 IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。

# 浏览器是怎样解析CSS选择器的？

浏览器解析 CSS 选择器的方式是从右到左

# 抽离样式模块怎么写，说出思路

CSS可以拆分成2部分：公共CSS 和业务CSS：网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

# 全屏滚动的原理是什么？用到了CSS的那些属性？

原理类似图片轮播原理，超出隐藏部分，滚动时显示可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

# 设置元素浮动后，该元素的 display 值会如何变化

设置元素浮动后，该元素的 display 值自动变成 block

# display:inline-block 什么时候会显示间隙？

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距非 inline-block 水平元素设置为 inline-block 也会有水平间距可以借助 vertical-align:top; 消除垂直间隙可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

# pageX，clientX，screenX，offsetX区别？

pageX/Y：对于整个页面来说，包括了被卷去的body部分的长度

clientX/Y：点击位置距离当前body可视区域的x，y坐标

screenX/Y：点击位置距离当前电脑屏幕的x，y坐标

offsetX/Y：相对于带有定位的父盒子的x，y坐标

# 如何对不同IE版本浏览器做兼容测试？

使用工具切换IE版本，然后在IE浏览器运行测试

# border- radius详解

在开发中我们经常通过正方形设置border- radius：50%来实现圆

border-radius参数选择：

border-radius：10px；将创建四个大小一样的圆角 border-radius:10px 15px 10px 15px; 四个值分别表示左上角、右上角、右下角、左下角 border-radius:10px 15px; 第一个值表示左上角、右下角；第二个值表示右上角、左下角 border-radius:10px 15px 5px; 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。 61.让页面里的字体变清晰，变细用CSS怎么做？ -webkit-font-smoothing: antialiased;

# CSS3渐变？

CSS3 定义了两种类型的渐变（gradients）：

线性渐变 - 向下/向上/向左/向右/对角方向径向渐变 -（Radial Gradients）- 由它们的中心定义线性渐变：

语法：background-image:linear-gradientdirection,color-stop1,color-stop2,……); direction：渐变方向/角度，可选（45deg，to bottom，to top,to right,to left,to left top…） color-stop：选择颜色rgba可以设置透明度，也可以设置色标点区域例：rgba(255,255,255,0.3) 20% 径向渐变：

语法：background-image: radial-gradient(shape size at position, start-color, …, last-color); shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner” at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。

# 响应式布局和自适应布局的区别 ?

响应式布局是指通过CSS媒体查询，根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小，实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。自适应布局是指根据屏幕尺寸选择合适的布局方式，使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些，它的页面布局通常是由几个固定的布局组成，在不同的屏幕尺寸下选择不同的布局组合来进行展示，而不是像响应式布局那样直接改变样式。

# z-index失效的几种情况

position属性未设置或值为static：如果要使用z-index属性，您需要首先将元素的position属性设置为relative、absolute或fixed。否则，即使设置了z-index，也无法使其生效。父元素的z-index值高于子元素：当一个父元素和它的子元素都设置了z-index时，子元素的z-index可能会失效。浮动元素的z-index失效：当使用浮动元素时，z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质，并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。

# 移动端1px问题解决方案

利用 css 的伪元素::after + transfrom 进行缩放优点：全机型兼容，实现了真正的1px，而且可以圆角。适用于老项目。缺点：暂用了after 伪元素，可能影响清除浮动。设置viewport的scale值优点：全机型兼容，直接写1px不能再方便。缺点：适用于新的项目，老项目可能改动大。使用组件库vant/ant-design-mobile

# CSS中定位position 和 transform 移动元素的比较

性能方面：transform性能远高于position

通过translate移动，元素依然会占据其原始空间。如果通过position移动则会改变位置触发重绘

# magrin塌陷如何解决

导致塌陷的原因：

父子关系：子元素设置margin-top

兄弟关系：兄弟之间一个设置了margin-button，一个设置margin-top

“父子无阻隔，margin 往外跑；兄弟垂直 margin，取大不相加。”

解决办法：

1.给元素的父元素添加一个padding值。 2.给元素的父元素添加一个border值。 3.给元素添加一个浮动属性（float）。 4.给元素添加一个绝对定位（position:absolute）。 5.给元素添加一个inline-block属性。

本章目录