DivCSS教程:DTD(文檔類型)影響margin實(shí)現(xiàn)居中的分析_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
Div CSS教程:DTD(文檔類型)影響margin實(shí)現(xiàn)居中的分析
什么是DTD呢?也就是文檔類型定義(Document Type Definition),我們?cè)谝郧暗慕坛讨卸家呀?jīng)經(jīng)過很清楚了,不清楚的朋友可以回過頭仔細(xì)的學(xué)習(xí)一下相關(guān)知識(shí):
CSS代碼結(jié)構(gòu)初探:DOCTYPE文檔類型及瀏覽器的模式
XHTML教程:Doctype文檔類型聲明必不可少!
假如您正使用HTML 4.0,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
假如您正使用XHTML 1.0 Transitional,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
通常我們?cè)谑褂肵HTML 1.0 文檔類型聲明下解決頁面的居中問題是通過margin:0 auto;
請(qǐng)您注重:margin:0 auto; 與margin-right:auto; margin-left:auto;是等同的效果。上面的代碼是一種簡(jiǎn)寫的形式。
關(guān)于CSS屬性的縮寫,您可以參考下面的文章:
CSS中級(jí)教程 快捷屬性縮寫
XHTML 1.0 Transitional示例的代碼如下:
代碼調(diào)試框 [m.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
運(yùn)行上面的代碼,一切正常,假如我們?nèi)サ鬌TD聲明,發(fā)現(xiàn)頁面就出問題了�?聪旅娴倪\(yùn)行效果:
代碼調(diào)試框 [m.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
然而頁面可能使用的是HTML 4.0文檔類型聲明,如何才能讓頁面居中呢,顯然很多朋友已經(jīng)發(fā)現(xiàn)了,同樣的代碼,同樣的margin:0 auto;頁面容器居左了,解決辦法如下:
主要的定義樣式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}
當(dāng)您定義text-align:center;以后,會(huì)發(fā)現(xiàn)在IE下頁面已經(jīng)居中了,但是您會(huì)發(fā)現(xiàn)在mozilla下頁面仍然是居左的,解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“margin:0 auto;”這樣就可以完成頁面容器居中的效果。
假如你需要定義文字居中,需要單獨(dú)進(jìn)行設(shè)置,例如:#container { text-align:left;}
代碼如下:
代碼調(diào)試框 [m.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
注重:假如您想用這個(gè)方法使整個(gè)頁面要居中,建議在內(nèi)容較多時(shí)不要套在一個(gè)DIV里,可以依次拆出多個(gè)div,只要在每個(gè)拆出的div里定義margin:0 auto;就可以了。假如內(nèi)容不是非常多可以定義一個(gè)wrap層,讓這一層居中即可。
總結(jié):
margin在HTML 4.0文檔類型聲明下使頁面居中首先要在父元素定義“text-align:center”然后在子元素定義的時(shí)候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”進(jìn)行還原操作。
margin在XHTML 1.0文檔類型聲明下通過“margin:0 auto”即可定義頁面容器居中。
什么是DTD呢?也就是文檔類型定義(Document Type Definition),我們?cè)谝郧暗慕坛讨卸家呀?jīng)經(jīng)過很清楚了,不清楚的朋友可以回過頭仔細(xì)的學(xué)習(xí)一下相關(guān)知識(shí):
CSS代碼結(jié)構(gòu)初探:DOCTYPE文檔類型及瀏覽器的模式
XHTML教程:Doctype文檔類型聲明必不可少!
假如您正使用HTML 4.0,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
示例代碼 [m.hl5o.cn]
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
假如您正使用XHTML 1.0 Transitional,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
示例代碼 [m.hl5o.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
通常我們?cè)谑褂肵HTML 1.0 文檔類型聲明下解決頁面的居中問題是通過margin:0 auto;
請(qǐng)您注重:margin:0 auto; 與margin-right:auto; margin-left:auto;是等同的效果。上面的代碼是一種簡(jiǎn)寫的形式。
關(guān)于CSS屬性的縮寫,您可以參考下面的文章:
CSS中級(jí)教程 快捷屬性縮寫
XHTML 1.0 Transitional示例的代碼如下:
代碼調(diào)試框 [m.hl5o.cn][ 可先修改部分代碼 再運(yùn)行查看效果 ]
運(yùn)行上面的代碼,一切正常,假如我們?nèi)サ鬌TD聲明,發(fā)現(xiàn)頁面就出問題了�?聪旅娴倪\(yùn)行效果:
代碼調(diào)試框 [m.hl5o.cn][ 可先修改部分代碼 再運(yùn)行查看效果 ]
然而頁面可能使用的是HTML 4.0文檔類型聲明,如何才能讓頁面居中呢,顯然很多朋友已經(jīng)發(fā)現(xiàn)了,同樣的代碼,同樣的margin:0 auto;頁面容器居左了,解決辦法如下:
主要的定義樣式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}
當(dāng)您定義text-align:center;以后,會(huì)發(fā)現(xiàn)在IE下頁面已經(jīng)居中了,但是您會(huì)發(fā)現(xiàn)在mozilla下頁面仍然是居左的,解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“margin:0 auto;”這樣就可以完成頁面容器居中的效果。
假如你需要定義文字居中,需要單獨(dú)進(jìn)行設(shè)置,例如:#container { text-align:left;}
代碼如下:
代碼調(diào)試框 [m.hl5o.cn][ 可先修改部分代碼 再運(yùn)行查看效果 ]
注重:假如您想用這個(gè)方法使整個(gè)頁面要居中,建議在內(nèi)容較多時(shí)不要套在一個(gè)DIV里,可以依次拆出多個(gè)div,只要在每個(gè)拆出的div里定義margin:0 auto;就可以了。假如內(nèi)容不是非常多可以定義一個(gè)wrap層,讓這一層居中即可。
總結(jié):
margin在HTML 4.0文檔類型聲明下使頁面居中首先要在父元素定義“text-align:center”然后在子元素定義的時(shí)候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”進(jìn)行還原操作。
margin在XHTML 1.0文檔類型聲明下通過“margin:0 auto”即可定義頁面容器居中。
/所屬分類:Div+CSS教程/更新時(shí)間:2008-06-05
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 解決列高度自適應(yīng)的五種方法!
- 用PhotoShop兩分鐘完成一個(gè)xhtml css首頁
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- CSS標(biāo)識(shí)當(dāng)前位置頁效果的實(shí)現(xiàn)原理
- 圖片IMG與容器下邊界有空隙的解決方法
- 點(diǎn)擊復(fù)制代碼(IE,ff兼容)
- DivCSS教程:blockelement與inlineelement元素詳解
- css自動(dòng)換行有什么技巧?
- 網(wǎng)頁中表單常見問題解決辦法
- DivCSS教程:DTD(文檔類型)影響margin實(shí)現(xiàn)居中的分析
猜你也喜歡看這些
- IE6、IE7絕對(duì)定位與鏈接問題研究
- DIV CSS JS仿kijiji導(dǎo)航條
- DIV CSS布局入門示例(五)border和clear
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁布局Google首頁
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- 用css制作有滾動(dòng)條的居中彈出框
- CSS實(shí)例:常用的CSS隱藏文字的方法
- CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!
- CSS菜單實(shí)例:簡(jiǎn)潔的效果火紅的圍城
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-DivCSS教程:DTD(文檔類型)影響margin實(shí)現(xiàn)居中的分析
。