关于前端: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】

一 目录

二 温习知识点

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 其余

一目录

二温习知识点

三参考文献