- 兼容性：HTML5 在老版本的浏览器上也可以正常运行
- 实用性
- 非革命性发展：
盒子模型
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
内联元素：
- <time>
- <small>
- <b>
- <big>
- <span>
常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul 等。
常见的内联元素有 span, a, strong, em, label, input, select, textarea , img, br 等。
块元素
-
div
- 整体容器，整体样式
-
article
- 特殊的section 相对比较完整,独立的内容
-
section
- 需要标题 h2
- 对内容进行分段
nav aside 不在元素内加入标题(h1~h6)元素，生成大纲时会在该元素所在位置处添加一个"Untitled Section"
结构范式
<div>
<article>
<section>
<h1></h1>
<p></p>
</section>
<section>
<h1></h1>
<p></p>
</section>
</article>
</div>
CSS3
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
id 选择器
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
在现代布局中，id 选择器常常用于建立派生选择器。范式
#red {color:red;}
<p id="red">这个段落是红色。</p>
CSS 元素选择器
h2, p {color:gray;}
CSS 元素选择器 —>条件
a[href] { +++属性+++
color:red; //包含了href属性 《有效》
}
a[href="http://www.w3school.com.cn/about_us.asp"] {
color: red; //指定文档的超链接变成红色 《有效》 +++值+++
}
p[class~="important"] { +++选择器+++
color: red; //假设您想选择 class 属性中包含 important 的元素
}
//这个规则会选择 title 文本包含 "Figure" 的所有图像。
img[title~="Figure"] { +++值+++
border: 1px solid gray;
}
div.sidebar { +++class:sidebar+++
background:blue;
}
<a href="http://w3school.com.cn">W3School</a>
| 类型 | 描述 |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
CSS 多类选择器
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>
类选择器
范式:
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义CSS 定位 (Positioning)：
static: 静态，相对定位固定位置（改了left等属性，无效）
relative: 相对位移元素框 偏移 某个距离
absolute: 绝对定位，只想对于顶级级元素[1]（未设置的话还是基于上一个元素<div><p>等的位置）
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
CSS 相对定位实例
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
-
即：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 ↩
