建站
咨詢
售后
建站咨詢
新聞中心
html5頁(yè)面怎么布局
1）像span這樣的行內(nèi)標(biāo)記，定義它的margin-top和margin-bottom是無(wú)效的，除非你把它設(shè)置為塊狀元素才可以。Display:block
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)石獅免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
2）對(duì)于塊狀元素，你可以自由的使用外邊距來(lái)定義版式和元素之間的距離。類似 DIV 等等，
3）無(wú)論什么元素，一旦設(shè)置為是浮動(dòng)顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來(lái)控制的大小以及與其他對(duì)象之間的位置關(guān)系。
4）浮動(dòng)是從網(wǎng)頁(yè)布局的角度來(lái)定義元素的顯示，而行內(nèi)和塊狀屬性主要是從元素自身的性質(zhì)來(lái)定其顯示的。
5）當(dāng)元素沒(méi)有定義邊框時(shí)，可以把內(nèi)邊距作為外邊距使用。有時(shí)候外邊距會(huì)有重疊現(xiàn)象的。
6）當(dāng)為元素定義背景圖像時(shí)，內(nèi)邊距區(qū)域內(nèi)可以顯示背景圖像，而對(duì)外邊距區(qū)域來(lái)說(shuō)，背景圖像是達(dá)不到的，他永遠(yuǎn)都是透明狀態(tài)
7）用div+css設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)時(shí)，設(shè)計(jì)師滿腦子都是網(wǎng)頁(yè)內(nèi)容，而非內(nèi)容所呈現(xiàn)的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會(huì)自動(dòng)占據(jù)一行，因?yàn)樵谒┪哺郊恿艘粋€(gè)換行符，而行內(nèi)元素沒(méi)有這個(gè)特點(diǎn)。塊狀元素有完整的盒模型結(jié)構(gòu)，可以定義寬度和高度，而行內(nèi)元素沒(méi)有這個(gè)特性，無(wú)法通過(guò)高度來(lái)改變文本行的行高。
塊元素的代表標(biāo)記 div
行內(nèi)元素的代表標(biāo)記 span ，行內(nèi)標(biāo)記不具備組織結(jié)構(gòu)框架
9）網(wǎng)頁(yè)布局分為：自然布局，浮動(dòng)布局， 定位布局
10）當(dāng)一個(gè)元素被定義為浮動(dòng)顯示時(shí)，即定義為塊狀元素。并且該元素就會(huì)收縮自身體積為最小狀態(tài)。所以，應(yīng)該有個(gè)好的習(xí)慣即把浮動(dòng)元素設(shè)置高和寬。如果沒(méi)有設(shè)置，則元素會(huì)按照它所包含的內(nèi)容大小來(lái)確定它的大小。
11）當(dāng)元素浮動(dòng)后，周邊的對(duì)象會(huì)自動(dòng)環(huán)繞浮動(dòng)元素周圍，形成一種環(huán)繞關(guān)系。
12）塊狀元素之間的外邊距會(huì)有重疊現(xiàn)象，但是浮動(dòng)元素之間的外邊距不會(huì)發(fā)聲重疊現(xiàn)象。
13）浮動(dòng)元素移動(dòng)，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對(duì)或是相對(duì)元素）都會(huì)覆蓋在文檔流對(duì)象之上。但是，select元素的窗口控件還不完全支持z-index
15）在css定位布局中，一般遵循“外部相對(duì)定位，內(nèi)部絕對(duì)定位”
16）在body中設(shè)置min-width:760px,可以避免布局重疊現(xiàn)象。
網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5+CSS3） 是什么意思？
正如其他網(wǎng)友回答的一樣，這個(gè)frag是自定義屬性，一般用來(lái)頁(yè)面布局時(shí)標(biāo)識(shí)作用。比如：當(dāng)你的頁(yè)面是左右兩欄，那么代碼如下：
從上面代碼應(yīng)該能明白了吧？有點(diǎn)類似于注釋，不過(guò)用這種方法比注釋更加靈活。
HTML5如何利用rem實(shí)現(xiàn)自適應(yīng)布局
分析設(shè)計(jì)圖
假設(shè)設(shè)計(jì)圖大小為1080px。這也就意味著，在開(kāi)發(fā)時(shí)，需要兼容的最大分辨率為1080px，最小的為320px。
2.?調(diào)整視口
代碼實(shí)例：
!DOCTYPE?html
head
meta?charset="UTF-8"?/
title布局之路-移動(dòng)端開(kāi)發(fā)實(shí)例/title
meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/
link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/
/head
body
div?class="wrap"/div
/body
/html
代碼解析：由于使用不同設(shè)備打開(kāi)網(wǎng)頁(yè)時(shí)，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。
3. 確定設(shè)計(jì)圖的最小字體
瀏覽器（部分）能夠顯示的最小字體未12px，當(dāng)移動(dòng)端頁(yè)面寬度為320px時(shí)，要保證最小字體為12px，那么在1080px的設(shè)計(jì)圖中，最小字體應(yīng)當(dāng)為42px。
代碼實(shí)例：
style?type="text/css"
html?{
font-size:?42px;
}
/style
4. 按照設(shè)計(jì)圖的像素進(jìn)行開(kāi)發(fā)
按照正常網(wǎng)頁(yè)開(kāi)發(fā)流程，進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)即可。
5. 使用百分比和rem替換px
代碼效果對(duì)比：
/*使用固定像素*/
.box?{
float:?left;
width:?658px;
font-size:?72px;
text-align:?center;
line-height:?195px;
}
/*使用百分比和rem*/
.box?{
float:?left;
width:?60.93%;
font-size:?1.71rem;
text-align:?center;
line-height:?4.64rem;
}
代碼解析：
水平方向的值，將具體像素調(diào)整為百分比。百分比的計(jì)算是根據(jù)父級(jí)的內(nèi)容區(qū)寬度進(jìn)行計(jì)算的。
例如，父級(jí)寬度為1080px， 子級(jí)元素為197px，那么子元素轉(zhuǎn)換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據(jù)父級(jí)計(jì)算，當(dāng)標(biāo)簽結(jié)構(gòu)級(jí)別不同時(shí)，計(jì)算公式中的“分母”也有所不同，在開(kāi)發(fā)時(shí)這個(gè)地方很容易出現(xiàn)問(wèn)題，請(qǐng)務(wù)必注意。
垂直方向的值，將具體像素調(diào)整為rem，與水平方向相比，垂直方向的計(jì)算就比較簡(jiǎn)單。例如，行高為195px，HTML標(biāo)簽當(dāng)前的字體大小為42px，將行高轉(zhuǎn)換為rem單位，即195/42= 4. 64rem。
html5標(biāo)準(zhǔn)頁(yè)面怎么寫(xiě)
html5頁(yè)面方法：
html
head
meta http-equiv="Content-Type" content="text/html;charset=UTF-8"
title標(biāo)題/title
/head
body
......................
/body
/html
以上方法 ，meta http-equiv="Content-Type" content="text/html;charset=UTF-8"加上這行代碼。
html5 怎么制作響應(yīng)式網(wǎng)頁(yè)
步驟1 創(chuàng)建空白的HTML 5模版
首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡(jiǎn)單，如下所示：
復(fù)制代碼
步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁(yè)面模版中，我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：
復(fù)制代碼
讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼
1）首先往標(biāo)題中增加如下代碼：
Simple HTML5 Template
復(fù)制代碼
2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類導(dǎo)航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復(fù)制代碼
3）使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
復(fù)制代碼
4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分。
根據(jù)目前的規(guī)范，元素有兩種使用方法：
被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。
在之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。
代碼如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
復(fù)制代碼
5）加上最后的標(biāo)簽，代碼為：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復(fù)制代碼
步驟4 增加CSS樣式
首先創(chuàng)建一個(gè)空白的樣式，如下：
[/code] 然后在中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
復(fù)制代碼
步驟5 為移動(dòng)應(yīng)用使用@media query查詢 為了進(jìn)行響應(yīng)式設(shè)計(jì)，最佳的方案是使用@media query去進(jìn)行查詢，在上面的CSS代碼中添加如下代碼：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
復(fù)制代碼
步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前，代碼如下：
復(fù)制代碼
求HTML5中文本或者行內(nèi)塊的常用居中方式 附代碼 盡量全 謝了
方法一：
這種方法用來(lái)實(shí)現(xiàn)單行垂直居中是相當(dāng)?shù)暮?jiǎn)單的，你只要保證元素內(nèi)容是單行，并且其高度是固定不變的，你只要將其“l(fā)ine-height”設(shè)置成和“height”值一樣就Ok了。不過(guò)這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。
Html Markup
div class="vertical"content/div
復(fù)制代碼
CSS Code:
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}
復(fù)制代碼
優(yōu)點(diǎn)：
適合在所有瀏覽器，沒(méi)有足夠空間時(shí)，內(nèi)容不會(huì)被切掉
缺點(diǎn)：
僅適合應(yīng)用在文本和圖片上，并且這種方法，當(dāng)你文本不是單行時(shí)，效果極差，差到讓你感到惡心。
這種方法對(duì)運(yùn)用在小元素上是非常有用的，比如說(shuō)讓一個(gè)button、圖片或者單行文本字段。
方法二：
這種方法將在需要給容器設(shè)置絕對(duì)定位（position:absolute）,并且定位高度（top:50%）和margin-top為高度的一半（margin-top:-height/2）。這就意味著使用這種方法來(lái)實(shí)現(xiàn)垂直居中的效果，那么元素必須要有一個(gè)固定的高度。這樣一來(lái)，你給元素設(shè)置了固定高度，如果你又給他設(shè)置了“overflow:auto”，那么當(dāng)元素內(nèi)容超過(guò)容器后，這樣元素的就會(huì)出現(xiàn)滾動(dòng)，而不會(huì)自適應(yīng)內(nèi)容的高度。
HTML Markup
div class="vertical"content/div
復(fù)制代碼
CSS Code
.vertical {
height: 100px;/*元素的高度*/
position: absolute;
top: 50%;/*元素的頂部邊界離父元素的的位置是父元素高度的一半*/
margin-top: -50px;/*設(shè)置元素頂邊負(fù)邊距，大小為元素高度的一半*/
}
復(fù)制代碼
優(yōu)點(diǎn)：
能在各瀏覽器下工作，結(jié)構(gòu)簡(jiǎn)單明了，不需增加額外的標(biāo)簽
缺點(diǎn)：
由于固定死元素的高度，致使沒(méi)有足哆的空間，當(dāng)內(nèi)容超過(guò)容器的大小時(shí)，要么會(huì)消息，要么會(huì)出現(xiàn)滾動(dòng)條（如果元素在body內(nèi)，當(dāng)用戶縮小瀏覽器窗口時(shí)，body的滾動(dòng)條將不會(huì)出現(xiàn)）。
這種方法主要是針對(duì)多行元素來(lái)進(jìn)行元素的垂直居中，而并非是此元素的內(nèi)容垂直居中，這一點(diǎn)先要理解并分開(kāi)清楚。另外此方法是通過(guò)絕對(duì)定位來(lái)實(shí)現(xiàn)的，那么用這種方法實(shí)現(xiàn)元素的垂直居中需要注意以下幾點(diǎn)：其一元素定位關(guān)系到一個(gè)相對(duì)定位參考，所以要保證元素是相對(duì)于哪個(gè)為參考坐標(biāo)；另外需要設(shè)置給元素明確定一個(gè)高度值并且給元素設(shè)置一個(gè)負(fù)值的margin-top，而且值為元素高度的一半。這里我建議大家給元素定一個(gè)寬度值，因?yàn)樵剡M(jìn)行絕對(duì)定位后脫離文檔流，其寬度是根據(jù)元素內(nèi)容所占寬度來(lái)計(jì)算的，為這能讓其視覺(jué)效果更好，最好給元素定義一個(gè)寬度值。
根據(jù)這種方法，我們稍作修改就能使元素不單是垂直居中，而且還可以水平居中，如：
HTML Markup
div id="wrap"test/div
復(fù)制代碼
CSS Code
#wrap {
width: 200px;/*元素的寬度*/
height:200px;/*元素的高度*/
position: absolute; l
eft: 50%;/*配合margin-left的負(fù)值實(shí)現(xiàn)水平居中*/
margin-left: -100px;/*值的大小等于元素寬度的一半*/
top:50%;/*配合margin-top的負(fù)值實(shí)現(xiàn)垂直居中*/
margin-top: -100px;/*值的大小等于元素高度的一半*/
}
復(fù)制代碼
這種方法可以實(shí)現(xiàn)元素的水平垂直居中，常用于頁(yè)面在最中間的布局，使用這種方法一定要把握?。核酱怪本又械脑匾忻鞔_的大?。〒Q句話說(shuō)就是要有確切的寬和高度值）；給元素進(jìn)行絕對(duì)定位，并設(shè)置left,top值為“50%”（此處最好使用 對(duì)定位，如果只是單單水平居中，此處可以換成相對(duì)定位）；最后設(shè)置margin-top和margin-left的負(fù)值，而且其值分別為元素高度和寬度的一半。
方法三：
方法三是使用的的div模擬表格效果，也就是說(shuō)將多個(gè)div的“display”屬性設(shè)置為禾“table”和“table-cell”，并設(shè)置他們的“vertical-align”的屬性值為“middle”。有關(guān)于“display:table”更多的介紹可以點(diǎn)擊這里或者去閱讀Quirksmode的《The display declaration》一文。
HTML Code
div id="container"
div id="content"content/div
/div
復(fù)制代碼
CSS Code
#container {
height: 300px;
display: table;/*讓元素以表格形式渲染*/
}
#content {
display:table-cell;/*讓元素以表格的單元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直對(duì)齊*/
}
復(fù)制代碼
優(yōu)點(diǎn)：
這種方法不會(huì)像前面的兩種方法一樣，有高度的限制，此方法可以要據(jù)元素內(nèi)容動(dòng)態(tài)的改變高度，從而也就沒(méi)有空間的限制，元素的內(nèi)容不會(huì)因?yàn)闆](méi)足夠的空間而被切斷或者出現(xiàn)難看的滾動(dòng)條。
缺點(diǎn)：
不足之處呢？這種方法只適合現(xiàn)代瀏覽器，在IE6-7下無(wú)法正常運(yùn)行；而且較前兩者而言，結(jié)構(gòu)也更復(fù)雜。
這種方法在現(xiàn)代瀏覽器下是非常方便。但是在IE6-7中是不被支持的，因?yàn)閐isplay:table在IE6-7中不被支持，那么為了解決這種方法在IE6-7的兼容，需要額外增加一個(gè)div，并使用hack，下面我們一起來(lái)看看其解決辦法。
HTML Markup
div class="table"
div class="tableCell"
div class="content"content/div
/div
/div
復(fù)制代碼
CSS Code
.table {
height: 300px;/*高度值不能少*/
width: 300px;/*寬度值不能少*/
display: table;
position: relative; float:left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
}
復(fù)制代碼
方法四：
這種方法有點(diǎn)新意，用這種方法你需要在居中元素前面放一個(gè)空的div（塊元素就可以），然后設(shè)置這個(gè)div的高度為50%，margin-bottom為元素高度的一半，而且居中元素需要清除浮動(dòng)。需要注意的是，使用這種方法，如果你的居中元素是放在body中的話，你需要給html,body設(shè)置一個(gè)“height:100%”的屬性。
HTML Markup
body
div id="floater"!--This block have empty content --/div
div id="content"Content section/div
/body
復(fù)制代碼
CSS Code
html,body {height: 100%;}
#floater{ float:left;
height:50%;/*相對(duì)于父元素高度的50%*/
margin-bottom: -120px;/*值大小為居中元素高度的一半（240px/2）*/
}
#content { clear:both;/*清除浮動(dòng)*/
height: 240px; position: relative;
}
復(fù)制代碼
優(yōu)點(diǎn)：
這種方法能兼容所有瀏覽器，在沒(méi)有足哆空間下，內(nèi)容不會(huì)被切掉
缺點(diǎn)：
元素高度被固定死，無(wú)法達(dá)到內(nèi)容自適應(yīng)高度，如果居中元素加上overflow屬性，要么元素出現(xiàn)滾動(dòng)條，要么元素被切掉；另外就是一個(gè)不算缺點(diǎn)的缺點(diǎn)，那就是加了一個(gè)空標(biāo)簽。
方法五：
這種方法和方法三一樣使用display:table-cell來(lái)實(shí)現(xiàn)，不過(guò)方法五不同之處是這個(gè)方法我們需要一個(gè)線盒型，用來(lái)實(shí)現(xiàn)IE下的效果，需要增加一上行內(nèi)標(biāo)簽比如說(shuō)“span”（此處最好使用行內(nèi)標(biāo)簽，千萬(wàn)不要使用塊標(biāo)簽，因?yàn)槭褂脡K標(biāo)簽會(huì)沒(méi)有效果），并把這個(gè)線盒型高度設(shè)置為100%。
HTML Markup
p class="table"
span class="tableCell"Centering multiple lines brin a block container./span
!--[if lte IE 7]b/b![endif]--
/p
復(fù)制代碼
CSS Code
style type="text/css"
.table {
border: 1px solid orange;
display: table;
height: 200px; width: 200px;
text-align: center;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
/style
!--[if lte ie 7]
style type="text/css"
.tableCell {
display: inline-block;
}
b {
display: inline-block;
height: 100%;
vertical-align: middle; width: 1px;
}
/style
![endif]--
復(fù)制代碼
優(yōu)點(diǎn)：
這種方法的優(yōu)點(diǎn)和方法三是一樣的，不會(huì)有高度的限制。
缺點(diǎn)：
不好的地方就是這種方法為了讓IE運(yùn)行正常，需要額外增加一些標(biāo)簽，另外就是線盒型的標(biāo)簽種類有限制。不過(guò)用起來(lái)還是蠻方便的。
方法六：
這種方法是采用的display:inline-block，然后借助另一個(gè)元素的高度來(lái)實(shí)現(xiàn)居中
Html Markup
div id="parent"
div id="vertically_center"
pI am vertically centered!/p
/div
div id="extra"!-- ie comment --/div
/div
復(fù)制代碼
CSS Code
style type="text/css"
html,
body{
height: 100%;
}
#parent { h
eight: 500px;/*定義高度，讓線盒型div#extra有一個(gè)參照物，可以是固定值，也可以是百分比*/
border: 1px solid red;
}
#vertically_center,
#extra {
display: inline-block;/*把元素轉(zhuǎn)為行內(nèi)塊顯示*/
vertical-align: middle;/*垂直居中*/
}
#extra {
height: 100%; /*設(shè)置線盒型為父元素的100%高度*/
}
/style
!--[if lt IE 8]
style type="text/css"
/*IE6-7不支持display:inline-block，所以在ie6-7另外寫(xiě)一個(gè)hack，用來(lái)支持ie6-7*/
#vertically_center,
#extra {
display: inline;
zoom: 1; }
#extra {
width: 1px;
}
/style
![endif]--
復(fù)制代碼
優(yōu)點(diǎn)：
可以自適應(yīng)高度，簡(jiǎn)單易懂
缺點(diǎn)：
需要給元素的父元素設(shè)置一個(gè)高度，這個(gè)高度可以是一個(gè)固定值或者百分值高度，另外需要增加一個(gè)額外的標(biāo)簽，當(dāng)作線盒型，如div#extra，并且需要設(shè)置其高度為100%。另外就是ie6-7不支持display:inline-block，需要給他們另外寫(xiě)一個(gè)樣式。
這是一個(gè)很有意思的方法，但你要懂得如何使用display。有關(guān)于這種方法的操作，大家可以去看一看Jonathan Potter寫(xiě)的《CSS, Vertical Centering》。
網(wǎng)站欄目：html5頁(yè)面布局代碼,html5頁(yè)面布局怎么寫(xiě)代碼
文章網(wǎng)址：http://www.dlmjj.cn/article/phsdog.html
