jsliang 求职系列 - 43 - CSS 系列汇总

一 目录

不折腾的前端，和咸鱼有什么区别

二 复习知识点

复习知识点有 3 个部分。

2.1 基础

文章地址：基础

• DIV + CSS 布局优缺点
• LoVe HAte 原则：a 标签 hover 事件失效问题，link -> visited -> hover -> active
• 响应式：一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本，通过 @media 检测不同设备屏幕尺寸做处理
• 垂直居中
  • Flex 布局：align-items 和 justify-content
  • 绝对定位布局：absolute + left/right/bottom/top: 0 + margin: auto
  • transform 布局：absolute + transform: translate(-50%, -50%)
• 文档流：将窗体自上而下分成一行一行，并在每行中按从左至右一次排放元素，成为文档流，也就普通流
• 脱离文档流：脱离文档流的元素，将不再在文档流占据空间，而是漂浮在文档流上方。float: left/right 以及 position: absolute/fixed
• 块级作用域上下文（BFC）
  • 阐释：指页面上一个隔离的独立容器，容器内部的子元素不会影响到外面的元素，反之外面的元素也不会影响容器里面的元素
  • 解决问题：清除元素内部浮动、解决外边距合并问题
  • 产生条件：根元素 html、float: left/right、position: absolute/fixed、display: inline-block/flex/grid、overflow: hidden
• px、em、rem 和 vw/vh 区别
• link 和 @import 区别
• 渐进增减和优雅降级
• 设置隐藏元素：display: none、visibility: hidden、opacity: 0
• CSS 选择器
  • 在属性后面使用 !important 会覆盖页面任意位置定义的元素样式
  • 作为 style 属性写在元素内的样式（行内样式）
  • id 选择器
  • 类选择器 | 伪类选择器 | 属性选择器（后面样式覆盖前面样式）
  • 标签选择器
  • 通配符选择
  • 浏览器自定义样式
• 层叠上下文：background/border、z-index 为负值、块级元素、浮动元素、行内元素、z-index: 0 / auto、z-index 为正值
• display：inline、block、inline-block、table、none
• position：static、relative、position、fixed、sticky
• CSS 3 新特性
• CSS 优化
  • 避免链式选择符（从右往左匹配规则）
  • 避免不必要重复
  • 避免 * 通配符
  • 规定引入位置：在 head 定义 link

2.2 盒子模型

文章地址：盒子模型

• 标准盒子：标准盒子的 contentWidth 等于设置的 width，它的实际总宽度 = width + padding + border + margin。（高度也一样）
• 怪异盒子：怪异盒子的 contentWidth 等于设置的 width + padding + border，它的实际总宽度 = contentWidth + margin。（高度也一样）
• 设置盒子模式：inherit 继承、content-box 标准盒子、border-box 怪异盒子

2.3 移动端

文章地址：移动端

• 使用单位：em、rem、% 以及 vw/vh
• 布局：使用 rem 单位、通过 position: relative/absolute 布局、Flex 布局
• 1px 实现：利用 ::after 伪类 + transform: scaleY(0.5)、利用 box-shadow: 0 0.5 0 0 #ccc
• 300ms 点击延迟
  • 为什么出现：需要通过延迟判断用户是需要单击还是双击
  • 如何解决：设置 <meta>、通过 FastClick 库

三 参考文献

本系列参考文献有 46 篇。

3.1 面试

• 50道CSS经典面试题【阅读建议：30min】
• 12个HTML和CSS必须知道的重点难点问题【阅读建议：30min】

3.2 布局

• 干货!各种常见布局实现+知名网站实例分析【阅读建议：1h】
• CSS 常见布局方式【阅读建议：1h】

3.3 Flex

• Flex 布局教程：语法篇【阅读建议：1h】
• Flex 布局教程：实例篇【阅读建议：1h】
• 30 分钟学会 Flex 布局【阅读建议：30min】
• 写给自己看的display: flex布局教程【阅读建议：30min】

3.4 移动端

• Mars - mobile needs a hero【阅读建议：无】
• 腾讯移动Web前端知识库【阅读建议：无】
• 关于移动端适配，你必须要知道的【阅读建议：30min】
• 如何解决移动端Click事件300ms延迟的问题？【阅读建议：20min】
• 设计方案--移动端延迟300ms的原因以及解决方案【阅读建议：20min】
• 细说移动端 经典的REM布局 与 新秀VW布局【阅读建议：30min】
• 移动端1px解决方案【阅读建议：30min】
• Retina屏的移动设备如何实现真正1px的线？【阅读建议：20min】
• rem布局解析【阅读建议：5min】

3.5 CSS

• CSS 常用技巧【阅读建议：30min】
• CSS设置居中的方案总结-超全【阅读建议：30min】
• CSS性能优化的8个技巧【阅读建议：20min】
• css加载会造成阻塞吗？【阅读建议：30min】
• css加载会造成阻塞吗【阅读建议：30min】
• 不可思议的纯 CSS 滚动进度条效果【阅读建议：30min]
• CSS 定位详解【阅读建议：20min】
• Css单位px，rem，em，vw，vh的区别【阅读建议：10min】
• 谈谈 rem 与 vw -- rem【阅读建议：5min】
• 杀了个回马枪，还是说说position:sticky吧【阅读建议：20min】
• css行高line-height的一些深入理解及应用【阅读建议：10min】
• 浏览器将rem转成px时有精度误差怎么办？【阅读建议：20min】
• 彻底搞懂word-break、word-wrap、white-space【阅读建议：20min】

3.6 CSS3

• 个人总结（css3新特性）【阅读建议：1h】
• 高性能 CSS3 动画【阅读建议：20min】
• 趣味CSS3效果挑战小汇总【阅读建议：20min】
• 从青铜到王者10个css3伪类使用技巧和运用，了解一哈【阅读建议：20min】

3.7 层叠上下文

• 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index【阅读建议：30min】
• 深入理解CSS中的层叠上下文和层叠顺序【阅读建议：40min】

3.8 BFC 块格式化上下文

• 什么是BFC？什么条件下会触发？应用场景有哪些？【阅读建议：20min】
• 学习 BFC (Block Formatting Context)【阅读建议：20min】
• MDN - 块格式化上下文【阅读建议：20min】
• BFC(块级格式化上下文)【阅读建议：5min】

3.9 其他

• Web开发者需要知道的CSS Tricks【阅读建议：无】
• CSS世界中那些说起来很冷的知识【阅读建议：30min】
• 从网易与淘宝的font-size思考前端设计稿与工作流【阅读建议：20min】
• 2019年，你是否可以抛弃 CSS 预处理器？【阅读建议：10min】
• 浅谈 CSS 预处理器（一）：为什么要使用预处理器？【阅读建议：20min】
• 布局的下一次革新【阅读建议：20min】