灵活运用CSS开发技巧（第二章）

【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】点击进入 一起学习，一起交流，准备了基础，进阶学习规划与资料，每天也会准时讲一些项目实战案例。

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

灵活运用CSS开发技巧(目 录)

使用letter-spacing排版倒序文本

• 要点：通过letter-spacing设置负值字体间距将文本倒序
• 场景：文言文、诗词
• 兼容：letter-spacing
• 代码：在线演示

使用margin-left排版左重右轻列表

• 要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
• 场景：右侧带图标的导航栏
• 兼容：margin
• 代码：在线演示

Behavior Skill
使用overflow-scrolling支持弹性滚动

• 要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
• 场景：iOS页面滚动
• 兼容：iOS自带-webkit-overflow-scrolling

body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}

使用transform启动GPU硬件加速

• 要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
• 场景：动画元素(绝对定位、同级中超过6个以上使用动画)
• 兼容：transform

.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */ }

使用attr()抓取data-*

• 要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
• 场景：提示框
• 兼容：data-*、attr()
• 代码：在线演示

使用:valid和:invalid校验表单

• 要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容
• 场景：表单校验
• 兼容：pattern、:valid、:invalid
• 代码：在线演示

使用:focus-within分发冒泡响应

• 要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式
• 场景：登录注册弹框、表单校验、离屏导航、导航切换
• 兼容：:focus-within、:placeholder-shown
• 代码：在线演示

使用:hover描绘鼠标跟随

• 要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
• 场景：鼠标跟随轨迹、水波纹、怪圈
• 兼容：:hover
• 代码：在线演示

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