共计 3510 个字符,预计需要花费 9 分钟才能阅读完成。
一 目录
不折腾的前端,和咸鱼有什么区别
目录 |
---|
一 目录 |
二 温习知识点 |
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] 文档流:将窗体自上而下分成一行一行,并在每行中按从左至右一次排放元素,成为文档流,也就一般流
- [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] 在属性前面应用
- [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/ 处取得。
正文完