HTML5与CSS3权威指南

• 兼容性：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: 绝对定位，只想对于顶级级元素^[1]（未设置的话还是基于上一个元素

等的位置）

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS 相对定位实例

w3c

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

---

1. 即：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 ↩