HTML標簽
HTML代碼注釋 < !--注釋文字 -->
HTML是網(wǎng)頁內容的載體。內容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
| 標簽 | 屬性 |
|---|---|
| <html></html> | 根標簽 |
| <head> | 頭標簽 |
| <title> | 在標簽之間的文字內容是網(wǎng)頁的標題信息 |
| <script> | 填寫javascript相關代碼<script src="/static/js/abc.js"></script> |
| <style> | 填寫css相關代碼 |
| <link> | 標簽將css樣式文件鏈接到HTML文件內<link href="base.css" rel="stylesheet" type="text/css" /> |
| <meta> | meta標簽被稱為可視區(qū)域meta標簽，<meta name=”viewport” content=”” /> |
| <body> | 內容標簽 |
| <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內容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有<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=郵件內容>對此影評有何感想，發(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包含行的內容下載完優(yōu)先顯示，不必等待表格結束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格加載完后顯示。）3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。5、<th>…</th>：表格的頭部的一個單元格，表格表頭。6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)?？偨Y：1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的；2、表頭，也就是th標簽中的文本默認為粗體并且居中顯示。。。。<style type="text/css">table tr td,th{border:1px solid #000;}</style>為它添加邊框。。。<table summary="表格簡介文本">摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。。。。<caption>標題文本</caption>用以描述表格內容，標題的顯示位置：表格上方。 |
| <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 標簽內點擊文本，就會觸發(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ù)">在這里輸入內容,支持多行文本展示</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內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成如：
p{
font-size:12px;
color:red;
}
2、就像在Html的注釋一樣，在CSS中也有注釋語句：用/注釋語句/來標明（Html中使用 < !--注釋語句-->)
CSS的三種樣式
*三種樣式
1、內聯(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>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1.css樣式文件名稱以有意義的英文字母命名，如 main.css。
2.rel="stylesheet" type="text/css" 是固定寫法不可修改。
3.<link>標簽位置一般寫在<head>標簽之內。
- 優(yōu)先級：內聯(lián)式 > 嵌入式 > 外部式
- 但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。
- 總結的優(yōu)先級是有一個前提：內聯(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)設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變?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 | 被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 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 | 顯示為塊級元素 行內元素 內聯(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 | 設置邊框、內邊框和內容的寬度和高度 |
| box-sizing | content-box | 給內容設置的 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%（和父元素的寬度一致），除非設定一個寬度。 - 常用的內聯(lián)元素有：<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 - 常用的內聯(lián)塊狀元素有：<img>、<input>
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
（兩個元素之前有縫隙存在,如果后面跟塊級元素，則塊級元素會換行顯示）
盒模型
盒模型
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容范圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
[圖片上傳失敗...(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)在瀏覽器內置了。
- 流動模型（Flow）
流動布局模型具有2個比較典型的特征：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據(jù)位置。
第二點，在流動模型下，內聯(lián)元素都會在所處的包含元素內從左到右水平分布顯示。（內聯(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);
塊級元素獨占一行，行內元素默認排列在一行，也就是說每個元素執(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、水平居中設置-行內元素 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ù)其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
4、水平居中總結-不定寬塊狀元素方法（二）
設置 [display: inline] 方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置；
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
第二種方法：改變塊級元素的 display 為 inline 類型（設置為 [行內元素]，然后使用 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 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。
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 標簽是 行內元素 ，所以設置它的 width 是 沒有效果的，但是設置為 position:absolute 以后，就可以了
