国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

盒子模型的理解

myshell / 3067人閱讀

摘要：盒子模型就是在網頁設計中經常用到的技術所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標準盒子模型從上圖可以看到標準盒子模型的范圍包括，并且部分不包含其他部分。

概述

網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。

CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。

盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同。

標準盒子模型

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：一個容器的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個容器需要占據的位置為：寬20*2+1*2+10*2+200=262px、高 20*2+1*2+10*2+50=112px，盒子的實際大小為：寬1*2+10*2+200=222px、高1*2+10*2+50=72px；假如用ie 盒子模型，那么容器需要占據的位置為：寬20*2+200=240px,高20*2+50=90px,盒子的實際大小為：寬 200px、高 50px。

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

1、提示：背景應用于由內容和內邊距、邊框組成的區域。
2、提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于多帶帶的邊。
3、提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
瀏覽器兼容性

一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

那我們開發的時候選擇哪中盒子模型呢？
肯定是“標準 w3c 盒子模型”。怎么樣才算是選擇了“標準 w3c 盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型。

CSS3 box-sizing 屬性 定義和用法

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用*標準模式*解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用*怪異模式*解析計算；
目前使用此屬性需要前綴如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器以怪異模式呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49755.html

相關文章

  • 盒子模型的理解

    摘要：盒子模型就是在網頁設計中經常用到的技術所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標準盒子模型從上圖可以看到標準盒子模型的范圍包括，并且部分不包含其他部分。 概述 網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。 這些屬性我們可以把它...

    xiangzhihong 評論0 收藏0

  • 「前端早讀君」css進階之徹底理解視覺格式化模型

    摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規則。匿名塊盒子在某些情況下進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項目。 今日勵志 不論你在什么時候開始，重要的是開始之后不要停止。 前言 對于部分前端工程師來講，有時候CSS令他們很頭疼，明明設置了某個樣式，但是布局就是不起作用。 showImg(htt...

    Eidesen 評論0 收藏0

  • 從CSS盒子模型說起

    摘要：前言總括對于盒子模型，，和外邊距合并等概念和問題的總結原文地址從盒子模型說起知乎專欄前端進擊者博主博客地址的個人博客為學之道，莫先于窮理窮理之要，必先于讀書。 前言 總括： 對于盒子模型，BFC，IFC和外邊距合并等概念和問題的總結 原文地址：從CSS盒子模型說起 知乎專欄：前端進擊者 博主博客地址：Damonare的個人博客 為學之道，莫先于窮理；窮理之要，必先于讀書。 正文 ?...

    happyhuangjinjin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<