CSS常考题

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 背面可见性

相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js