本課來自http://www.imooc.com/learn/9
請不要用作商業(yè)用途旬盯。
HTML5
HTML介紹
HTML代碼由標簽組成蝠咆，標簽的語法是< XXX>.......</XXX>。
標簽可以嵌套，而且一般為小寫厂置。
HTML有固定的格式：
<html> <head>...</head> <body>...</body> </html>
- <html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中魂角。
- <head> 標簽用于定義文檔的頭部昵济，它是所有頭部元素的容器。
- 在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容野揪，這里標簽中的內(nèi)容會在瀏覽器頁面上顯示出來访忿。
<head>標簽
下面這些標簽可用在 head 部分：
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head>
- <title>標簽：在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中斯稳。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么海铆，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題挣惰。
- <meta>標簽：（待補充）
HTML的注釋
``
認識標簽（第一部分）
添加段落——<p>
<p>段落文本</p> 注意一段文字要一個<p>標簽
制作標題——<hx>
<hx>標題文本</hx> h1到h6字體逐漸變小
強調(diào)——<strong> <em>
<em>需要強調(diào)的文本</em> <em>默認用斜體表示
<strong>需要強調(diào)的文本</strong> <strong>默認用粗體表示
為文字設置單獨的樣式——<span>
<span>文本</span> <span>標簽是沒有語義的卧斟，它的作用就是為了設置單獨的樣式用的殴边。
短文本引用——<q>
<q>引用文本</q>引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號珍语。
長文本引用——<blockquote>
<blockquote>引用文本</blockquote> 瀏覽器解析是縮進樣式
換行——<br>
<br />是規(guī)范的寫法锤岸，這是一個空標簽，只有開始標簽板乙，沒有結(jié)束標簽
空格—— 是偷；
表示空格
添加水平線——<hr>
<hr/>是規(guī)范寫法，這是一個空標簽募逞，只有開始標簽蛋铆，沒有結(jié)束標簽
為網(wǎng)頁加入地址——<address>
<address>聯(lián)系地址信息</address> 瀏覽器默認格式為斜體
加入代碼——<code>
<code>代碼語言</code>
加入大段代碼——<pre>
<pre>語言代碼段</pre> 在標簽中文本可以保留空格和換行
認識標簽（第二部分）
添加信息列表——<ul-li>
<ul> <li>信息<li> <ul>
ul-li是沒有前后順序的信息列表,ul-li在網(wǎng)頁中顯示的默認樣式一般為：每項li前都自帶一個圓點
添加有前后順序的信息列表——<ol-li>
<ol> <li>信息<li> <ol>
網(wǎng)頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始
獨立邏輯快劃分——<div>
<div>…</div>
為div命名(命名必須唯一)的方法：
<div id="版塊名稱">…</div>
添加表格——<table>
創(chuàng)建表格的四個元素：table放接、tbody刺啦、tr、th透乾、td
- table
<table>…</table>整個表格以<table>標記開始洪燥、</table>標記結(jié)束,table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的 - tbody
<tbody>…</tbody>當表格內(nèi)容非常多時乳乌，表格會下載一點顯示一點，但如果加上<tbody>標簽后市咆，這個表格就要等表格內(nèi)容全部下載完才會顯示 - tr
<tr>…</tr>表格的一行汉操，所以有幾對tr 表格就有幾行 - td
<td>…</td>表格的一個單元格，一行中包含幾對td蒙兰，說明一行中就有幾列 - th
<th>…</th>表格的頭部的一個單元格磷瘤，表格表頭，th標簽中的文本默認為粗體并且居中顯示 - 用CSS為表格加上邊框(待補充)
為表格添加摘要
<table summary="表格簡介文本">
為表格添加標題——<caption>
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> </tr> </table>
認識標簽（第三部分）
鏈接到另一個頁面——<a>
<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
若要在新的瀏覽器窗口打開頁面：
<a href="目標網(wǎng)址" target="_blank">click here!</a>
在網(wǎng)頁中鏈接Email地址——mailto
如果mailto后面同時有多個參數(shù)的話搜变，第一個參數(shù)必須以“?”開頭采缚，后面的參數(shù)每一個都以“&”分隔。
example：
為網(wǎng)頁插入圖片——<img>
- src：
標識圖像的位置 - alt：
指定圖像的描述性文本挠他，當圖像不可見時（下載不成功時）扳抽，可看到該屬性指定的文本 - title：
提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本) - 圖像可以是GIF，PNG殖侵，JPEG格式的圖像文本
表單標簽
與用戶交互——表單標簽
<form method="傳送方式" action="服務器文件">
- <form> ：
<form>標簽是成對出現(xiàn)的贸呢，以<form>開始，以</form>結(jié)束 - action ：
瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php) - method ：
數(shù)據(jù)傳送的方式（get/post） - 所有表單控件（文本框拢军、文本域楞陷、按鈕、單選框茉唉、復選框等）都必須放在 <form></form> 標簽之間（否則用戶輸入的信息可提交不到服務器上哦固蛾！)
文本輸入框结执，密碼輸入框
<form> <input type="text/password" name="名稱" value="文本" /> </form>
- type：
當type="text"時，輸入框為文本輸入框
當type="password"時, 輸入框為密碼輸入框 - name：
為文本框命名艾凯，以備后臺程序ASP 昌犹、PHP使用 - value：
為文本輸入框設置默認值。(一般起到提示作用)
多行文本輸入
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
<textarea>
<textarea>標簽是成對出現(xiàn)的览芳，以<textarea>開始斜姥，以</textarea>結(jié)束。cols ：多行輸入域的列數(shù)
rows ：多行輸入域的行數(shù)
使用單選框和復選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
- type:
當 type="radio" 時沧竟，控件為單選框
當 type="checkbox" 時铸敏，控件為復選框 - value：提交數(shù)據(jù)到服務器的值（后臺程序PHP使用）
- name：為控件命名，以備后臺程序 ASP悟泵、PHP 使用
- checked：當設置 checked="checked" 時杈笔，該選項被默認選中
下拉列表框
-
value：
- selected="selected"：
設置selected="selected"屬性，則該選項就被默認選中 -
多選操作：
設置multiple="multiple"屬性糕非，就可以實現(xiàn)多選功能
重置表單信息
<input type="reset" value="重置">
- type：只有當type值設置為reset時蒙具，按鈕才有重置作用
-
value：按鈕上顯示的文字
標簽<label>
<label for="控件id名稱">
label標簽不會向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標用戶改進了可用性朽肥。如果你在 label 標簽內(nèi)點擊文本禁筏，就會觸發(fā)此控件。就是說衡招，當用戶單擊選中該label標簽時篱昔，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同
CSS
CSS樣式
認識CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式始腾，如文字大小州刽、顏色、字體加粗等
p{ font-size:12px; color:red; font-weight:bold; }
CSS代碼語法
- 選擇符：又稱選擇器浪箭，指明網(wǎng)頁中要應用樣式規(guī)則的元素穗椅，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響
- 聲明：在英文大括號“｛｝”中的的就是聲明奶栖，屬性和值之間用英文冒號“：”分隔匹表。當有多條聲明時，中間可以英文分號“;”分隔驼抹，如下所示：
p{font-size:12px;color:red;} - 最后一條聲明可以沒有分號桑孩，但是為了以后修改方便，一般也加上分號
- 為了使用樣式更加容易閱讀框冀，可以將每條代碼寫在一個新行內(nèi)
CSS代碼注釋
和C++一樣
CSS樣式基本
內(nèi)聯(lián)式css樣式流椒，直接寫在現(xiàn)有的HTML標簽中
<p style="color:red;font-size:12px">這里文字是紅色。</p>
嵌入式css樣式明也，寫在當前的文件中
實現(xiàn)把三個<span>標簽中的文字設置為紅色：
<style type="text/css"> span{ color:red; } </style>
外部式css樣式宣虾，寫在單獨的一個文件中
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中惯裕，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標簽內(nèi)）使用<link>標簽將css樣式文件鏈接到HTML文件內(nèi)绣硝，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
- css樣式文件名稱以有意義的英文字母命名蜻势，如 main.css
- rel="stylesheet" type="text/css" 是固定寫法不可修改
- <link>標簽位置一般寫在<head>標簽之內(nèi)。
三種方法的優(yōu)先級
在相同權值的情況下鹉胖，就是--就近原則（離被設置元素越近優(yōu)先級別越高）
CSS選擇器
什么是CSS選擇器握玛？
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{ 樣式; }
在{}之前的部分就是“選擇器”甫菠，“選擇器”指明了{}中的“樣式”的作用對象挠铲，也就是“樣式”作用于網(wǎng)頁中的哪些元素
類選擇器
.類選器名稱{css樣式代碼;}
- 英文圓點開頭
- 其中類選器名稱可以任意起名（但不要起中文噢）
使用方法： - 使用合適的標簽把要修飾的內(nèi)容標記起來，如下：
<span>膽小如鼠</span> - 使用class="類選擇器名稱"為標簽設置一個類寂诱，如下：
<span class="stress">膽小如鼠</span> - 設置類選器css樣式拂苹，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
ID選擇器
- 為標簽設置id="ID名稱"，而不是class="類名稱"
- ID選擇符的前面是井號（#）號痰洒，而不是英文圓點（.）
ID選擇器和類選擇器的異同
相同點：
可以應用于任何元素
不同點：
- ID選擇器只能在文檔中使用一次瓢棒。與類選擇器不同，在一個HTML文檔中丘喻，ID選擇器只能使用一次脯宿，而且僅一次。而類選擇器可以使用多次
- 可以使用類選擇器詞列表方法為一個元素同時設置多個樣式仓犬。我們可以為一個元素同時設多個樣式嗅绰，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）
子選擇器
子選擇器搀继，即大于符號(>),用于選擇指定標簽元素的第一代子元素
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框
包含(后代)選擇器
包含選擇器翠语，即加入空格,用于選擇指定標簽元素下的后輩元素叽躯。如右側(cè)代碼編輯器中的代碼：
.first span{color:red;}
這行代碼會使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。
請注意這個選擇器與子選擇器的區(qū)別肌括，子選擇器（child selector）僅是指它的直接后代点骑，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素谍夭。后代選擇器通過空格來進行選擇黑滴，而子選擇器是通過“>”進行選擇。
總結(jié)：>作用于元素的第一代后代紧索，空格作用于元素的所有后代
通用選擇器
通用選擇器是功能最強大的選擇器袁辈，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素珠漂，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：
* {color:red;}
偽類選擇符
更有趣的是偽類選擇符晚缩，為什么叫做偽類選擇符尾膊，它允許給html不存在的標簽（標簽的某種狀態(tài)）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設置字體顏色變紅荞彼。
現(xiàn)在比較常用的是 a:hover 的組合
分組選擇符
當你想為html中多個標簽元素設置同一個樣式時冈敛，可以使用分組選擇符（，）鸣皂，如下代碼為右側(cè)代碼編輯器中的h1抓谴、span標簽同時設置字體顏色為紅色：
h1,span{color:red;}
CSS的繼承、層疊和特殊性
繼承
CSS的某些樣式是具有繼承性的寞缝，那么什么是繼承呢癌压？繼承是一種規(guī)則，它允許樣式不僅應用于某個特定html標簽元素第租，而且應用于其后代措拇。比如下面代碼：
p{color:red;} <p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩慎宾。</p>
特殊性
瀏覽器是根據(jù)權值來判斷使用哪種css樣式的丐吓，權值高的就使用哪種css樣式。
- 規(guī)則：
標簽的權值為1趟据，類選擇符的權值為10券犁，ID選擇符的權值最高為100
繼承也有權值但很低，有的文獻提出它只有0.1汹碱，所以可以理解為繼承的權值最低粘衬。
層疊
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時咳促，會根據(jù)這些css樣式的前后順序來決定稚新，處于最后面的css樣式會被應用
- 內(nèi)聯(lián)樣式表（標簽內(nèi)部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
重要性
我們可以使用!important來為某些樣式設置具有最高權值
p{color:red!important;} p{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩跪腹。</p>
注意：!important要寫在分號的前面
瀏覽器默認的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設置的樣式褂删，但記住!important優(yōu)先級樣式是個例外，權值高于用戶自己設置的樣式
CSS格式化排版
字體
body{font-family:"Microsoft Yahei";}
字號冲茸、顏色
body{font-size:12px;color:#666}
粗體
p span{font-weight:bold;}
斜體
p a{font-style:italic;}
下劃線
p a{text-decoration:underline;}
刪除線
.oldPrice{text-decoration:line-through;}
縮進
p{text-indent:2em;} <p>1922年的春天屯阀，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部轴术，來到了紐約难衰。那是一個道德感漸失，爵士樂流行逗栽，走私為王盖袭，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住苍凛。</p>
2em的意思就是文字的2倍大小趣席。
行間距（行高）
p{line-height:1.5em;}
中文字間距、字母間距
如果想在網(wǎng)頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現(xiàn)醇蝴，如下面代碼：
h1{ letter-spacing:50px; } <h1>了不起的蓋茨比</h1>
注意：這個樣式使用在英文單詞時宣肚，是設置字母與字母之間的間距。
單詞間距設置：
h1{ word-spacing:50px; } <h1>welcome to imooc!</h1>
對齊
使用text-align樣式代碼悠栓，如下代碼可實現(xiàn)文本居中顯示
h1{ text-align:center; } <h1>了不起的蓋茨比</h1>
CSS盒模型
元素分類
塊狀元素
<div>霉涨、<p>、<h1>...<h6>惭适、<ol>笙瑟、<ul>扇谣、<dl>蛤吓、<table>、<address>贰逾、<blockquote> 凄杯、<form>
內(nèi)聯(lián)元素
<a>错洁、<span>、<br>戒突、<i>屯碴、<em>、<strong>膊存、<label>导而、<q>、<var>隔崎、<cite>今艺、<code>
內(nèi)聯(lián)塊狀元素
<img>、<input>
塊級元素
設置display:block就是將元素顯示為塊級元素爵卒。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素洼滚，從而使a元素具有塊狀元素特點。
a{display:block;}
- 每個塊級元素都從新的一行開始技潘，并且其后的元素也另起一行。（真霸道千康，一個塊級元素獨占一行）
- 元素的高度享幽、寬度、行高以及頂和底邊距都可設置
- 元素寬度在不設置的情況下拾弃，是它本身父容器的100%（和父元素的寬度一致）值桩，除非設定一個寬度
內(nèi)聯(lián)元素
塊狀元素也可以通過代碼display:inline將元素設置為內(nèi)聯(lián)元素,如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使 div 元素具有內(nèi)聯(lián)元素特點
div{ display:inline; }
- 和其他元素都在一行上豪椿；
- 元素的高度奔坟、寬度及頂部和底部邊距不可設置携栋；
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變
內(nèi)聯(lián)塊狀元素
代碼display:inline-block就是將元素設置為內(nèi)聯(lián)塊狀元素
- 和其他元素都在一行上咳秉；
- 元素的高度婉支、寬度、行高以及頂和底邊距都可設置
盒模型
邊框（一）
盒子模型的邊框就是圍繞著內(nèi)容及補白的線澜建，這條線你可以設置它的粗細向挖、樣式和顏色(邊框三個屬性)
div{ border-width:2px; border-style:solid; border-color:red; }
- border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線） - border-color（邊框顏色）中的顏色可設置為十六進制顏色
border-color:#888;//前面的井號不要忘掉 - border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）
邊框（二）
css 樣式中允許只為一個方向的邊框設置樣式：
div{border-bottom:1px solid red;}
寬度和高度
css內(nèi)定義的寬（width）和高（height）炕舵，指的是填充以里的內(nèi)容范圍
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }
元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px
填充
元素內(nèi)容與邊框之間是可以設置距離的何之，稱之為“填充”。填充也可分為上咽筋、右溶推、下、左(順時針)奸攻。如下代碼：
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; }
邊界
元素與其它元素之間的距離可以使用邊界（margin）來設置蒜危。邊界也是可分為上、右舞箍、下舰褪、左。如下代碼：
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; }
總結(jié)一下：padding和margin的區(qū)別疏橄，padding在邊框里占拍，margin在邊框外。
CSS布局模型
css布局模型
CSS包含3種基本的布局模型捎迫，用英文概括為：Flow晃酒、Layer 和 Float。
在網(wǎng)頁中窄绒，元素有三種布局模型：
- 流動模型（Flow）
- 浮動模型 (Float)
- 層模型（Layer）
流動模型
先來說一說流動模型贝次，流動（Flow）是默認的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的彰导。
- 塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布蛔翅，因為在默認狀態(tài)下，塊狀元素的寬度都為100%位谋。實際上山析，塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標簽(div掏父，h1笋轨，p)寬度顯示為100%。
- 在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示爵政。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
浮動模型
任何元素在默認情況下是不能浮動的仅讽，但可以用 CSS 定義為浮動，如 div钾挟、p洁灵、table、img 等元素都可以被定義為浮動等龙。如下代碼可以實現(xiàn)兩個 div 元素一行顯示处渣。
div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div>
div{ width:200px; height:200px; border:2px red solid; float:right; }
div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}
層模型
層模型有三種形式：
絕對定位(position: absolute)
如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)蛛砰，這條語句的作用將元素從文檔流中拖出來罐栈，然后使用left、right泥畅、top荠诬、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊位仁，則相對于body元素柑贞，即相對于瀏覽器窗口。
如下面代碼可以實現(xiàn)div元素相對于瀏覽器窗口向右移動100px聂抢，向下移動50px钧嘶。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div>
相對定位(position: relative)
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位）琳疏，它通過left有决、right、top空盼、bottom屬性確定元素在正常文檔流中的偏移位置书幕。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動揽趾，移動的方向和幅度由left台汇、right、top篱瞎、bottom屬性確定苟呐，偏移前的位置保留不動。
如下代碼實現(xiàn)相對于以前位置向下移動50px俐筋，向右移動100px;
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>
固定定位(position: fixed)
fixed：表示固定定位掠抬，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身校哎。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置闷哆，或改變?yōu)g覽器窗口的顯示大小腰奋，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響抱怔，這與background-attachment:fixed?屬性功能相同劣坊。以下代碼可以實現(xiàn)相對于瀏覽器視圖向右移動100px，向下移動50px屈留。并且拖動滾動條時位置固定不變局冰。
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
Relative與Absolute組合使用
相對于其它元素進行定位必須遵守下面規(guī)范：
參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"> <div id="box2">相對參照元素進行定位</div> </div>
從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）灌危。參照定位的元素必須加入position:relative;
#box1{ width:200px; height:200px; position:relative; }定位元素加入position:absolute康二，便可以使用top、bottom勇蝙、left沫勿、right來進行偏移定位了。
#box2{ position:absolute; top:20px; left:30px; }
這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了味混，而可以自由設置了）产雹。
CSS代碼優(yōu)化
盒模型代碼優(yōu)化
外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左翁锡。
- 如果top蔓挖、right、bottom馆衔、left的值相同瘟判，可縮寫：
margin:10px; - 如果top和bottom值相同、left和 right的值相同哈踱，如下面代碼：
margin:10px 20px 10px 20px;
縮寫成：
margin:10px 20px; - 如果left和right的值相同荒适，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
顏色值縮寫
關于顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時开镣，如果每兩位的值相同刀诬，可以縮寫一半。
- 例子1：
p{color:#000000;}
可以縮寫為：
p{color: #000;} - 例子2：
p{color: #336699;}
可以縮寫為：
p{color: #369;}
字體縮寫
body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; }
這么多行的代碼其實可以縮寫為一句：
body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }
- 使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性邪财，其他的屬性(如 font-weight陕壹、font-style、font-variant树埠、line-height)如未指定將自動使用默認值糠馆。
- 在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
單位和值
顏色值
- 英文命令顏色
p{color:red;} - RGB顏色
p{color:rgb(133,45,200);} - 十六進制顏色
這種顏色設置方法是現(xiàn)在比較普遍使用的方法怎憋，其原理其實也是 RGB 設置又碌，但是其每一項的值由 0-255 變成了十六進制 00-ff九昧。
p{color:#00ffff;}
長度值
- 像素
像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規(guī)范中假設“90像素=1英寸”）毕匀。實際情況是瀏覽器會使用顯示器的實際像素值有關铸鹰，在目前大多數(shù)的設計者都傾向于使用像素（px）作為單位。 - em
就是本元素給定字體的 font-size 值皂岔，如果元素的 font-size 為 14px 蹋笼，那么 1em = 14px；如果 font-size 為 18px躁垛，那么 1em = 18px剖毯。如下代碼：
p{font-size:12px;text-indent:2em;}
上面代碼就是可以實現(xiàn)段落首行縮進 24px（也就是兩個字體大小的距離）。
注意
但當給 font-size 設置單位為 em 時教馆，此時計算的標準以 p 的父元素的 font-size 為基礎逊谋。如下代碼：
html:
<p>以這個<span>例子</span>為例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
結(jié)果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）
- 百分比
p{font-size:12px;line-height:130%}
設置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）
css樣式設置小技巧
水平居中設置-行內(nèi)元素
行內(nèi)元素進行水平居中
如果被設置元素為文本活玲、圖片等行內(nèi)元素時涣狗，水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的。(父元素和子元素：如下面的html代碼中舒憾，div是“我想要在父容器中水平居中顯示”這個文本的父元素镀钓。反之這個文本是div的子元素 )如下代碼：
html代碼：
<body> <div class="txtCenter">我想要在父容器中水平居中顯示。</div> </body>
css代碼：
<style> .txtCenter{ text-align:center; } </style>
水平居中設置-定寬塊狀元素
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的镀迂。我們來看個例子就是設置 div 這個塊狀元素水平居中：
<style> div{ border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/ width:200px;/*定寬*/ margin:20px auto;/* margin-left 與 margin-right 設置為 auto */ } </style>
也可寫成：
margin-left:auto; margin-right:auto;
水平居中總結(jié)-不定寬塊狀元素方法（一）
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
加入[table]標簽
為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定）丁溅，因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法探遵，使其水平居中窟赏。
- 為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>箱季、<td> )涯穷。
- 為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>```
css代碼：
```<style>
table{
border:1px solid;
margin:0 auto;
}
</style>```
#####改變元素的display類型為行內(nèi)元素
改變塊級元素的 display 為 inline 類型（設置為 [行內(nèi)元素]顯示）藏雏，然后使用 text-align:center
來實現(xiàn)居中效果拷况。如下例子：
html代碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>```
css代碼：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>```
* 這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline掘殴，變成了行內(nèi)元素赚瘦，所以少了一些功能，比如設定長度值奏寨。
#####設置浮動和相對定位來實現(xiàn)
通過給父元素設置[ float]起意，然后給父元素設置 [position:relative] 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現(xiàn)水平居中病瞳。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份揽咕，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊悲酷；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現(xiàn)li層的居中心褐。
代碼如下：
```<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>```
css代碼：
<style>
```.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>```
####垂直居中-父元素高度確定的單行文本
我們在實際工作中也會遇到需要設置垂直居中的場景舔涎，比如好多報紙的文章標題在左右一側(cè)時，常常會設置為垂直居中逗爹，為了用戶體驗性好。
這里我們又得分兩種情況：父元素高度確定的單行文本嚎于，以及父元素高度確定的多行文本掘而。
本節(jié)我們先來看第一種父元素高度確定的單行文本, 怎么設置它為垂直居中呢？
**父元素高度確定的單行文本**的豎直居中的方法是通過設置父元素的 height 和[ line-height ]高度一致來實現(xiàn)的于购。(height: 該元素的高度袍睡，line-height: 顧名思義，行高（行間距）肋僧，指在文本中斑胜，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差嫌吠，在 CSS 中成為“行間距”止潘。分為兩半，分別加到一個文本行內(nèi)容的頂部和底部辫诅。
這種文字行高與塊高一致帶來了一個弊端：當文字內(nèi)容的長度大于塊的寬時凭戴，就有內(nèi)容脫離了塊。
```<div class="container">
hi,imooc!
</div>```
css代碼：
```<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>```
#####使用插入 [table] (包括tbody炕矮、tr么夫、td)標簽，同時設置 vertical-align：middle肤视。
css 中有一個用于豎直居中的屬性 vertical-align档痪，在父元素設置此樣式時，會對inline-block類型的子元素都有用邢滑。下面看一下例子：
html代碼：
```<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中腐螟。</p>
</div>
</td></tr></tbody></table>
</body>```
css代碼：
```table td{height:500px;background:#ccc}```
因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了殊鞭。
#####設置塊級元素的 display
在 chrome遭垛、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性操灿，但注意 IE6锯仪、7 并不支持這個樣式, 兼容性比較差。
html代碼：
```<div class="container">
<div>
<p>看我是否可以居中趾盐。</p>
<p>看我是否可以居中庶喜。</p>
<p>看我是否可以居中小腊。</p>
</div>
</div>```
css代碼：
```<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome久窟、Firefox*/
}
</style>```
這種方法的好處是不用添加多余的無意義的標簽秩冈，但缺點也很明顯，它的兼容性不是很好斥扛，不兼容 IE6入问、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)稀颁。
####隱性改變display類型
有一個有趣的現(xiàn)象就是當為元素（不論之前是什么類型元素芬失，display:none 除外）設置以下 2 個句之一：
* [position : absolute]
* float : left 或 [float:right]
簡單來說，只要html代碼中出現(xiàn)以上兩句之一匾灶，元素的display顯示類型就會自動變?yōu)橐?display:inline-block（[塊狀元素]）的方式顯示棱烂，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素阶女。
如下面的代碼颊糜，小伙伴們都知道 a 標簽是 [行內(nèi)元素] ，所以設置它的 width 是 沒有效果的秃踩，但是設置為 position:absolute 以后衬鱼，就可以了。
```<div class="container">
<a href="#" title="">進入課程請單擊這里</a>
</div>```
CSS代碼：
```<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>```