重构html布局,重构不完全教程集之一

本文作者：IMWeb 结一

未经同意，禁止转载

“无上甚深微妙法，百千万劫难遭遇，我今见闻得受持，愿解如来真实义。”

——《开经偈》

html标签

ie8- 不支持html5新增标签，可通过引入js来实现：html5shiv

或按实际使用手写js兼容，document.createElement

最后重置下html5标签的css默认样式：

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {

display:block;

}

css入门

盒模型

盒模型可通过box-sizing: border-box | content-box设置，默认值为content-box，ie8+支持。

border-box表示设置的width/height包括padding和border

content-box表示不包括padding和border

不论是border-box还是content-box都不包括margin

outline不影响盒子大小

对应上图，如果是默认的话，则width为605px，如是border-box的话则为605+24+103+30=673px。

常配合百分比单位使用，尤其应用在移动端。如width:100%;padding:10px;，如果不设置为border-box，则实际宽度为100%+40px，不符合我们的预期要求。

选择器

css的选择器是从后往前查询，所以层级越深，效率越低，一般建议最多不超过4层。

css选择器包括：通配符*选择器，class选择器，id选择器，元素选择器，属性选择器，伪类选择器，伪元素选择器，最后

css选择器权重原则：!important > 行内样式 > id > 类/属性/伪类 > 元素/伪元素；权重相同的按照样式表中出现的顺序，后面的覆盖前面的

重置

浏览器都有自己的默认样式，各个浏览器的默认样式可参考：浏览器默认样式参考指南

所以为了消除浏览器的默认样式，以达到各个浏览器一致表现就出现了css重置，总得来说css重置分为归零重置及纠正重置

如果你想省事的话直接引入normalize.css，然后再进行部分归零重置；如果深入研究可以把两个揉合一起，可参考sandal reset

属性详解

属性大概分为下面几类：

显示：display，visibility，overflow等

位置：position，float，clear，z-index，transform等

大小：width，height，margin，padding，border，outline，box-sizing等

文字： font系列，color，text系列等

背景：background系列，gradient系列等

修饰：border-radius，box-shadow，opacity，appearance，filter，clip等

布局：flex，grid等

动画：transition，animation等

从使用上大概分为两类，一类是死板的(如设置文本颜色只能用color)，一类是灵活的(如实现一个左边栏固定的布局，可以使用的技术就多了)。相对来说可灵活使用的则更需要掌握各种实现方案的利弊

单位

px：绝对单位，

em：相对单位，相对于最近父级元素的font-size

%：相对单位(padding/margin的百分比单位以width为基准)

rem：相对单位，相对于根元素html的font-size，css3新增

vw、vh、vmin、vmax：相对单位，相对于视窗宽/高，css3新增

居中

包括水平及垂直居中，除了常规的水平居中text-algin:center、margin-left:auto;margin-right:auto和垂直居中vertical-align:middle，line-height: height(单行文字垂直的line-height等于height)，还有postition方法，首先设置top:50%;left:50%，再通过margin-left:-width/2;margin-top:-height/2，或css3的transform: translate(-50%, -50%)调整居中，最后还有为布局而生的flex方法。另：对于img或video还有最新的object-position来调整

布局

在flex出现之前，布局不外乎float，position，还有少量的inline-block及table；而现在有了flex和grid，更是如虎添翼。

z-index

line-height

BFC

CSS3 学习

CSS3 Tutorials(包括gradient，transform，transition，animation，flexbox，mutilple background等)

兼容

浏览器兼容分为两部分：浏览器是否支持；如何针对浏览器写hack。支持情况可以通过can i use查询，而针对各种浏览器写hack可以使用browser hacks

注：该系列将会汇总在github上的重构优秀教程合集