css 面试题
1. 说说你对盒子模型的理解
1. css盒模型本质上就是一个盒子,它包括: content,padding,border,margin
2.两种模式:
- box-sizing(标准盒模型): content-box(默认): 宽高仅计算内容区
- box-sizing(怪异盒模型): border-box(推荐): 宽高包含padding和border,更易控制尺寸
3. 实际意义:
- 控制元素间距(margin/padding)
- 解决布局问题(如用border-box避免动态计算总宽度)
4.box-sizing属性
box-sizing:content-box(标准盒子模型)|border-box(怪异盒模型)|inherit(继承父元素的box-sizing的值)
2.css选择器有哪些？优先级？哪些属性可以继承？
1. css选择器类型
1.基础选择器
元素选择器: p {}
类选择器: .a{}
id选择器: #a{ }
通配符选择器: *{ } ---常用于清除浏览器默认样式(如边距,内边距),确保跨浏览器一致性
2.层次选择器
后代选择器: nav a{ }(匹配所有嵌套层级的<a>)
子选择器: ul>li{ }(仅直接子元素)
相邻兄弟选择器: h2+p{ }(紧接在h2后的统计段落)
通用兄弟选择器: h2~div{ }(h2后所有同级<div>)
3. 属性选择器
存在性选择器: [disabled] { } 匹配具有指定属性的元素,无论属性值如何
值匹配: [type='email']{ } 匹配属性值完全等于指定值的元素
正则匹配: a[href ^='https'](开头){ }
4.伪类选择器
状态伪类: **:hover { } 鼠标悬停触发 **:focus{} 元素获得焦点触发 **:acticve{ } 鼠标按下
结构伪类: **:nth-child(2n){ } 选择父元素下偶数位置的子元素,常用语表格隔行变色
div:first-of-type{ } 选择父元素下同类型元素的第一个,如首个段落或首个列表项
5.伪元素选择器: 虚拟元素的样式控制
1. **::before/::after 在元素内容前/后插入虚拟内容,需配合content属性使用
p::before { content: "★"; color: red; } /* 段落前插入红色星号 *)
2.**::first-line 控制元素首行文本样式,仅适用于块级元素
p::first-line { font-weight: bold; color: green; } /* 首行加粗绿色 */[7,13](@ref)
2. 优先级
优先级由权重值（A,B,C,D）决定，按从高到低比较
| 选择器类型 | 权重值 | 示例 |
|---|---|---|
| 行内样式 | (1,0,0,0) | <div style="..."> |
| ID选择器 | (0,1,0,0) | #header |
| 类/属性/伪类 | (0,0,1,0) | .btn, :hover |
| 元素/伪元素 | (0,0,0,1) | div, ::before |
计算规则:
- 累加选择器中每类权重值. 如#nav .item a->(01,1,1)
- !import 强制最高优先级(慎用)
- 权重相同时,后定义的样式生效
带!important 标记的样式属性优先级最高; 样式表的来源相同时: !important>行内样式>ID选择器>类选择器>标签>通配符>继承
3.继承属性
1.字体相关
- font-family,font-size,font-weight,font-style
- line-height,color
2.文本相关
- text-aligin,text-indent(设置首行文本缩进): 单位 px,em(相对字体大小,如2em缩进两个字符),
letter-spacing(调整字符间距)字距, 正值增大间距,父值缩小 - visibility,cursor
不可继承属性
- 盒模型: width,margin,border
- 定位: position,z-index
- 背景: background-color, background-image
- 使用inherit强制继承: .child { border: inherit;}
3.简述pt.px,em,rem,%,vw,vh,rpx这些CSS单位的区别
1.物理像素,逻辑像素
| 手机型号 | 英寸 | 物理像素分辨率 | 逻辑像素分辨率 | ppi | 设备像素比 |
| IPhone 6 | 4.7 | 750*1334 | 375*667 | 326 | 2 |
- 物理像素(设备像素DP(device pixels)) : 物理像素是显示屏上的小点,用来显示图像和文字;(例如iphone6 的屏幕分辨率是750*1334像素,因此它的物理像素数量是750*1334)
- 逻辑像素,也称为设备独立像素或CSS像素,是计算机图形和显式领域的一种虚拟像素单位,通常在css中以"px"表示
物理像素是硬件单位,逻辑像素是软件单位 - 点 (point)通常对应于一个物理像素,但在高分辨率(Retina)屏幕上,一个点可以对应多个物理像素(例如在IPhone6上,一个点通常对应于4个物理像素)
- 像素比(DPR)像素比=物理像素/逻辑像素 (例如在IPhone6上,物理像素750/逻辑像素375=2)
- 分辨率像素点总数即为分辨率(逻辑分辨率,物理分辨率)
- 像素密度(PPI)每英寸所拥有的像素数量,PP值越高,画面的细节就会越丰富mg
2. 单位
1. 固定单位
- pt: 在IOS开发中,"pt"通常指的是逻辑像素,pt的大小与屏幕的尺寸有关,可以简单理解为长度单位;
- px(pixel): 是像素的缩写,代表设备或图像上的最小点,在网页设计中px是最常用的基本单位,可用于固定布局或元素大小,它的缺点是缺乏弹性,不适应不同屏幕大小的变化
用途: PC端固定尺寸元素,移动端少用
2.相对单位(动态适配)
- em 相对于父元素的字体大小(如父元素font-size:16px,则1em=16px),如果父元素font-size=20px,子元素2em=40px;
- rem 相对于根元素(html)的字体大小 默认1rem=16px 响应式布局,通过修改根元素字体大小全局调整元素比例
- % 通常相对于其父元素来计算
对于position:absolute; 的元素,它的百分比位置通常是相对于其最近的已定位的(position不是static的)父元素来计算的
对于position:fixed; 的元素,百分比位置是相对于视口(可视窗口)的大小来计算的,而不是父元素
对于垂直方向的margin和padding,它们的百分比值是相对于元素的宽度计算的,而不是相对于高度 - vw,vh: 相对单位
vw: 无论视口高度多少,都将视口高均分为100份,每1小份就是1vh
vw,无论视口宽度多少,都将视口宽均分为100份,每1小份就是1vw - rpx: 小程序专用相对单位,用于在不同设备实现响应式布局,1rpx在不同设备上会自动转换成不同的物理像素,以适应不同的屏幕密度. (永远按照750来进行映射,例如75rpx是750的十分之一,如果在375的屏幕上,则会映射成37.5)
4.css中有那些可以隐藏页面元素?区别?
1.完全移除型隐藏
1.display:none
元素从文档流中彻底移除,不占据空间,触发重排和重绘,
2. 设置width/height为0 , 需配合overflow: hidden隐藏子内容,性能优于display:none(仅触发重绘)
2.视觉隐藏但保留布局
3.visibility: hidden
元素不可见但保留原有空间,仅触发重绘 ,不响应事件,但子元素可通过visibility:visible重新显示 ,屏幕阅读器可能读取内容(部分浏览器)
适用于: 隐藏元素但需保留占位(如预加载布局)
4.opacity: 0
元素完全透明,保留空间和交互性,可响应事件(如点击),子元素透明度无法独立恢复,触发GPU加速,适合动画效果
适用于: 需要淡入淡出或隐藏但仍需交互的元素
3.位移裁剪型隐藏
5. position: absolute+ 负坐标
将元素移除视口,不影响布局, 不占据空间,但DOM位置保留,事件可能触发,屏幕阅读器可读取内容
6. clip-path: inset(50%) 通过剪裁使元素不可见,保留空间, 不响应事件,性能较好仅触发重绘
5.元素水平垂直居中的方法有哪些？
1. flexbox是现代CSS中最常见和最简洁的方式
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 让父容器充满整个视口高度 */
}.child {
width: 100px;
height: 100px;
}
2.Grid
Grid是非常适合做元素居中,设置父元素为display:grid,然后用place-items或者分别用justify-items和align-items来居中
.parent {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 100vh;
}.child {
width: 100px;
height: 100px;
}
3.绝对定位(Absolute Positioning)
通过绝对定位将元素相对于父容器定位,并利用top,left,transform实现居中
.parent {
position: relative;
height: 100vh;
}.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 调整元素自身的中心点 */
width: 100px;
height: 100px;
}
4.margin auto 适用于固定宽高的元素
在已知子元素宽高的情况下,可以使用margin: auto 来居中该元素,通常应用于块级元素
.parent {
height: 100vh;
display: block;
}.child {
width: 100px;
height: 100px;
margin: auto; /* 水平居中 */
position: relative;
top: 50%; /* 垂直居中 */
transform: translateY(-50%);
}
6.如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
1.两栏布局,右侧自适应
<div class="container">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
1.浮动+margin
左侧浮动脱离文档流,右侧通过margin-left流出空间,给父元素清除浮动,防止下方元素飞到上方内容
.container{ overflow:hidden} .left { float: left; width: 200px; } .right { margin-left: 200px; } /* 自适应 */
2.flex布局,弹性布局
.container { display: flex; } .left { width: 200px; } .right { flex: 1; } /* 自适应 */
3.Grid布局
父容器设为display:grid,通过grid-template-columns 分配空间
.container { display: grid;grid-template-columns: 200px 1fr; /* 左侧200px，右侧自适应 */ }
2.三栏布局（左右固定，中间自适应）
<div class="container"><div class="left" style="background: #ff9999;">左侧固定</div><div class="center" style="background: #99ff99;">中间自适应</div><div class="right" style="background: #99ccff;">右侧固定</div> </div>
1. Flexbox 实现
.container {display: flex;height: 200px;}.left, .right {width: 200px; /* 左右固定宽度 */}.center {flex: 1; /* 中间自适应 */}
2.Grid实现
.container {display: grid;grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */height: 200px;}
3.双飞翼布局 (浮动+负边距)
用于将左侧栏从常规流中"拉回"到父容器的嘴左侧,与中间栏并排显示
<div class="container">
<div class="center-wrap">
<div class="center" style="background: #99ff99;">中间内容</div>
</div>
<div class="left" style="background: #ff9999;">左侧</div>
<div class="right" style="background: #99ccff;">右侧</div>
</div><style>
.container { overflow: hidden; }
.center-wrap { float: left; width: 100%; }
.center { margin: 0 200px; } /* 避让左右宽度 */
.left, .right {
float: left;
width: 200px;
height: 200px;
}
.left { margin-left: -100%; } /* 左移100% */ (相对于父容器宽度计算)
.right { margin-left: -200px; } /* 左移自身宽度 */(从第二排最左边在往右边移动拉回到第一排)
</style>
7. 说说flexbox（弹性盒布局模型)
1.弹性容器与项目
1.容器: 通过display: felx或display: inline-flex定义,其直接子元素自动成为弹性项目
2.主轴(Main Axis) 与 交叉轴(Cross Axis):
- 主轴方向由flex-direction控制(默认row,水平从左到右)
- 交叉轴始终垂直于主轴,用于控制垂直对齐
2.容器属性
- 排列方向: flex-direction(row/column)
- 换行控制: flex-wrap(nowrap/wrap)
- 主轴对齐: justify-content(如center,space-between)
- 交叉轴对齐: align-items (如stretch,center)
- 多行对齐: align-content(适用于多行项目)
3.项目属性
- 伸缩比例: flex-grow(扩展),flex-shrink(收缩),flex-basis(初始尺寸)
- 简写属性: flex: 1等价于flex: 1 1 0
- 独立对齐: align-self 覆盖容器的align-items
- 排序: order 调整项目显示顺序(数值越小越靠前)
8.清除浮动的方式有哪几种？
1.伪元素清除法
通过::after伪元素在父容器末尾生成一个清楚浮动的虚拟元素
clearfix::after {content: "";display: block;clear: both; }
2.添加额外标签,给父级添加<div style="clear:both"></div>
3.触发BFC(块级格式化上下文)
方法: 通过overflow:hidden 或 overflow: auto属性使父容器形成BFC,自动包含浮动元素
4.父容器设置固定高度
直接为父容器指定高度(如height:100px)
9.CSS3新增了哪些新特性？
1.选择器增强
css3中新增了一些选择器,主要包括属性选择器,结构伪类选择器,伪元素选择器等
2.布局相关
- flexbox
- Grid布局,更灵活,二维的网格布局方式
多列布局: column-count,column-gap等属性可以创建报纸风格的多列布局
.container {
column-count: 3;
column-gap: 20px;
}
3.视觉效果
- 圆角: boder-radius
- 渐变: linear-gradient和radial-gradient创建渐变背景
- 阴影: box-shadow和text-shadow用于为元素添加阴影效果
- 透明度: opacity可以设置元素的透明度
4.动画与过渡
1. 过渡(Transitions): transition元素在状态变化时平滑过渡
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.1);
}
2.动画(Animations): @keyframes和animation创建复杂的动画效果
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
.box {
animation: slide 2s infinite;
}
5.字体与文本
1. Web字体 (@font-face): 允许网页使用自定义字体,而不依赖于用户本地字体
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
}
2.文本阴影(Text Shadow): 通过text-shadow 为文本添加阴影效果
.title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
6.响应式设计
1.媒体查询(Media Queries): 根据不同的设备条件(如屏幕宽度)应用不同的样式
@media (max-width: 600px) {
.container {
display: block;
}
}
7.交互性
- 悬停效果 (:hover): 通过鼠标悬停的样式改变,增强用户交互体验
- 焦点状态(:focus): 当元素获得焦点时应用样式,常用于表单输入框等
.input:focus { border-color: blue; }
8.图像和背景
- 背景定位与大小: background-size,background-position 允许更多控制背景图像的显示方式
- 背景渐变: background: linear-gradient 用于创建背景渐变效果
9.css Variables
css变量,允许在css中定义和使用变量,简化重复的样式定义
:root {
--main-color: #3498db;
}
.box {
background-color: var(--main-color);
}
10. 媒体功能
- 视差滚动: 通过background-attachment:fixed; 使背景图像固定,而内容滚动,产生视差效果
- 视频与音频支持: <video>和<audio>标签,支持更好的多媒体内容显示
10.css3动画有哪些？
1.过渡(Transitions)
过渡是指当元素的状态发生变化时,元素的样式会平滑地过渡到新的状态,通常用于鼠标悬停(hover)
焦点(focus)等交互状态的变化
主要属性
- transition: 该属性用于定义过渡的起始与结束状态,并设置过渡的持续时间
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.2);
background-color: #3498db;
}
过渡相关属性
- transition-property: 定义哪个属性需要过渡(如background-color,transform等)
- transition-duration: 定义过渡持续时间
- transition-timing-function: 定义过渡的缓动函数(如ease,linear,ease-in,ease-out)
- transition-delay: 定义过渡的延迟时间
2.关键帧动画(Keyframes Animations)
关键帧动画通过@keyframes规则定义多个关键时刻的样式,允许更复杂的动画效果
主要属性
- @keyframes: 定义动画的关键帧,控制不同时间点的样式变化
- animation: 该属性用于为元素应用一个或多个动画
相关属性
*代表animation前缀
- animation-name: 定义动画的名称(对应@keyframes的名称)
- *-duration: 定义动画持续时间
- *-timing-function: 缓动函数
- -delay: 延迟时间
- -iteration-count: 播放次数(如infinite表示无限循环)
- -direction: 动画的方向
- -fill-mode: 动画结束后的样式设置
- -play-state: 控制动画的播放状态(如paused,running)
//旋转并放大
@keyframes rotateAndScale {
0% {
transform: rotate(0deg) scale(1);
background-color: red;
}
50% {
transform: rotate(180deg) scale(1.5);
background-color: yellow;
}
100% {
transform: rotate(360deg) scale(1);
background-color: green;
}
}.box {
width: 100px;
height: 100px;
background-color: red;//应用动画
animation: rotateAndScale 5s infinite ease-in-out;
}
3.常见的CSS动画类型
1.淡入淡出(Fade ln /Fade Out)
通过改变opacity实现元素逐渐出现或者消失的效果
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}.box {
animation: fadeIn 2s ease-in-out;
}
2.滑动(Slide)
使用transform 或translateX,translateY实现元素的滑动效果
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}.box {
animation: slide 1s ease-out;
}
3.放大缩小(Scale)
使用transform:scale( )实现元素的方法或缩小效果
@keyframes scaleUp {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}.box {
animation: scaleUp 2s infinite alternate;
}
4. 旋转(Rotate)
使用transform: rotate() 实现元素的旋转效果
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}.box {
animation: rotate 4s infinite linear;
}
5.跳动(Bounce)
通过translateY或transform实现元素的弹跳效果
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}.box {
animation: bounce 1s ease infinite;
}
6.闪烁(Blink)
使用opacity属性来实现元素的闪烁效果
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}.box {
animation: blink 1s infinite;
}
7.颜色变化(Color Change)
通过background-color或color实现元素的颜色变化
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}.box {
animation: colorChange 3s infinite;
- }
11.如果要做优化，CSS提高性能的方法有哪些？
1.内联首屏关键CSS
- 将首屏渲染必需的CSS直接内联到HTML中,减少首次有效绘制时间
- 剩余CSS通过<link rel='preload' as='style'> 异步加载,避免阻塞渲染
2.避免阻塞资源
- 非关键CSS 通过media="print"标记位非阻塞,加载后切换位media="all"
- 禁用@import,因其会导致CSS串行加载,增加关键路径长度
3.选器优化与渲染性能优化
1.简化选择器
- 避免深层嵌套(如.nav ul li a),限制在3层内;优先使用类选择器而非标签选择器
- 关键选择器(最右侧部分)使用ID或类,减少匹配计算量
2.减少重排(Reflow)与重绘(Repaint)
- 动画优先使用transform和opacity,触发GPU加速
- 避免频繁修改布局属性(如width,margin),批量操作DOM
- 使用flexbox/Grid替代float和position.提升布局性能
12.浏览器重绘与重排的区别？
| 对比项 | 重绘（Repaint） | 重排（Reflow） |
|---|---|---|
| 定义 | 元素外观改变(如颜色,背景),但不影响布局 | 元素几何属性或布局改变(如尺寸,位置),需计算布局 |
| 触发条件 | 1. 修改颜色背景色,边框样式等 2. 修改透明度,阴影 | 1.修改尺寸(width/height),边距(margin/padding) 2.添加/删除DOM元素,窗口大小变化 3.读取布局属性(如offsetTop,scrollHeight) |
| 性能开销 | 仅重新绘制像素,性能消耗较低 | 需重新计算布局会绘制,影响整个渲染树,性能开销大 |
关联性: 重排必定触发重绘,重绘不一定触发重排
1.如何避免重绘重排?
1. 使用GPU加速属性
- 优先用transform和opacity做动画: 这两个属性行仅触发重绘,不触发重排,性能最佳
- 启用GPU加速:通过will-change: transform或transform: translatez(0)创建独立合成层
will-change: transform: 明确告知浏览器该元素即将发生变换(如位移,旋转),浏览器会提前创建独立的何合成层,减少重排和重绘的开销
原理: 通过预分配GPU资源,将动画或变换操作交由GPU处理,避免主线程阻塞,提升渲染性能
transform: translateZ(0): 强制触发硬件加速,将元素提升至独立的合成层(类似will-change的效果),但属于非标准的Hack手段
原理: 通过添加一个微不足道的3D变换(Z轴位移为0),欺骗浏览器启用GPU加速
2.批量操作DOM
- 用DocmentFragment批量插入节点: 减少多次DOM操作导致的重排
3.优化CSS与布局
- 避免table布局,改用Flexbox/Grid,减少全局重排风险
- 隐藏元素时用display:none: 而非visibility:hidden,彻底移除文档流减少重排
13. 什么是合成层，什么是硬件加速？
当你使用某些CSS属性(如transform,filtter,opacity等)时,浏览器会将这些元素提升到一个单独的合成层,这意味着这些元素的渲染不会影响其他部分的渲染,从而提高性能
- GPU加速: 合成层使用GPU来加速渲染,提高动画流畅性和页面交互速度
- 合成与重排: 合成层可以减少重排和重绘;
一些常用的能够触发合成层的CSS属性包括:
- transform: 如transform: translateZ(0)--Z轴位移; transforn: translate3d(0,0,0)--3D变换
- opacity: 在透明度变化时,也会触发合成层
- filter: 使用CSS滤镜会使元素提升到合成层
- will-change: transform; 告知浏览器即将发生变换
- video,canvas,iframe等
14. 浏览器渲染流程
- 解析HTML: 浏览器首先从服务器下载HTML文档,构建DOM树,同时下载CSS
- 解析CSS:浏览器将CSS规则解析成CSSOM树
- 构建渲染树: CSSOM树与DOM树一起生成渲染树;
- 布局:计算每个节点在屏幕上的位置和大小
- 绘制: 将渲染树中的元素转换为屏幕上的像素
- 合成: 如果页面中的某些 元素使用了CSS变换,透明度或滤镜等属性,浏览器可能会将这些元素提升到合成层
- 显示: 绘制内容呈现给用户,浏览器将图形缓冲区中的内容发送到屏幕上
15.什么是响应式设计？响应式设计的基本原理是什么？如何做？
1.响应式设计师一种网页开发方法,使万战能够根据用户的设备(如电脑,平板,手机)自动调整布局,图片和内容,以提供最佳的浏览体验,其核心理念是"内容像水一样流动",即页面元素能像水适应容器形状一样适应不同屏幕尺寸
主要特点:
- 适配多种设备(PC/平板/手机)
- 布局,字体,图片等元素动态调整
- 导航菜单等交互元素会根据屏幕尺寸优化(如折叠式导航)
2.基本原理
响应式设计通过一下技术实现自适应效果:
1.流式布局
- 使用百分比.vw.vh等相对单位替代固定像素,使元素宽度随屏幕缩放
- 示例: . container {width: 80%}
2.媒体查询(Media Queries)
- 通过CSS检测设备屏幕尺寸,应用不同的样式规则
- 示例
@media (max-width: 768px) { .sidebar { display: none; } /* 小屏幕隐藏侧边栏 */ }
3.弹性图片与媒体
图片设置max-width: 100%防止溢出,结合srcset按需加载不同分辨率图片
示例: <picture><soure media="(min-width: 768px)" srcset="large.jpg">
4.视口设置
通过<meta>标签控制页面缩放和宽度适配
<meta name="viewport" content="width=device-width, initial-scale=1"> ```[3,11](@ref)。
16. 如何实现单行/多行文本溢出的省略样式
1.单行文本溢出省略
实现方法
.ellipsis{
overflow: hidden; 隐藏溢出内容
white-space: nowrap; 强制文本不换行
text-overflow: ellipsis; 溢出时显示省略号
}
2.多行文本溢出省略
基于行数截断
- -webkit-line-clamp: 2 : 用来限制在一个快元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性
- display: -webkit-box: 和1结合使用,将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical 设置弹性盒子的子元素垂直排列,确保文本按行数截断而非水平溢出
- overflow: hidden : 必要性: 隐藏超出容器范围的文本内容,与text-overflow: ellipsis配合
- text-overflow: ellipsis 在多行截断场景下,明确指定省略号样式(但实际省略号由-webkit-line-clampchufa)
17.如何画一条0.5px的线
1. transform缩放法(最常用)
原理: 将1px元素垂直缩放至0.5倍,视觉上变细
transform:scale(0.5,0.5);
2.Box-shadow 投影法
原理: 用box-shadow的模糊半径模拟细线
.shadow-line{
box-shadow: 0 0.5px 0 #000;
}
18. 说说对CSS预编语言的理解?有哪些区别?
1.CSS预处理器是一种扩展CSS功能的工具,允许开发者使用变量,嵌套规则,混合(Mixins),函数等高级特性编写样式代码,它通过编译器将预处理代码转换为标准CSS,提升代码的可维护性和开发效率,常见的预处理包括Sass,Less和Stylus
2.核心功能
- 变量: 统一管理颜色, 尺寸等(如$primary-color: #3333)
- 嵌套:层级化组织代码,匹配HTML结构(如nav {ul {...}})
- 混合(Mixins): 复用样式块,支持参数化(如按钮生成器)
- 模块化: 通过@import拆分文件,便于协作
- 逻辑控制: 支持条件语句(@if)和循环(@for),动态生成样式
3. Sass和Less 的核心区别总结
一. 语法差异
| 特性 | Sass/SCSS | Less |
|---|---|---|
| 变量符号 | $var（如 $primary: #333;） | @var（如 @primary: #333;） |
| 混合宏 | @mixin 定义，@include 调用 | 类选择器直接调用（如 .mixin()） |
| 嵌套语法 | 支持属性嵌套（如 border: {width: 1px}） | 类CSS嵌套，需大括号 |
| 条件/循环 | 原生支持 @if、@for、@each | 通过 when 和递归模拟，功能较弱 |
二. 功能对比
1. 作用域
- Sass: 块级作用域(内部变量覆盖外部同名变量)
- Less: 延迟加载,类似JS变量提升(内部变量修改会影响全局)
2.模块化
- Sass: 支持自定义函数,颜色运算,控制指令(如@if 生成动态样式)
- Less: 内置函数较少,依赖JS表达式扩展功能