HTML標簽
HTML代碼注釋 < !--注釋文字 -->
HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息止喷，可以包含文字馆类、圖片、視頻等弹谁。
| 標簽 | 屬性 |
|---|---|
| <html></html> | 根標簽 |
| <head> | 頭標簽 |
| <title> | 在標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息 |
| <script> | 填寫javascript相關代碼<script src="/static/js/abc.js"></script> |
| <style> | 填寫css相關代碼 |
| <link> | 標簽將css樣式文件鏈接到HTML文件內(nèi)<link href="base.css" rel="stylesheet" type="text/css" /> |
| <meta> | meta標簽被稱為可視區(qū)域meta標簽乾巧，<meta name=”viewport” content=”” /> |
| <body> | 內(nèi)容標簽 |
| <h1> | 標題標簽（因為h1標簽在網(wǎng)頁中比較重要句喜，所以一般h1標簽被用在網(wǎng)站名稱上。騰訊網(wǎng)站就是這樣做的沟于。如：<h1>騰訊網(wǎng)</h1>） |
| <p> | 段落標簽 |
| <em> | 在瀏覽器中<em> 默認用斜體表示 |
| <strong> | <strong> 用粗體表示 |
| <span></span> | 作用就是為了設置單獨的樣式用的 |
| <q></q> | <q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了）咳胃，而是它的語義：引用別人的話。 |
| <blockquote> | 作用也是引用別人的文本旷太。但它是對長文本的引用展懈，如在文章中引入大段某知名作家的文字，這時需要這個標簽供璧。瀏覽器對<blockquote>標簽的解析是縮進樣式存崖。 |
| <br /> | 需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車睡毒。與以前我們學過的標簽不一樣来惧，<br />標簽是一個空標簽，沒有HTML內(nèi)容的標簽就是空標簽吕嘀，空標簽只需要寫一個開始標簽违寞，這樣的標簽有<br />、<hr />和<img /> |
| | 為你的網(wǎng)頁中添加一些空格 |
| <hr /> | 添加水平橫線,<hr />標簽和<br />標簽一樣也是一個空標簽偶房，所以只有一個開始標簽，沒有結束標簽军浆。 |
| <address> | 可以定義一個地址（比如電子郵件地址）棕洋、簽名或者文檔的作者身份,在瀏覽器上顯示的樣式為斜體; |
| <code> | 當代碼為一行代碼時，你就可以使用<code>標簽了.注：如果是多行代碼乒融，可以使用<pre>標簽掰盘。 |
| <pre> | 為你的網(wǎng)頁加入大段代碼 |
| <a> | <a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>; 1.只要為文本加入a標簽后，文字的顏色就會自動變?yōu)樗{色赞季；2.標簽在默認情況下愧捕，鏈接的網(wǎng)頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開則使用<a href="目標網(wǎng)址" target="_blank">click here!</a>;3.<a>標簽還有一個作用是可以鏈接Email地址申钩，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件,如果mailto后面同時有多個參數(shù)的話次绘，第一個參數(shù)必須以“?”開頭，后面的參數(shù)每一個都以“&”分隔;<a href=mailto:yy@163.com&cc=xiaoming@16c.com&bcc=xiaoyu@163.com&subject=主題&body=郵件內(nèi)容>對此影評有何感想撒遣，發(fā)送郵件給我</a>邮偎、cc：抄送，bcc：密文抄送义黎； |
| <img> | 標簽來插入圖片<img src = "myimage.gif" alt = "My Image" title = "My Image" />1禾进、src：標識圖像的位置；2廉涕、alt：指定圖像的描述性文本泻云，當圖像不可見時（下載不成功時）艇拍，可看到該屬性指定的文本；3宠纯、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)卸夕；4、圖像可以是GIF征椒，PNG娇哆，JPEG格式的圖像文件。 |
| <ul><li>我的第一個列表信息</li></ul> | 新聞信息列表勃救，ul-li是沒有前后順序的信息列表碍讨。 |
| <ol><li>我的第一個列表信息。</li><li>我的第一個列表信息蒙秒。</li></ol> | 標簽來制作有序列表來展示勃黍。 |
| <div> | 在網(wǎng)頁制作過程過中，可以把一些獨立的邏輯部分劃分出來晕讲，放在一個<div>標簽中覆获，這個<div>標簽的作用就相當于一個容器。<div id="版塊名稱">…</div>增加id屬性瓢省； |
| <table> | 創(chuàng)建表格的四個元素：table弄息、tbody、tr勤婚、th摹量、td；1馒胆、<table>…</table>：整個表格以<table>標記開始缨称、</table>標記結束。2祝迂、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示睦尽。加上這些表格結構， tbody包含行的內(nèi)容下載完優(yōu)先顯示型雳，不必等待表格結束后在顯示当凡，同時如果表格很長，用tbody分段四啰，可以一部分一部分地顯示宁玫。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格加載完后顯示柑晒。）3欧瘪、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行匙赞。4佛掖、<td>…</td>：表格的一個單元格妖碉，一行中包含幾對<td>...</td>，說明一行中就有幾列芥被。5欧宜、<th>…</th>：表格的頭部的一個單元格，表格表頭拴魄。6冗茸、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)匹中∠氖總結：1、table表格在沒有添加css樣式之前顶捷，在瀏覽器中顯示是沒有表格線的挂绰；2、表頭服赎，也就是th標簽中的文本默認為粗體并且居中顯示葵蒂。。重虑。践付。<style type="text/css">table tr td,th{border:1px solid #000;}</style>為它添加邊框。缺厉。荔仁。<table summary="表格簡介文本">摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)芽死，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容次洼。关贵。。卖毁。<caption>標題文本</caption>用以描述表格內(nèi)容揖曾，標題的顯示位置：表格上方。 |
| <form> | <form method="傳送方式" action="服務器文件">1亥啦、type：當type="text"時炭剪，輸入框為文本輸入框;當type="password"時, 輸入框為密碼輸入框。2翔脱、name：為文本框命名奴拦，以備后臺程序ASP 、PHP使用届吁。3错妖、value：為文本輸入框設置默認值绿鸣。(一般起到提示作用) |
| <label for="male"> | <label for="控件id名稱">，注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同暂氯。label標簽不會向用戶呈現(xiàn)任何特殊效果潮模，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內(nèi)點擊文本痴施，就會觸發(fā)此控件擎厢。就是說，當用戶單擊選中該label標簽時辣吃，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）动遭。 |
target 常見的4個值
1、-blank 在新窗口中打開齿尽；
2沽损、-self 在當前窗口打開（默認值）；
3循头、-parent 在父窗口打開绵估；
4、-top 在當前瀏覽器中打開卡骂，且框架會消失国裳。
<form>
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
<textarea rows="行數(shù)" cols="列數(shù)">在這里輸入內(nèi)容,支持多行文本展示</textarea>
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
<label>男</label><input type="radio" value="1" name="gender" />
<label>女</label><input type="radio" value="2" name="gender" />
<label>跑步</label><input type="checkbox" value="1" name="checkbox1" />
<label>打球</label><input type="checkbox" value="2" name="checkbox2" />
<label>登山</label><input type="checkbox" value="3" name="checkbox3" />
注意:同一組的單選按鈕，name 取值一定要一致全跨，比如上面例子為同一個名稱“radioLove”缝左，這樣同一組的單選按鈕才可以起到單選的作用。
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
注意：下拉列表也可以進行多選操作浓若，在<select>標簽中設置multiple="multiple"屬性渺杉，就可以實現(xiàn)多選功能，在 windows 操作系統(tǒng)下挪钓，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊）
CSS樣式
CSS的基本知識
1是越、CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式碌上，如文字大小倚评、顏色、字體加粗等馏予。
css 樣式由選擇符和聲明組成天梧，而聲明又由屬性和值組成如：
p{
font-size:12px;
color:red;
}
2、就像在Html的注釋一樣霞丧，在CSS中也有注釋語句：用/注釋語句/來標明（Html中使用 < !--注釋語句-->)
CSS的三種樣式
*三種樣式
1呢岗、內(nèi)聯(lián)式css樣式，直接寫在現(xiàn)有的HTML標簽中：
<p style="color:red;font-size:12px">這里文字是紅色。</p>
2敷燎、嵌入式css樣式暂筝，寫在當前的文件中，嵌入式css樣式必須寫在<style></style>之間硬贯，并且一般情況下嵌入式css樣式寫在<head></head>之間焕襟。如下代碼：
<style type="text/css">
span{
color:red;
}
</style>
3、外部式css樣式饭豹，寫在單獨的一個文件中鸵赖，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標簽內(nèi)）使用<link>標簽將css樣式文件鏈接到HTML文件內(nèi)拄衰，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1.css樣式文件名稱以有意義的英文字母命名它褪，如 main.css。
2.rel="stylesheet" type="text/css" 是固定寫法不可修改翘悉。
3.<link>標簽位置一般寫在<head>標簽之內(nèi)茫打。
- 優(yōu)先級：內(nèi)聯(lián)式 > 嵌入式 > 外部式
- 但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。
- 總結的優(yōu)先級是有一個前提：內(nèi)聯(lián)式妖混、嵌入式老赤、外部式樣式表中css樣式是在的相同權值的情況下;
- 下面是權值的規(guī)則：
標簽的權值為1，類選擇符的權值為10制市，ID選擇符的權值最高為100抬旺。例如下面的代碼：
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1祥楣，所以可以理解為繼承的權值最低开财。
- 其實總結來說，就是--就近原則（離被設置元素越近優(yōu)先級別越高）误褪。
- 注意：!important要寫在分號的前面
p{color:red!important;}
注意當網(wǎng)頁制作者不設置css樣式時责鳍，瀏覽器會按照自己的一套樣式來顯示網(wǎng)頁。并且用戶也可以在瀏覽器中設置自己習慣的樣式兽间，比如有的用戶習慣把字號設置為大一些薇搁，使其查看網(wǎng)頁的文本更加清楚。這時注意樣式優(yōu)先級為：瀏覽器默認的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設置的樣式渡八，但記住!important優(yōu)先級樣式是個例外，權值高于用戶自己設置的樣式传货。
CSS選擇器
- 標簽選擇器
標簽選擇器其實就是html代碼中的標簽屎鳍。如右側代碼編輯器中的<html>、<body>问裕、<h1>逮壁、<p>、<img>粮宛。例如下面代碼：
p{font-size:12px;line-height:1.6em;} - 類選擇器
.類選器名稱{css樣式代碼;};
類選擇器詞列表方法為一個元素同時設置多個樣式窥淆。我們可以為一個元素同時設多個樣式卖宠，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表)忧饭。 - ID選擇器
ID選擇符的前面是井號（#）號扛伍，而不是英文圓點（.）。
ID選擇器只能在文檔中使用一次.
#setGreen{
color:green;
}
- 子選擇器
子選擇器词裤，即大于符號(>),用于選擇指定標簽元素的第一代子元素刺洒。如右側代碼編輯器中的代碼：
.food>li{border:1px solid red;} - 包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素吼砂。如右側代碼編輯器中的代碼：
.first span{color:red;}
請注意這個選擇器與子選擇器的區(qū)別逆航，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代渔肩。而后代選擇器是作用于所有子后代元素因俐。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇周偎。 - 全局選擇器
通用選擇器是功能最強大的選擇器抹剩，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素栏饮，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：
* {color:red;}
字符串匹配的屬性選擇符(^ $ *三種吧兔，分別對應開始、結尾袍嬉、包含) - 偽類選擇符
更有趣的是偽類選擇符境蔼，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態(tài)）設置樣式伺通，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設置字體顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設置字體顏色變紅箍土。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標滑過字體顏色變?yōu)榧t色特效。
如：就是鏈接樣式,a元素的偽類罐监，4種不同的狀態(tài)：link吴藻、visited、active弓柱、hover沟堡。） - 分組選擇器
當你想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（矢空，）航罗，如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色：
h1,span{color:red;}
CSS屬性
| 屬性名 | 屬性值 | 說明 |
|---|---|---|
| color | red | 設置顏色 |
| font-size | 12px | 設置字體大小 |
| font-weight | bold | 設置字體樣式粗體 |
| font-family | Microsoft Yahei | 設置字體種類 |
| font-variant | small-caps | 把段落設置為小型大寫字母字體 |
| font-style | italic | 設置字體斜體 |
| text-decoration | underline | 設置下劃線 |
| text-decoration | line-through | 設置刪除線 |
| text-decoration | none | 給a標簽去除下劃線 |
| text-indent | 2em | 段落排版--縮進 |
| text-align | center | 被設置元素為文本屁药、圖片等行內(nèi)元素時粥血，水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的 |
| vertical-align | middle | 用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用 |
| line-height | 1.5em | 段落排版--行間距（行高） |
| word-spacing | 50px | 單詞間距設置 |
| letter-spacing | 50px | 設置文字間隔或者字母間隔 |
| background-color | yellow | 設置背景顏色 |
| display | block inline inline-block table-cell | 顯示為塊級元素 行內(nèi)元素 內(nèi)聯(lián)塊元素 設置為表格單元顯示 |
| visibility | hidden visible | display:none是徹底消失复亏，不在文檔流中占位趾娃，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了缔御，可以理解為透明度為0的效果抬闷，在文檔流中占位，瀏覽器會解析該元素 |
| border | 1px solid red | 設置它的粗細刹淌、樣式和顏色(邊框三個屬性)饶氏；dashed（虛線）dotted（點線）solid（實線） |
| padding | 20px 10px 15px 30px | 填充也可分為上、右有勾、下疹启、左(順時針) |
| margin | 20px 10px 15px 30px | 邊界也是可分為上、右蔼卡、下喊崖、左 |
| border-bottom | 1px solid red | 只為一個方向的邊框設置樣式 |
| width | 200px | 設置寬度 |
| height | 200px | 設置高度 |
| box-sizing | border-box | 設置邊框、內(nèi)邊框和內(nèi)容的寬度和高度 |
| box-sizing | content-box | 給內(nèi)容設置的 width 和 height(默認屬性) |
| list-style | none | 去除每個li 前面的點 用 li {list-style: none;} |
| border-radius | 25px | 把一個盒子四角變弧度 |
| cursor | pointer | 鼠標移入時變成手狀標志 |
| trstransition | width 1s | 鼠標移入時寬度出現(xiàn)時間是1秒 |
| opacity | 0或1 | 規(guī)定不透明度雇逞。從 0.0 （完全透明）到 1.0（完全不透明）荤懂。 |
| z-index | -1 | z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面塘砸。元素可擁有負的 z-index 屬性值 |
元素的分類
- 常用的塊狀元素有：<div>节仿、<p>、<h1>...<h6>掉蔬、<ol>廊宪、<ul>、<dl>女轿、<table>箭启、<address>、<blockquote> 蛉迹、<form>
1.每個塊級元素都從新的一行開始傅寡，并且其后的元素也另起一行。（真霸道北救，一個塊級元素獨占一行）
2.元素的高度荐操、寬度、行高以及頂和底邊距都可設置珍策。
3.元素寬度在不設置的情況下淀零，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度膛壹。 - 常用的內(nèi)聯(lián)元素有：<a>、<span>、
模聋、<i>肩民、<em>、<strong>链方、<label>持痰、<q>、<var>祟蚀、<cite>工窍、<code>
1、和其他元素都在一行上前酿；
2患雏、元素的高度、寬度及頂部和底部邊距不可設置罢维；
3淹仑、元素的寬度就是它包含的文字或圖片的寬度，不可改變肺孵。 - 常用的內(nèi)聯(lián)塊狀元素有：<img>匀借、<input>
1、和其他元素都在一行上平窘；
2吓肋、元素的高度、寬度瑰艘、行高以及頂和底邊距都可設置是鬼。
（兩個元素之前有縫隙存在,如果后面跟塊級元素，則塊級元素會換行顯示）
盒模型
盒模型
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的磅叛，css內(nèi)定義的寬（width）和高（height）南用，指的是填充以里的內(nèi)容范圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界寻馏。
[圖片上傳失敗...(image-5e35bf-1550823356858)]
CSS布局模型
- 彈性布局（Flex）
Flex 是 Flexible Box 的縮寫驱闷，意為"彈性布局"，用來為盒狀模型提供最大的靈活性敲董，任何一個容器都可以指定為Flex 布局鏈接：
.box{
display: flex;
}
- CSS Grid 網(wǎng)格布局教程鏈接
網(wǎng)格布局（Grid）是最強大的 CSS 布局方案紫皇。
它將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格腋寨，做出各種各樣的布局聪铺。以前，只能通過復雜的 CSS 框架達到的效果萄窜，現(xiàn)在瀏覽器內(nèi)置了铃剔。
- 流動模型（Flow）
流動布局模型具有2個比較典型的特征：
第一點撒桨，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下键兜，塊狀元素的寬度都為100%凤类。實際上，塊狀元素都會以行的形式占據(jù)位置普气。
第二點谜疤，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示现诀。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行） - 浮動模型 (Float)
塊狀元素這么霸道都是獨占一行夷磕，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢仔沿？不要著急坐桩，設置元素浮動就可以實現(xià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>
可以設置 width 和 height 屬性也可以在一行顯示擦俐，元素之前沒有縫隙存在并且會脫離圖層，如果后面跟塊級元素握侧，則塊級元素不會換行顯示蚯瞧。
- 層模型（Layer）
0、默認定位(position:static);
塊級元素獨占一行品擎，行內(nèi)元素默認排列在一行埋合，也就是說每個元素執(zhí)行各自的默認屬性；
1萄传、絕對定位(position: absolute)
?絕對定位是特殊的相對定位甚颂；
?絕對定位是相對它最近的 已定位(position 不能是默認的 static) 的父級元素進行定位的；
?如果它的父級元素都沒有定位秀菱，那它就相對于瀏覽器首個窗口進行定位的（瀏覽器有滾動條振诬，往下拉不算首個窗口）；
2衍菱、相對定位(position: relative)
相對本身位置進行位移
如：
right: 20px 在原來的位置往左移動 20 px;
top: 20px 在原來的位置往下移動 20 px;
left:20px 在原來的位置往右移動 20 px赶么；
bottom: 20px; 在原來的位置往上移動 20 px;
注意：本來向右移動現(xiàn)在是向左移動，本來想上移動現(xiàn)在是向下移動
3脊串、固定定位(position: fixed)
根據(jù)瀏覽器顯示進行定位的辫呻，即使窗口有垂直滾動條清钥，也是顯示能看到窗口就那么大。
CSS樣式設計小技巧
1放闺、水平居中設置-行內(nèi)元素 text-align:center
2循捺、水平居中設置-定寬塊狀元素：
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的。
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}
3雄人、水平居中總結-不定寬塊狀元素方法（一）
加入 [table]標簽；
為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定）念赶，因此可以看做一個定寬度塊元素础钠，然后再利用定寬度塊狀居中的margin的方法，使其水平居中叉谜。
4旗吁、水平居中總結-不定寬塊狀元素方法（二）
設置 [display: inline] 方法：與第一種類似，顯示類型設為行內(nèi)元素停局，進行不定寬元素的屬性設置很钓；
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline董栽，變成了行內(nèi)元素码倦，所以少了一些功能，比如設定長度值锭碳。
第二種方法：改變塊級元素的 display 為 inline 類型（設置為 [行內(nèi)元素]袁稽，然后使用 text-align:center 來實現(xiàn)居中效果。
5擒抛、水平居中總結-不定寬塊狀元素方法（三）
設置 [position:relative]和 left:50%利用相對定位 的方式推汽，將元素向左偏移 50% ，即達到居中的目的歧沪；
方法三：通過給父元素設置 float歹撒，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現(xiàn)水平居中诊胞。
6暖夭、垂直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度厢钧，line-height: 顧名思義鳞尔，行高（行間距），指在文本中早直，行與行之間的 基線間的距離 )寥假。
line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”霞扬。分為兩半糕韧，分別加到一個文本行內(nèi)容的頂部和底部枫振。
這種文字行高與塊高一致帶來了一個弊端：當文字內(nèi)容的長度大于塊的寬時，就有內(nèi)容脫離了塊萤彩。
7粪滤、垂直居中-父元素高度確定的多行文本（方法一）
css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時雀扶，會對inline-block類型的子元素都有用杖小。
8、垂直居中-父元素高度確定的多行文本（方法二）
display:table-cell;/IE8以上及Chrome愚墓、Firefox/
vertical-align:middle;/IE8以上及Chrome予权、Firefox/
9、隱性改變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 以后籍救，就可以了
