CSS 布局 - 水平 & 垂直对齐
元素居中对齐
要水平居中对齐一个元素(如<div>), 可以使用margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
注意:如果没有设置width属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用text-align: center;
图片居中对齐
要让图片居中对齐, 可以使用margin: auto;并将它放到块元素中:
左右对齐 - 使用定位方式
我们可以使用position: absolute;属性来对齐元素:
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示:当使用position来对齐元素时, 通常<body>元素会设置margin和padding。 这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div
class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加
17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：
左右对齐 - 使用 float 方式
我们也可以使用float属性来对齐元素:
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "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.普通兄弟选择器（以波浪号～分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
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的之前版本必须声明<!DOCTYPE>，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
匹配所有<p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;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;}<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多个伪元素
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
CSS 导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的
。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
从列表中删除边距和填充
上面例子中的代码是垂直和水平导航栏使用的标准代码
垂直导航栏
上面的代码，我们只需要 <a>元素的样式，建立一个垂直的导航栏：
示例说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
注意：请务必指定<a>元素在垂直导航栏的宽度，如果省略宽度，IE6可能产生意想不到的效果。
垂直导航条实例
创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：
激活/当前导航条实例
在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：
创建链接并添加边框
可以在<li>or<a>上添加text-align:center样式来让链接居中。
可以在border<ul>上添加border属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个<li>元素上添加border-bottom:
全屏高度的固定导航条
接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内联列表项
建立一个横向导航栏的方法之一是指定元素， 上述代码是标准的内联:
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：
水平导航条实例
创建一个水平导航条，在鼠标移动到选项后修改背景颜色。
激活/当前导航条实例
在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中
链接右对齐
将导航条最右边的选项设置右对齐 (float:right;)：
添加分割线
<li>通过border-right样式来添加分割线:
固定导航条
可以设置页面的导航条固定在头部或者底部：
灰色水平导航条
CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
实例解析
HTML 部分：
我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown类使用position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用position:absolute) 的右下角位置。
.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意min-width的值设置为 160px。你可以随意修改它。注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置width为 100% (overflow:auto设置可以在小尺寸屏幕上滚动)。
我们使用box-shadow属性让下拉菜单看起来像一个"卡片"。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项：
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：
下拉内容对齐方式
float:left;
float:right;
如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码right: 0;
CSS提示工具
提示工具在鼠标移动到指定元素后触发
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
实例解析
HTML)使用容器元素 (like
) 并添加"tooltip"类。在鼠标移动到
上时显示提示信息。
提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。
CSS)tooltip类使用position:relative, 提示文本需要设置定位值position:absolute。注意: 接下来的实例会显示更多的定位效果。
tooltiptext类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
CSS3border-radius属性用于为提示框添加圆角。
:hover选择器用于在鼠标移动到到指定元素
上时显示的提示。
定位提示工具
以下实例中，提示工具显示在指定元素的右侧(left:105%) 。
注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距（padding）是 5px。
如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。
在提示框显示在左边的情况也是这个原理。
如果你想要提示工具显示在头部和底部。我们需要使用margin-left属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。
添加箭头
我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。
以下实例演示了如何为显示在顶部的提示工具添加底部箭头：
*实例解析
在提示工具内定位箭头:top: 100%, 箭头将显示在提示工具的底部。left: 50%用于居中对齐箭头。
注意：border-width属性指定了箭头的大小。如果你修改它，也要修改margin-left值。这样箭头在能居中显示。
border-color用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：
以下两个实例是左右两边的箭头实例：
淡入效果
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
CSS图片库
点击图片进入图片库
使用css创建的
CSS属性选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：
属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
表单样式
属性选择器样式无需使用class或id的形式:
CSS 表单
一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：
输入框(input) 样式
使用 width 属性来设置输入框的宽度：
以上实例中设置了所有 <input> 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：
1.input[type=text]- 选取文本输入框
2.input[type=password]- 选择密码的输入框
3.input[type=number]- 选择数字的输入框
4....
输入框填充
使用padding属性可以在输入框中添加内边距。
注意我们设置了box-sizing属性为border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。
输入框(input) 边框
使用border属性可以修改 input 边框的大小或颜色，使用border-radius属性可以给 input 添加圆角：
如果你只想添加底部边框可以使用border-bottom属性:
输入框(input) 颜色
可以使用background-color属性来设置输入框的背景颜色，color属性用于修改文本颜色：
输入框(input) 聚焦
默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为outline: none;来忽略该效果。
使用:focus选择器可以设置输入框在获取焦点时的样式：
输入框(input) 图标
如果你想在输入框中添加图标，可以使用background-image属性和用于定位的background-position属性。注意设置图标的左边距，让图标有一定的空间：
带动画的搜索框
以下实例使用了 CSStransition属性，该属性设置了输入框在获取焦点时会向右延展。
文本框（textarea）样式
注意:使用resize属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。
下拉菜单（select）样式
按钮样式
响应式表单
响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：
CSS 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
1.counter-reset- 创建或者重置计数器
2.counter-increment- 递增变量
3.content- 插入生成的内容
4.counter()或counters()函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建：
以下实例在页面创建一个计数器 (在 body 选择器中)，每个元素的计数值都会递增，并在每个<h2>元素前添加 "Section <计数值>:"
嵌套计数器
以下实例在页面创建一个计数器，在每一个<h1>元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在元素的前面，内容为 "<主标题计数值>.<副标题计数值>":
计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了counters()函数在不同的嵌套层级中插入字符串:
CSS 计数器属性
CSS 网页布局
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
内容区域
内容区域一般有三种形式:
1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备
我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：
提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。
不相等的列
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
底部区域
底部区域在网页的最下方，一般包含版权信息和联系方式等。
响应式网页布局
通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
