CSS 布局 - 水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
注意:如果没有设置width属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用margin: auto;并将它放到块元素中:
左右对齐 - 使用定位方式
我们可以使用position: absolute;属性来对齐元素:
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示:当使用position来对齐元素时, 通常
元素会设置margin和padding。 这样可以避免在不同的浏览器中出现可见的差异。当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明： 左右对齐 - 使用 float 方式 我们也可以使用float属性来对齐元素: 当像这样对齐元素时，对
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：
垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用padding:
如果要水平和垂直都居中，可以使用padding和text-align: center:
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
除了使用padding和line-height属性外,我们还可以使用transform属性来设置垂直居中:
CSS组合选择符
组合选择符说明了两个选择器直接的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
1.后代选择器(以空格 分隔)
2.子元素选择器(以大于>号分隔）
3.相邻兄弟选择器（以加号+分隔）
4.普通兄弟选择器（以波浪号～分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有
元素插入到
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了
：
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于
元素:
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有
:
CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
CSS :first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明，这样 :first-child 才能生效。
匹配第一个
元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的
元素：
匹配所有
元素中的第一个 元素
在下面的例子中，选择相匹配的所有
元素的第一个 元素：
匹配所有作为第一个子元素的
元素中的所有 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的
元素中的所有 元素：
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明才能支持;lang伪类。
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
CSS伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
注意："first-line" 伪元素只能用于块级元素。
注意：下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
注意："first-letter" 伪元素只能用于块级元素。
注意：下面的属性可应用于 "first-letter" 伪元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
文章段落
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多个伪元素
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片：
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片：
CSS 导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的
。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用
- 和
- 元素非常有意义：
从列表中删除边距和填充
例子解析：list-style-type：none-移除列表前小标签，一个导航栏并不需要列表标记/ 移除浏览器的默认设置将边距和填充设置为0
上面例子中的代码是垂直和水平导航栏使用的标准代码
垂直导航栏
上面的代码，我们只需要 元素的样式，建立一个垂直的导航栏：
示例说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
注意：请务必指定元素在垂直导航栏的宽度，如果省略宽度，IE6可能产生意想不到的效果。
垂直导航条实例
创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：
激活/当前导航条实例在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：
创建链接并添加边框可以在
- or上添加text-align:center样式来让链接居中。
可以在border