当前位置: 首页 > news >正文

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 64.7750*1334375*6673262
  • 物理像素(设备像素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/SCSSLess
变量符号$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表达式扩展功能 

http://www.dtcms.com/a/269844.html

相关文章:

  • 从零构建MCP服务器:FastMCP实战指南
  • 跨平台软件构建方法及工具介绍
  • 深度学习-多分类
  • Java 实现 Excel 文件对比与数据填充
  • 多线程(1)
  • Minmax 算法与 Alpha-Beta 剪枝小教学
  • (普及−)B3629 吃冰棍——二分/模拟
  • 【Spring WebSocket详解】Spring WebSocket从入门到实战
  • Spring Boot 事务失效问题:同一个 Service 类中方法调用导致事务失效的原因及解决方案
  • MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷
  • CD46.【C++ Dev】list的模拟实现(1)
  • 一天一道Sql题(day02)
  • SSH密钥 与 Ed25519密钥 是什么关系
  • 服务器的RAID存储方案如何选择最合适?
  • 20250708-2-Kubernetes 集群部署、配置和验证-使用kubeadm快速部署一个K8s集群_笔记
  • 兰顿蚂蚁路径lua测试
  • 无缝高清矩阵与画面分割器的区别
  • OpenWebUI(5)源码学习-后端socket通信模块
  • Apache DolphinScheduler保姆级实操指南:云原生任务调度实战
  • iOS打包流程
  • navicat导出数据库的表结构
  • 鸿蒙分布式开发实战指南:让设备协同像操作本地一样简单
  • 深度 |以数字技术赋能服务消费场景创新
  • kafka如何让消息均匀的写入到每个partition
  • Spring Boot 多数据源切换:AbstractRoutingDataSource
  • Elasticsearch Kibana 使用 原理
  • 用基础模型构建应用(第七章)AI Engineering: Building Applications with Foundation Models学习笔记
  • Linux基础篇、第五章_01利用 Cobbler 实现 CentOS 7 与 Rocky 9.5 自动化安装全攻略
  • 记录一次在 centos 虚拟机 中 安装 Java环境
  • windows内核研究(系统调用 1)