{用标准描述CSS}

By 覃业博

About me

• 覃业博
• 1992.05.21，从事前端1年半
• Links
  • 领英
  • 知乎
  • 微博

• height:inherit与height:100%的区别
• CSS布局模块简介
• 如何描述居中
• 如何学习标准
• 总结

Agenda

height : 100%和height : inherit的区别

张鑫旭的答案 : http://www.zhangxinxu.com/wordpress/2015/02/different-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