本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载
“无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《开经偈》
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: border-box | content-box
设置,默认值为content-box
,ie8+支持。
width/height
包括padding
和border
padding
和border
对应上图,如果是默认的话,则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重置分为归零重置及纠正重置
如果你想省事的话直接引入normalize.css,然后再进行部分归零重置;如果深入研究可以把两个揉合一起,可参考sandal reset
属性大概分为下面几类:
从使用上大概分为两类,一类是死板的(如设置文本颜色只能用color),一类是灵活的(如实现一个左边栏固定的布局,可以使用的技术就多了)。相对来说可灵活使用的则更需要掌握各种实现方案的利弊
包括水平及垂直居中,除了常规的水平居中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,更是如虎添翼。
浏览器兼容分为两部分:浏览器是否支持;如何针对浏览器写hack。支持情况可以通过can i use查询,而针对各种浏览器写hack可以使用browser hacks
注:该系列将会汇总在github上的重构优秀教程合集