標準W3C盒子模型和IE盒子模型

2022-05-27 分類：網站建設

CSS盒子模型：網頁設計中CSS技術所使用的一種思維模型。

CSS盒子模型組成：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。

CSS盒子模型分為：標準W3C盒子模型，IE盒子模型，注意在兩種模型中寬
（width）和高（height）包括屬性的不同。

標準W3C盒子模型：

W3C模型中：

　　　　CSS中的寬（width）=內容（content）的寬

　　　　CSS中的高（height）=內容（content）的高

eg:

　　<div COLOR: #000000">width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　W3C模型

　　</div>

則此div的實際大小：

　　　　　　div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;

　　　　　　div寬=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;

div內容占大小：

　　　　　　div高=height=50px;

　　　　　　div寬=width=50px;

IE盒子模型：

IE模型中：

　　　　CSS中的寬（width）=內容（content）的寬+（border+padding）*2

　　　　CSS中的高（height）=內容（content）的高+（border+padding）*2

eg:

　　<div COLOR: #000000">width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　W3C模型

　　</div>

則此div的實際大小：

　　　　　　div高=height+margin*2=50+3*2=56px;

　　　　　　div寬=width+margin*2=50+3*2=62px;

div內容占大小：

　　　　　　div高=height-（border+padding）*2=50-（1+2）*2=44px;

　　　　　　div寬=width-（border+padding）*2=50-（1+2）*2=44px;

解決辦法：

在代碼頂部加如下的 doctype 聲明，

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使頁面以W3C盒子模型渲染。

eg：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>標準w3c盒子模型</title> </head> <body> </body> </html>

為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型。

當前標題：標準W3C盒子模型和IE盒子模型
文章URL：http://m.kartarina.com/news44/159994.html

成都網站建設公司_創新互聯，為您提供網站維護、品牌網站制作、網站收錄、電子商務、定制網站、域名注冊

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容