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] 如何解决：设置、通过 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 求职系列 - 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 其他

你可能感兴趣的:(前端,面试,求职,css,css3)

一目录

二复习知识点

三参考文献