免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

標準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.newbst.com/news44/159994.html

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

廣告

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

綿陽服務器托管