DivCSS教程:DTD(文檔類型)影響margin實現(xiàn)居中的分析_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
Div CSS教程:DTD(文檔類型)影響margin實現(xiàn)居中的分析
什么是DTD呢?也就是文檔類型定義(Document Type Definition),我們在以前的教程中都已經(jīng)經(jīng)過很清楚了,不清楚的朋友可以回過頭仔細的學(xué)習(xí)一下相關(guān)知識:
CSS代碼結(jié)構(gòu)初探:DOCTYPE文檔類型及瀏覽器的模式
XHTML教程:Doctype文檔類型聲明必不可少!
假如您正使用HTML 4.0,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
假如您正使用XHTML 1.0 Transitional,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
通常我們在使用XHTML 1.0 文檔類型聲明下解決頁面的居中問題是通過margin:0 auto;
請您注重:margin:0 auto; 與margin-right:auto; margin-left:auto;是等同的效果。上面的代碼是一種簡寫的形式。
關(guān)于CSS屬性的縮寫,您可以參考下面的文章:
CSS中級教程 快捷屬性縮寫
XHTML 1.0 Transitional示例的代碼如下:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
運行上面的代碼,一切正常,假如我們?nèi)サ鬌TD聲明,發(fā)現(xiàn)頁面就出問題了�?聪旅娴倪\行效果:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
然而頁面可能使用的是HTML 4.0文檔類型聲明,如何才能讓頁面居中呢,顯然很多朋友已經(jīng)發(fā)現(xiàn)了,同樣的代碼,同樣的margin:0 auto;頁面容器居左了,解決辦法如下:
主要的定義樣式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}
當您定義text-align:center;以后,會發(fā)現(xiàn)在IE下頁面已經(jīng)居中了,但是您會發(fā)現(xiàn)在mozilla下頁面仍然是居左的,解決辦法就是在子元素定義時候設(shè)定時再加上“margin:0 auto;”這樣就可以完成頁面容器居中的效果。
假如你需要定義文字居中,需要單獨進行設(shè)置,例如:#container { text-align:left;}
代碼如下:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
注重:假如您想用這個方法使整個頁面要居中,建議在內(nèi)容較多時不要套在一個DIV里,可以依次拆出多個div,只要在每個拆出的div里定義margin:0 auto;就可以了。假如內(nèi)容不是非常多可以定義一個wrap層,讓這一層居中即可。
總結(jié):
margin在HTML 4.0文檔類型聲明下使頁面居中首先要在父元素定義“text-align:center”然后在子元素定義的時候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”進行還原操作。
margin在XHTML 1.0文檔類型聲明下通過“margin:0 auto”即可定義頁面容器居中。
什么是DTD呢?也就是文檔類型定義(Document Type Definition),我們在以前的教程中都已經(jīng)經(jīng)過很清楚了,不清楚的朋友可以回過頭仔細的學(xué)習(xí)一下相關(guān)知識:
CSS代碼結(jié)構(gòu)初探:DOCTYPE文檔類型及瀏覽器的模式
XHTML教程:Doctype文檔類型聲明必不可少!
假如您正使用HTML 4.0,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
示例代碼 [www.hl5o.cn]
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
假如您正使用XHTML 1.0 Transitional,就要在創(chuàng)建的每張網(wǎng)頁的開頭處鍵入下列文檔類型聲明:
示例代碼 [www.hl5o.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
通常我們在使用XHTML 1.0 文檔類型聲明下解決頁面的居中問題是通過margin:0 auto;
請您注重:margin:0 auto; 與margin-right:auto; margin-left:auto;是等同的效果。上面的代碼是一種簡寫的形式。
關(guān)于CSS屬性的縮寫,您可以參考下面的文章:
CSS中級教程 快捷屬性縮寫
XHTML 1.0 Transitional示例的代碼如下:
代碼調(diào)試框 [www.hl5o.cn][ 可先修改部分代碼 再運行查看效果 ]
運行上面的代碼,一切正常,假如我們?nèi)サ鬌TD聲明,發(fā)現(xiàn)頁面就出問題了�?聪旅娴倪\行效果:
代碼調(diào)試框 [www.hl5o.cn][ 可先修改部分代碼 再運行查看效果 ]
然而頁面可能使用的是HTML 4.0文檔類型聲明,如何才能讓頁面居中呢,顯然很多朋友已經(jīng)發(fā)現(xiàn)了,同樣的代碼,同樣的margin:0 auto;頁面容器居左了,解決辦法如下:
主要的定義樣式:
body {text-align:center; }
#container {margin:0 auto; width:500px; background:#ccc;}
當您定義text-align:center;以后,會發(fā)現(xiàn)在IE下頁面已經(jīng)居中了,但是您會發(fā)現(xiàn)在mozilla下頁面仍然是居左的,解決辦法就是在子元素定義時候設(shè)定時再加上“margin:0 auto;”這樣就可以完成頁面容器居中的效果。
假如你需要定義文字居中,需要單獨進行設(shè)置,例如:#container { text-align:left;}
代碼如下:
代碼調(diào)試框 [www.hl5o.cn][ 可先修改部分代碼 再運行查看效果 ]
注重:假如您想用這個方法使整個頁面要居中,建議在內(nèi)容較多時不要套在一個DIV里,可以依次拆出多個div,只要在每個拆出的div里定義margin:0 auto;就可以了。假如內(nèi)容不是非常多可以定義一個wrap層,讓這一層居中即可。
總結(jié):
margin在HTML 4.0文檔類型聲明下使頁面居中首先要在父元素定義“text-align:center”然后在子元素定義的時候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”進行還原操作。
margin在XHTML 1.0文檔類型聲明下通過“margin:0 auto”即可定義頁面容器居中。
/所屬分類:Div+CSS教程/更新時間:2008-06-05
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達式替換a標記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-DivCSS教程:DTD(文檔類型)影響margin實現(xiàn)居中的分析
。