【很多时候跟着书和系统的视频网站学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题,Web学习交流群可以帮到你】点击进入 一起学习,一起交流,准备了基础,进阶学习规划与资料,每天也会准时讲一些项目实战案例。
灵活运用CSS开发技巧(第二章)
灵活运用CSS开发技巧(目 录)
Layout Skill
使用vw定制rem自适应布局
- 要点:移动端使用
rem布局
需要通过JS设置不同屏幕宽高比的font-size
,结合vw
单位和calc()
可脱离JS的控制 - 场景:rem页面布局(不兼容低版本移动端系统)
- 兼容:vw、calc()
/* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } 复制代码
使用:nth-child()选择指定元素
- 要点:通过
:nth-child()
筛选指定的元素设置样式 - 场景:表格着色、边界元素排版(首元素、尾元素、左右两边元素)
- 兼容::nth-child()
- 代码:在线演示
使用writing-mode排版竖文
- 要点:通过
writing-mode
调整文本排版方向 - 场景:竖行文字、文言文、诗词
- 兼容:writing-mode
- 代码:在线演示
使用text-align-last对齐两端文本
- 要点:通过
text-align-last:justify
设置文本两端对齐 - 场景:未知字数中文对齐
- 兼容:text-align-last
- 代码:在线演示
使用:not()去除无用属性
- 要点:通过
:not()
排除指定元素不使用设置样式 - 场景:符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)
- 兼容::not()
- 代码:在线演示
使用object-fit规定图像尺寸
- 要点:通过
object-fit
使图像脱离background-size
的约束,使用<img>
来标记图像背景尺寸 - 场景:图片尺寸自适应
- 兼容:object-fit
- 代码:在线演示
使用overflow-x排版横向列表
- 要点:通过
flexbox
或inline-block
的形式横向排列元素,对父元素设置overflow-x:auto
横向滚动查看 - 场景:横向滚动列表、元素过多但位置有限的导航栏
- 兼容:overflow-x
- 代码:在线演示
使用text-overflow控制文本溢出
- 要点:通过
text-overflow:ellipsis
对溢出的文本在末端添加...
- 场景:单行文字溢出、多行文字溢出
- 兼容:text-overflow、line-clamp、box-orient
- 代码:在线演示
使用transform描绘1px边框
- 要点:分辨率比较低的屏幕下显示1px的边框会显得模糊,通过
::before
或::after
和transform
模拟细腻的1px边框 - 场景:容器1px边框
- 兼容:transform
- 代码:在线演示
使用transform翻转内容
- 要点:通过
transform:scale3d()
对内容进行翻转(水平翻转、垂直翻转、倒序翻转) - 场景:内容翻转
- 兼容:transform
- 代码:在线演示
相关CSS知识点,遇见的面试题:
你需要知道的30个CSS知识点
【面试】2020年最新web前端经典面试题试题及答案,希望能帮助到大家!(一)
在此小编再次感谢大家对我的支持,需要更多相关资料,视频请加群点击进入1045267283