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

一 目录

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

目录
一 目录
二 复习知识点
2.1 基础
2.2 盒子模型
2.3 移动端
三 参考文献
3.1 面试
3.2 布局
3.3 Flex
3.4 移动端
3.5 CSS
3.6 CSS3
3.7 层叠上下文
3.8 BFC 块格式化上下文
3.9 其他

二 复习知识点

返回目录

复习知识点有 3 个部分。

2.1 基础

返回目录

文章地址：基础

• [x] DIV + CSS 布局优缺点
• [x] LoVe HAte 原则：a 标签 hover 事件失效问题，link -> visited -> hover -> active
• [x] 响应式：一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本，通过 @media 检测不同设备屏幕尺寸做处理

• [x] 垂直居中

  • [x] Flex 布局：align-items 和 justify-content
  • [x] 绝对定位布局：absolute + left/right/bottom/top: 0 + margin: auto
  • [x] transform 布局：absolute + transform: translate(-50%, -50%)
• [x] 文档流：将窗体自上而下分成一行一行，并在每行中按从左至右一次排放元素，成为文档流，也就普通流
• [x] 脱离文档流：脱离文档流的元素，将不再在文档流占据空间，而是漂浮在文档流上方。float: left/right 以及 position: absolute/fixed

• [x] 块级作用域上下文（BFC）

  • [x] 阐释：指页面上一个隔离的独立容器，容器内部的子元素不会影响到外面的元素，反之外面的元素也不会影响容器里面的元素
  • [x] 解决问题：清除元素内部浮动、解决外边距合并问题
  • [x] 产生条件：根元素 html、float: left/right、position: absolute/fixed、display: inline-block/flex/grid、overflow: hidden
• [x] px、em、rem 和 vw/vh 区别
• [x] link 和 @import 区别
• [x] 渐进增减和优雅降级
• [x] 设置隐藏元素：display: none、visibility: hidden、opacity: 0

• [x] CSS 选择器

  • [x] 在属性后面使用 !important 会覆盖页面任意位置定义的元素样式
  • [x] 作为 style 属性写在元素内的样式（行内样式）
  • [x] id 选择器
  • [x] 类选择器 | 伪类选择器 | 属性选择器（后面样式覆盖前面样式）
  • [x] 标签选择器
  • [x] 通配符选择
  • [x] 浏览器自定义样式
• [x] 层叠上下文：background/border、z-index 为负值、块级元素、浮动元素、行内元素、z-index: 0 / auto、z-index 为正值
• [x] display：inline、block、inline-block、table、none
• [x] position：static、relative、position、fixed、sticky
• [x] CSS 3 新特性

• [x] CSS 优化

  • [x] 避免链式选择符（从右往左匹配规则）
  • [x] 避免不必要重复
  • [x] 避免 * 通配符
  • [x] 规定引入位置：在 head 定义 link

2.2 盒子模型

返回目录

文章地址：盒子模型

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

2.3 移动端

返回目录

文章地址：移动端

• [x] 使用单位：em、rem、% 以及 vw/vh
• [x] 布局：使用 rem 单位、通过 position: relative/absolute 布局、Flex 布局
• [x] 1px 实现：利用 ::after 伪类 + transform: scaleY(0.5)、利用 box-shadow: 0 0.5 0 0 #ccc

• [x] 300ms 点击延迟

  • [x] 为什么出现：需要通过延迟判断用户是需要单击还是双击
  • [x] 如何解决：设置 <meta>、通过 FastClick 库

三 参考文献

返回目录

本系列参考文献有 46 篇。

3.1 面试

返回目录

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

3.2 布局

返回目录

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

3.3 Flex

返回目录

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

3.4 移动端

返回目录

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

3.5 CSS

返回目录

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

3.6 CSS3

返回目录

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

3.7 层叠上下文

返回目录

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

3.8 BFC 块格式化上下文

返回目录

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

3.9 其他

返回目录

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

---

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。