一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 复习知识点 |
| 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 基础
文章地址：基础
- 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】
jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 https://github.com/LiangJunrong/document-library 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。
评论 (1)
