重构不完全教程集之一_html/css_WEB-ITnose-html教程-PHP中文网

重构不完全教程集之一_html/css_WEB-ITnose

WBOY

发布： 2016-06-21 08:55:45

原创

993 人浏览过

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

html标签

HTML5 标签列表
All HTML5 Tags

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

<!--[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><![endif]-->

登录后复制

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

<!--[if lt IE 9]><script type="text/javascript"> document.createElement('header'); ...</script><![endif]-->

登录后复制

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

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;}

登录后复制

盒模型

box-sizing详解

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

border-box表示设置的 width/height 包括 padding 和 border
content-box表示不包括 padding 和 border
不论是border-box还是content-box都不包括margin

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

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

选择器

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

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

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

深入解析CSS样式层叠权重值
CSS 选择器

重置

css重置分为归零重置及纠正重置

归零重置的代表为： Eric Meyer’s “Reset CSS” 2.0
纠正重置代表为： normalize.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），一类是灵活的（如实现一个左边栏固定的布局，可以使用的技术就多了）。相对来说可灵活使用的则更需要掌握各种实现方案的利弊

MDN CSS reference
codrops CSS reference
css 101

单位

css3新增了rem单位及vw系列单位。rem单位是以html的字体大小为相对计算的，而vw则是以视窗大小的

rem详解
vw

居中

包括水平及垂直居中，除了常规的水平居中 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 来调整

Centering in CSS: A Complete Guide
object-fit