兼容性：HTML5 在老版本的浏览器上也可以正常运行

实用性

非革命性发展：

盒子模型

w3c

盒子模型.jpg

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的同行特性。

内联元素：

常见的块级元素有 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"

结构范式

CSS3

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置

外部样式表

内部样式表(位于

标签内部)

内联样式(在 HTML 元素内部)

因此，内联样式(在 HTML 元素内部)拥有最高的优先权，这意味着它将优先于以下的样式声明：

标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明(缺省值)。

id 选择器

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

在现代布局中，id 选择器常常用于建立派生选择器。范式

#red {color:red;}

这个段落是红色。

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;

}

W3School

类型

描述

[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;}

This paragraph is a very important warning.

类选择器

范式:

.center {text-align: center}

This heading will be center-aligned

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义CSS 定位 (Positioning)：

static: 静态，相对定位固定位置(改了left等属性，无效)

relative: 相对位移元素框 偏移 某个距离

absolute: 绝对定位，只想对于顶级级元素(未设置的话还是基于上一个元素