CSS 布局 - 水平 & 垂直對齊
元素居中對齊
要水平居中對齊一個元素(如<div>), 可以使用margin: auto;。
設(shè)置到元素的寬度將防止它溢出到容器的邊緣糖耸。
元素通過指定寬度，并將兩邊的空外邊距平均分配：
注意:如果沒有設(shè)置width屬性(或者設(shè)置 100%)铡俐，居中對齊將不起作用。
文本居中對齊
如果僅僅是為了文本在元素內(nèi)居中對齊，可以使用text-align: center;
圖片居中對齊
要讓圖片居中對齊, 可以使用margin: auto;并將它放到塊元素中:
左右對齊 - 使用定位方式
我們可以使用position: absolute;屬性來對齊元素:
注釋：絕對定位元素會被從正常流中刪除桩警，并且能夠交疊元素握截。
提示:當(dāng)使用position來對齊元素時, 通常<body>元素會設(shè)置margin和padding。 這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異胯努。
當(dāng)使用 position 屬性時胞四，IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是 <div
class="container">）設(shè)置了指定的寬度导狡，并且省略了 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側(cè)增加
17px 的外邊距氓癌。這似乎是為滾動條預(yù)留的空間。當(dāng)使用 position 屬性時，請始終設(shè)置 !DOCTYPE 聲明：
左右對齊 - 使用 float 方式
我們也可以使用float屬性來對齊元素:
當(dāng)像這樣對齊元素時，對 <body> 元素的外邊距和內(nèi)邊距進(jìn)行預(yù)定義是一個好主意。這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異巩螃。
注意：如果子元素的高度大于父元素甘桑，且子元素設(shè)置了浮動铆帽，那么子元素將溢出，這時候你可以使用 "clearfix(清除浮動)" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
當(dāng)使用 float 屬性時，IE8 以及更早的版本存在一個問題糟红。如果省略 !DOCTYPE 聲明，那么 IE8 以及更早的版本會在右側(cè)增加 17px 的外邊距揍鸟。這似乎是為滾動條預(yù)留的空間谈撒。當(dāng)使用 float 屬性時蛔外，請始終設(shè)置 !DOCTYPE 聲明：
垂直居中對齊 - 使用 padding
CSS 中有很多方式可以實現(xiàn)垂直居中對齊裆悄。 一個簡單的方式就是頭部頂部使用padding:
如果要水平和垂直都居中或南，可以使用padding和text-align: center:
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
除了使用padding和line-height屬性外,我們還可以使用transform屬性來設(shè)置垂直居中:
CSS組合選擇符
組合選擇符說明了兩個選擇器直接的關(guān)系蹬癌。
CSS組合選擇符包括各種簡單選擇符的組合方式。
在 CSS3 中包含了四種組合方式:
1.后代選擇器(以空格?分隔)
2.子元素選擇器(以大于>號分隔）
3.相鄰兄弟選擇器（以加號+分隔）
4.普通兄弟選擇器（以波浪號～分隔）
后代選擇器
后代選擇器用于選取某元素的后代元素拾徙。
以下實例選取所有 <p> 元素插入到 <div> 元素中:
子元素選擇器
與后代選擇器相比询微，子元素選擇器（Child selectors）只能選擇作為某元素直接/一級子元素的元素。
以下實例選擇了<div>元素中所有直接子元素 <p> ：
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）太闺。
以下實例選取了所有位于 <div> 元素后的第一個 <p> 元素:
后續(xù)兄弟選擇器
后續(xù)兄弟選擇器選取所有指定元素之后的相鄰兄弟元素丑孩。
以下實例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> :
CSS偽類
CSS偽類是用來添加一些選擇器的特殊效果。
語法
偽類的語法：
selector:pseudo-class {property:value;}
CSS類也可以使用偽類：
selector.class:pseudo-class {property:value;}
anchor偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以以不同的方式顯示
注意：在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后府树，才是有效的。
注意：在 CSS 定義中，a:active 必須被置于 a:hover 之后弯洗，才是有效的敏沉。
注意：偽類的名稱不區(qū)分大小寫秋泳。
偽類和CSS類
偽類可以與 CSS 類配合使用：
CSS :first-child 偽類
您可以使用 :first-child 偽類來選擇父元素的第一個子元素辖众。
注意：在IE8的之前版本必須聲明<!DOCTYPE>，這樣 :first-child 才能生效。
匹配第一個 <p> 元素
在下面的例子中离赫，選擇器匹配作為任何元素的第一個子元素的 <p> 元素：
匹配所有<p> 元素中的第一個 <i> 元素
在下面的例子中台妆，選擇相匹配的所有<p>元素的第一個? <i> 元素：
匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素：
CSS - :lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規(guī)則
注意：IE8必須聲明<!DOCTYPE>才能支持;lang偽類桐汤。
在下面的例子中员萍，:lang 類為屬性值為 no 的q元素定義引號的類型：
CSS偽元素
CSS偽元素是用來添加一些選擇器的特殊效果抗果。
語法
偽元素的語法：
selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：
selector.class:pseudo-element {property:value;}
:first-line 偽元素
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。
在下面的例子中，瀏覽器會根據(jù) "first-line" 偽元素中的樣式對 p 元素的第一行文本進(jìn)行格式化：
注意："first-line" 偽元素只能用于塊級元素。
注意：下面的屬性可應(yīng)用于 "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" 偽元素用于向文本的首字母設(shè)置特殊樣式：
注意："first-letter" 偽元素只能用于塊級元素碑幅。
注意：下面的屬性可應(yīng)用于 "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類
偽元素可以結(jié)合CSS類：?
p.article:first-letter {color:#ff0000;}<p class="article">文章段落</p>
上面的例子會使所有 class 為 article 的段落的首字母變?yōu)榧t色。
多個偽元素
可以結(jié)合多個偽元素來使用诀浪。
在下面的例子中，段落的第一個字母將顯示為紅色，其字體大小為 xx-large。第一行中的其余文本將為藍(lán)色，并以小型大寫字母顯示海蔽。
段落中的其余文本將以默認(rèn)字體大小和顏色來顯示：
CSS - :before 偽元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容共屈。
下面的例子在每個 <h1>元素前面插入一幅圖片：
CSS - :after 偽元素
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
下面的例子在每個? <h1> 元素后面插入一幅圖片：
CSS 導(dǎo)航欄
熟練使用導(dǎo)航欄准潭，對于任何網(wǎng)站都非常重要。
使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單刑然。
導(dǎo)航欄=鏈接列表
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個導(dǎo)航欄是必須的
寺擂。在我們的例子中我們將建立一個標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
導(dǎo)航條基本上是一個鏈接列表泼掠，所以使用 <ul> 和 <li>元素非常有意義：
從列表中刪除邊距和填充
上面例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼
垂直導(dǎo)航欄
上面的代碼，我們只需要 <a>元素的樣式择镇，建立一個垂直的導(dǎo)航欄：
示例說明：
display:block - 顯示塊元素的鏈接挡逼，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認(rèn)情況下是最大寬度腻豌。我們要指定一個60像素的寬度
注意：請務(wù)必指定<a>元素在垂直導(dǎo)航欄的寬度家坎，如果省略寬度，IE6可能產(chǎn)生意想不到的效果吝梅。
垂直導(dǎo)航條實例
創(chuàng)建一個簡單的垂直導(dǎo)航條實例虱疏，在鼠標(biāo)移動到選項時，修改背景顏色：
激活/當(dāng)前導(dǎo)航條實例
在點擊了選項后苏携，我們可以添加 "active" 類來標(biāo)準(zhǔn)哪個選項被選中：
創(chuàng)建鏈接并添加邊框
可以在<li>or<a>上添加text-align:center樣式來讓鏈接居中做瞪。
可以在border<ul>上添加border屬性來讓導(dǎo)航欄有邊框。如果要在每個選項上添加邊框，可以在每個<li>元素上添加border-bottom:
全屏高度的固定導(dǎo)航條
接下來我們創(chuàng)建一個左邊是全屏高度的固定導(dǎo)航條装蓬，右邊是可滾動的內(nèi)容著拭。
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑陔怪恪Ｊ褂?b>內(nèi)聯(lián)(inline)或浮動(float)的列表項儡遮。
這兩種方法都很好，但如果你想鏈接到具有相同的大小履羞，你必須使用浮動的方法峦萎。
內(nèi)聯(lián)列表項
建立一個橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?上述代碼是標(biāo)準(zhǔn)的內(nèi)聯(lián):
浮動列表項
在上面的例子中鏈接有不同的寬度。
對于所有的鏈接寬度相等筛欢，浮動 <li>元素浸锨，并指定為 <a>元素的寬度：
水平導(dǎo)航條實例
創(chuàng)建一個水平導(dǎo)航條，在鼠標(biāo)移動到選項后修改背景顏色剥险。
激活/當(dāng)前導(dǎo)航條實例
在點擊了選項后聪蘸，我們可以添加 "active" 類來標(biāo)準(zhǔn)哪個選項被選中
鏈接右對齊
將導(dǎo)航條最右邊的選項設(shè)置右對齊 (float:right;)：
添加分割線
<li>通過border-right樣式來添加分割線:
固定導(dǎo)航條
可以設(shè)置頁面的導(dǎo)航條固定在頭部或者底部：
灰色水平導(dǎo)航條
CSS 下拉菜單
使用 CSS 創(chuàng)建一個鼠標(biāo)移動上去后顯示下拉菜單的效果。
基本下拉菜單
當(dāng)鼠標(biāo)移動到指定元素上時表制，會出現(xiàn)下拉菜單健爬。
實例解析
HTML 部分：
我們可以使用任何的 HTML 元素來打開下拉菜單，如：<span>, 或 a <button> 元素么介。
使用容器元素 (如： <div>)? 來創(chuàng)建下拉菜單的內(nèi)容娜遵，并放在任何你想放的位置上。
使用 <div> 元素來包裹這些元素壤短，并使用 CSS 來設(shè)置下拉內(nèi)容的樣式设拟。
CSS 部分：
.dropdown類使用position:relative, 這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕 (使用position:absolute) 的右下角位置。
.dropdown-content類中是實際的下拉菜單久脯。默認(rèn)是隱藏的纳胧，在鼠標(biāo)移動到指定元素后會顯示。 注意min-width的值設(shè)置為 160px桶现。你可以隨意修改它躲雅。注意:如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置width為 100% (overflow:auto設(shè)置可以在小尺寸屏幕上滾動)骡和。
我們使用box-shadow屬性讓下拉菜單看起來像一個"卡片"相赁。
:hover選擇器用于在用戶將鼠標(biāo)移動到下拉按鈕上時顯示下拉菜單相寇。
下拉菜單
創(chuàng)建下拉菜單，并允許用戶選取列表中的某一項：
這個實例類似前面的實例钮科，當(dāng)我們在下拉列表中添加了鏈接唤衫，并設(shè)置了樣式：
下拉內(nèi)容對齊方式
float:left;
float:right;
如果你想設(shè)置右浮動的下拉菜單內(nèi)容方向是從右到左佳励，而不是從左到右蛆挫，可以添加以下代碼right: 0;
CSS提示工具
提示工具在鼠標(biāo)移動到指定元素后觸發(fā)
基礎(chǔ)提示框(Tooltip)
提示框在鼠標(biāo)移動到指定元素上顯示：
實例解析
HTML)使用容器元素 (like
) 并添加"tooltip"類悴侵。在鼠標(biāo)移動到
上時顯示提示信息瞧剖。
提示文本放在內(nèi)聯(lián)元素上(如 ) 并使用class="tooltiptext"可免。
CSS)tooltip類使用position:relative, 提示文本需要設(shè)置定位值position:absolute捉撮。注意: 接下來的實例會顯示更多的定位效果巾遭。
tooltiptext類用于實際的提示文本恢总。模式是隱藏的，在鼠標(biāo)移動到元素顯示 砂豌。設(shè)置了一些寬度阳距、背景色结借、字體色等樣式咖熟。
CSS3border-radius屬性用于為提示框添加圓角馍管。
:hover選擇器用于在鼠標(biāo)移動到到指定元素
上時顯示的提示捌锭。
定位提示工具
以下實例中观谦，提示工具顯示在指定元素的右側(cè)(left:105%) 。
注意top:-5px同于定位在容器元素的中間告私。使用數(shù)字5因為提示文本的頂部和底部的內(nèi)邊距（padding）是 5px驻粟。
如果你修改 padding 的值挤巡，top 值也要對應(yīng)修改，這樣才可以確保它是居中對齊的母廷。
在提示框顯示在左邊的情況也是這個原理。
如果你想要提示工具顯示在頭部和底部。我們需要使用margin-left屬性舷暮，并設(shè)置為 -60px向臀。這個數(shù)字計算來源是使用寬度的一半來居中對齊，即： width/2 (120/2 = 60)芹彬。
添加箭頭
我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具創(chuàng)建一個小箭頭標(biāo)志陡叠，箭頭是由邊框組成的译红，但組合起來后提示工具像個語音信息框。
以下實例演示了如何為顯示在頂部的提示工具添加底部箭頭：
*實例解析
在提示工具內(nèi)定位箭頭:top: 100%, 箭頭將顯示在提示工具的底部刨沦。left: 50%用于居中對齊箭頭。
注意：border-width屬性指定了箭頭的大小。如果你修改它讳癌，也要修改margin-left值逢艘。這樣箭頭在能居中顯示。
border-color用于將內(nèi)容轉(zhuǎn)換為箭頭央拖。設(shè)置頂部邊框為黑色，其他是透明的。如果設(shè)置了其他的也是黑色則會顯示為一個黑色的四邊形失都。
以下實例演示了如何在提示工具的頭部添加箭頭，注意設(shè)置邊框顏色：
以下兩個實例是左右兩邊的箭頭實例：
淡入效果
我們可以使用 CSS3 transition 屬性及 opacity 屬性來實現(xiàn)提示工具的淡入效果:
CSS圖片庫
點擊圖片進(jìn)入圖片庫
使用css創(chuàng)建的
CSS屬性選擇器
具有特定屬性的HTML元素樣式
具有特定屬性的HTML元素樣式不僅僅是class和id趁啸。
注意：IE7和IE8需聲明!DOCTYPE才支持屬性選擇器不傅！IE6和更低的版本不支持屬性選擇器。
屬性選擇器
下面的例子是把包含標(biāo)題（title）的所有元素變?yōu)樗{(lán)色：
屬性和值選擇器
下面的實例改變了標(biāo)題title='runoob'元素的邊框樣式:
屬性和值的選擇器 - 多值
下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:
下面是包含指定值的lang屬性的元素樣式的例子，使用（|）分隔屬性和值:
表單樣式
屬性選擇器樣式無需使用class或id的形式:
CSS 表單
一個表單案例，我們使用 CSS 來渲染 HTML 的表單元素：
輸入框(input) 樣式
使用 width 屬性來設(shè)置輸入框的寬度：
以上實例中設(shè)置了所有 <input> 元素的寬度為 100%，如果你只想設(shè)置指定類型的輸入框可以使用以下屬性選擇器：
????????????????????????? 1.input[type=text]- 選取文本輸入框
????????????????????????? 2.input[type=password]- 選擇密碼的輸入框
????????????????????????? 3.input[type=number]- 選擇數(shù)字的輸入框
????????????????????????? 4....
輸入框填充
使用padding屬性可以在輸入框中添加內(nèi)邊距。
注意我們設(shè)置了box-sizing屬性為border-box孤里。這樣可以確保瀏覽器呈現(xiàn)出帶有指定寬度和高度的輸入框是把邊框和內(nèi)邊距一起計算進(jìn)去的。
輸入框(input) 邊框
使用border屬性可以修改 input 邊框的大小或顏色，使用border-radius屬性可以給 input 添加圓角：
如果你只想添加底部邊框可以使用border-bottom屬性:
輸入框(input) 顏色
可以使用background-color屬性來設(shè)置輸入框的背景顏色，color屬性用于修改文本顏色：
輸入框(input) 聚焦
默認(rèn)情況下，一些瀏覽器在輸入框獲取焦點時（點擊輸入框）會有一個藍(lán)色輪廓峰髓。我們可以設(shè)置 input 樣式為outline: none;來忽略該效果。
使用:focus選擇器可以設(shè)置輸入框在獲取焦點時的樣式：
輸入框(input) 圖標(biāo)
如果你想在輸入框中添加圖標(biāo)，可以使用background-image屬性和用于定位的background-position屬性并级。注意設(shè)置圖標(biāo)的左邊距，讓圖標(biāo)有一定的空間：
帶動畫的搜索框
以下實例使用了 CSStransition屬性钉迷，該屬性設(shè)置了輸入框在獲取焦點時會向右延展。
文本框（textarea）樣式
注意:使用resize屬性來禁用文本框可以重置大小的功能（一般拖動右下角可以重置大小）身害。
下拉菜單（select）樣式
按鈕樣式
響應(yīng)式表單
響應(yīng)式表單可以根據(jù)瀏覽器窗口的大小重新布局各個元素丙猬，我們可以通過重置瀏覽器窗口大小來查看效果：
CSS 計數(shù)器
CSS 計數(shù)器通過一個變量來設(shè)置，根據(jù)規(guī)則遞增變量抢埋。
使用計數(shù)器自動編號
CSS 計數(shù)器根據(jù)規(guī)則來遞增變量。
CSS 計數(shù)器使用到以下幾個屬性：
??????????????????????????????????????????????????? 1.counter-reset- 創(chuàng)建或者重置計數(shù)器
??????????????????????????????????????????????????? 2.counter-increment- 遞增變量
??????????????????????????????????????????????????? 3.content- 插入生成的內(nèi)容
??????????????????????????????????????????????????? 4.counter()或counters()函數(shù) - 將計數(shù)器的值添加到元素
要使用 CSS 計數(shù)器，得先用 counter-reset 創(chuàng)建：
以下實例在頁面創(chuàng)建一個計數(shù)器 (在 body 選擇器中)，每個元素的計數(shù)值都會遞增，并在每個<h2>元素前添加 "Section <計數(shù)值>:"
嵌套計數(shù)器
以下實例在頁面創(chuàng)建一個計數(shù)器，在每一個<h1>元素前添加計數(shù)值 "Section <主標(biāo)題計數(shù)值>.", 嵌套的計數(shù)值則放在元素的前面汉匙，內(nèi)容為 "<主標(biāo)題計數(shù)值>.<副標(biāo)題計數(shù)值>":
計數(shù)器也可用于列表中，列表的子元素會自動創(chuàng)建擅笔。這里我們使用了counters()函數(shù)在不同的嵌套層級中插入字符串:
CSS 計數(shù)器屬性
CSS 網(wǎng)頁布局
網(wǎng)頁布局
網(wǎng)頁布局有很多種方式狞洋，一般分為以下幾個部分：頭部區(qū)域庐橙、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域郁惜、底部區(qū)域。
頭部區(qū)域
頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標(biāo)題或者網(wǎng)頁的 logo：
菜單導(dǎo)航區(qū)域
菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁面：
內(nèi)容區(qū)域
內(nèi)容區(qū)域一般有三種形式:
1 列：一般用于移動端
2 列：一般用于平板設(shè)備
3 列：一般用于 PC 桌面設(shè)備
我們將創(chuàng)建一個 3 列布局届巩，在小的屏幕上將會變成 1 列布局（響應(yīng)式）：
提示:要設(shè)置兩列可以設(shè)置 width 為 50%腕唧。創(chuàng)建 4 列可以設(shè)置為 25%颂暇。
不相等的列
不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的片拍，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容碉钠，這三列加起來的寬度是 100％喊废。
底部區(qū)域
底部區(qū)域在網(wǎng)頁的最下方祝高，一般包含版權(quán)信息和聯(lián)系方式等。
響應(yīng)式網(wǎng)頁布局
通過以上等學(xué)習(xí)我們來創(chuàng)建一個響應(yīng)式等頁面污筷，頁面的布局會根據(jù)屏幕的大小來調(diào)整：
