灵活运用CSS开发技巧(第一章)

【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，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
• 代码：在线演示

更多相关Web前端，CSS，HTML，JS相关资料加群点击进入。