【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】点击进入 一起学习，一起交流，准备了基础，进阶学习规划与资料，每天也会准时讲一些项目实战案例。
Layout Skill
使用vw定制rem自适应布局
要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
场景：rem页面布局(不兼容低版本移动端系统)
/* 基于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设置文本两端对齐
场景：未知字数中文对齐
代码：在线演示
使用: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相关资料加群点击进入。
