灵活运用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()
  • 代码:在线演示

灵活运用CSS开发技巧(第二章)_第1张图片

使用:valid和:invalid校验表单

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

灵活运用CSS开发技巧(第二章)_第2张图片

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

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

灵活运用CSS开发技巧(第二章)_第3张图片

使用:hover描绘鼠标跟随

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

灵活运用CSS开发技巧(第二章)_第4张图片

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

你可能感兴趣的:(js,web前端,html+css)