CSS常考题 - 技术栈

CSS常考题

ZXT2025-03-08 10:56

1.实现一条0.5px的线

js 复制代码

<style>
.div::before {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    transform:sccaleY(0.5);
    transform-origin:bottom center;
}
</style>

<div class="div">
<div/>

2.长文本省略截断

js 复制代码

<style>
.div {
width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
<style/>

<div class="div">
这是一个好长的文本
<div/>

3.长文本多行省略截断（一盒二竖三隐藏，三行加三点）

js 复制代码

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-clam:3;
overflow:hidden;
text-overflow:ellipsis

3.css样式隔离

指在组件开发中，确保每个组件的样式不会影响其他组件。

vue中默认的实现方式是通过style标签的scoped即可实现样式隔离， vue中通过给组件根元素和子元素添加同样的一个独一无二的属性。接着通过属性选择器来实现样式隔离。我们可以通过>>>来实现嵌套组件的样式穿透。 vue也支持cssModules,我们将style标签中的scoped属性换成module。他的原理是通过给类名添加随机的字符串后缀。

React 中我们可以使用 CSS-in-JS 方案（例如 styled-components），它允许在 JSX 中直接编写组件级作用域的 CSS 样式，通过动态生成的完全随机类名实现样式隔离，并能通过组件化的方式复用样式。

4.CSS3 新特性

动画 css 属性过渡动画transition 和支持@keyframs 的关键帧动画animation。animation适合复杂动画，能无限循环。
变基属性 transform 可以支持缩放，移动等变基属性。你可以通过设置translateX来触发GPU加速效果。
布局支持了弹性布局和grid网格布局
自适应

支持@media 媒体查询 calc计算属性

选择器元素选择器伪类选择器伪元素选择器
rgba函数：设置透明度
给面试官的亮点：

背景渐变函数linear-gradient 能够实现背景渐变的效果。不用找图片，能够做到减少http请求，做到性能优化

backface-visiablity 背面可见性