灵活运用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的约束，使用来标记图像背景尺寸

场景：图片尺寸自适应

兼容：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相关资料加群点击进入。