{用标准描述CSS}
By 覃业博
About me
- height:inherit与height:100%的区别
- CSS布局模块简介
- 如何描述居中
- 如何学习标准
- 总结
Agenda
height : 100%和height : inherit的区别
w3.org里的答案
定义了height : inherit的盒子，其高度等于其父盒子的高度。而定义了height : 100%的盒子，其高度等于其包含块的高度。
我的答案
- 简洁
- 严谨
- 减少学习成本
- 这才是CSS
CSS布局模块简介
如何描述居中
line-height + text-align:center
利用盒模型里的margin和padding去填充
absolute布局上下文
50% + -50%
text-align:center + absolute
absolute + margin : auto
网易nec的一个方法
float布局上下文下的居中
float + -50%
margin-bottom : -50%
IFC布局上下文下的水平垂直居中
text-align:center + vertical-align:middle
text-align:center + line-height
text-align:center + font-size
FFC布局上下文下的居中
table布局上下文下的居中
CSS grid布局上下文下的居中
如何学习标准
相关资源
- https://www.w3.org/TR/CSS2/box.html
- https://www.w3.org/TR/CSS2/visuren.html
-
https://www.w3.org/TR/CSS2/visudet.html
核心
用CSS的术语去描述CSS
几个核心术语(知识点)
- 盒子
- 包含块
- BFC
- IFC
总结
仅凭经验和自有的体系去研究CSS有两个比较大的问题，一是学习成本相对要高，二是结论往往不够严谨。w3.org弄出来的一套标准是有它的体系的，用标准描述出来的CSS才是真正的CSS，也同时一定程度避免了前面那两个问题
THANKS