清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
实例
.text_line { clear:both; }
可以看到中间的标签的样式加入了清除浮动属性之后，就单独成为块元素独占一行了。
加入没有这个浮动清除属性。
文本首字靠左浮动
margin 和padding 都是对块元素有效果，对内联元素无关。
而利用display:block可以将内联元素变成块元素使得margin、padding有效。
CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
CSS 布局 - 水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
图片居中对齐
要让图片居中对齐, 可以使用margin: auto;并将它放到块元素中:
实例
img { display: block; margin: auto; width: 40%; }
左右对齐 - 使用定位方式
我们可以使用position: absolute;属性来对齐元素:
实例
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
提示:当使用position来对齐元素时, 通常<body>元素会设置margin和padding。 这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。
当使用 position 属性时，请始终设置 !DOCTYPE 声明。
左右对齐 - 使用 float 方式
我们也可以使用float属性来对齐元素:
实例
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
尝试一下 »
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用padding:
我是垂直居中。
实例
.center { padding: 70px 0; border: 3px solid green; }
尝试一下 »
如果要水平和垂直都居中，可以使用padding和text-align: center:
我是水平和垂直都居中的。
实例
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
垂直居中 - 使用 line-height
我是垂直居中的。
实例
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }
/* 如果文本有多行，添加以下代码: */
.center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
在360浏览器里，去掉了.center p{...},结果反而不是垂直居中状态。
然后发现，360浏览器对p标签默认添加了一个margin-top:16px;
所以修改p的marginbiao
CSS组合选择符
CSS 组合选择符
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔）
CSS伪类(Pseudo-classes)
anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
实例
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */
尝试一下 »
注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS 语法</a>
如果在上面的例子的链接已被访问，它会显示为红色。
CSS :first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明<!DOCTYPE>，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
实例
p:first-child { color:blue; }
尝试一下 »
匹配所有<p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：
实例
p > i:first-child { color:blue; }
尝试一下 »
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
实例
p:first-child i { color:blue; }
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
q:lang(no)只对lang标签有效，其他的用如下方式。
使用 :focus
这个例子演示了如何使用 :focus伪类。
CSS:in-range选择器
设置了该类型的input的边界。
CSS:invalid选择器
可以看到，当输入的email跟input的type类型要求不一致时候就会使得边框显红。
所有CSS伪类/元素
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
实例
p:first-line { color:#ff0000; font-variant:small-caps; }
尝试一下 »
注意："first-line" 伪元素只能用于块级元素。
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多个伪元素
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
实例
p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
实例
h1:before { content:url(smiley.gif); }
导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的
。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
实例
<ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul>
设置导航栏的样式可以对li进行设置样式也可以对a进行设置样式，但是对a设置样式是正确的选择；
比如以上对li设计样式，然后鼠标移动到上的时候的响应：
可以看到只是对li的背景有响应，而对a标签无响应
这样的话，颜色就不好看了。
现在对a标签设置行样式，因为a是内联元素，必须转变为块元素。
可以看到颜色更加好看了。
这样连a的文字样式也发生了改变。
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：
li { float:left; } a { display:block; width:60px; }
实例解析：
float:left - 使用浮动块元素的幻灯片彼此相邻display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
导航下拉菜单：在导航条内部设置下拉菜单
