CSS盒子（Box）模型入門

論您是CSS的新手還是經驗豐富的老手，了解和理解box模型都很重要。讓我們更好地了解它。

每個初學者都應該從基礎開始。以CSS為例，基礎是學習Box模型。在繼續學習其他CSS概念之前，您應該首先掌握它!

盒子（Box）模型是CSS的基本元素。

它確實會讓初學者感到困惑，所以現在是時候糾正錯誤了。在這里，您將了解box模型的所有基本元素以及它們是如何使用的。

在深入研究之前，每個人都需要了解web設計中的每個元素都是一個矩形框。您可能已經聽過很多次了，但是這是每個開發人員都應該注意的一個重要概念。

現在，讓我們來解釋一下神秘的盒子模型!

盒子模型結構

如上所述，box模型的結構包括：

Content (height and width).

Padding.

Border.

Margin.

這些是瀏覽器呈現框模型所需的所有元素。值得慶幸的是，有了CSS，我們可以單獨地控制它們。讓我們來看看。

在本文中，我們將使用以下代碼并逐漸添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

.box {
 background-color: hotpink;
 color: #fff;
}

The Content

Content非常清晰。它是具有特定寬度和高度的元素的內容。可以使用CSS屬性的高度和寬度設置固定的高度和寬度，也可以由內容本身決定。

現在，有一件事讓人有點困惑，那就是使用內聯或塊級元素。

使用內聯和塊級元素（Using Inline and Block Level Elements

）

為了刷新您的內存，內聯元素和塊元素之間的區別在于塊元素占用了容器寬度的100%，而內聯元素只占用了內容需要的空間量。

在使用內聯元素時，不可能為該元素設置固定的寬度或高度，因為元素沒有預先確定的寬度和高度(因為寬度和高度由內容決定)。這可以通過將元素轉換為塊元素來克服。

與內聯元素不同，使用塊級元素時，可以輕松地為其設置固定的寬度或高度。由于在默認情況下，塊級元素占容器寬度的100%，我們可以通過設置一個固定的寬度輕松覆蓋它。

您還可以將元素轉換為inline-block。當使用inline-block時，元素具有內聯元素的行為(只占用內容的空間)，但是您可以像使用塊元素那樣操作它。

現在，當我們有一個塊級元素時，我們可以給它一個寬度和高度。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
}

結果如下圖：

The Padding

接下來，我們將在我們的框中添加一些填充。

padding定義了內容和框的邊緣之間的空間。

讓我們看看它在我們的例子中的作用

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
}

結果如圖:

在圖像中，我們看到padding如何影響框的整體外觀。框的內容和四邊都有10px的空間。我們也可以向四面八方單獨添加padding,使用padding-top padding-bottom,padding-left padding-right。

The Border

因為我們是從內到外，下一步就是定義border。border圍繞著內容，您不必使用它，但它仍然存在。這意味著border的寬度為0。

現在我們添加一個邊框。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
}

The Margin

框模型的最后一個方面是margin。正如你們所知道的，margin是border外的空間。它是元素之間的空間。

在實際示例中演示這一點的最佳方式是向您展示兩個元素是如何放置的，以及如何使用和不使用margin邊距。

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
 margin: 0
}

在這個例子中，我們看到，沒有邊距，兩個元素是如何結合在一起的，它們之間沒有空間。

現在，添加margin

CSS

.box {
 margin: 20px;
}

現在,這看起來更好。我們在Box之間增加了一些空間。我們還可以使用margin - top、margin - bottom、margin - left或margin - right來單獨添加元素的每一側上的空間。

總結

恭喜，你終于完成了這篇文章!那么，我們學到了什么?

網頁上的每個元素基本上都是一個框。

box模型的方面是content, padding, border, and margin.。

使用內聯元素時，不能為該元素設置固定的寬度或高度，而使用塊和內聯塊元素則可以。

希望這能幫助你學到一些新的東西或者刷新你的記憶。

SS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果。我們來實戰詳解一下這個屬性。

1. box-shadow屬性的瀏覽器兼容性

先來看一個這個屬性的瀏覽器兼容性：

Opera:：不知道是從哪個版本開始支持的。
Firefox：通過私有屬性-moz-box-shadow支持。
Safari和Chrome：通過私有屬性-webkit-box-shadow支持。
所有IE不支持(不知道IE9是否有所改善)。別急，我們將在文章最后會介紹一些針對IE的Hack。

2. box-shadow屬性的語法

box-shadow有六個可設的值：

img{box-shadow:陰影類型 X軸位移 Y軸位移陰影大小陰影擴展陰影顏色 }

當不設陰影類型時，默認為投影效果。當設為inset時，為內陰影效果。
X軸和Y軸位移不等同但類似于Photoshop里面的”角度”和”位置。
陰影大小、擴展、顏色和Photoshop里面的都同理。

3. 實例解析

讓我們通過幾個實例來看一個box-shadow的效果，先弄個簡單的HTML供測試：

<html>
<head>
<style type="text/css">CSS部份寫在這里</style>
</head>
<body>
<img  src="test.jpg" />
</body>
</html>

請注意：為了省事兒，下面的CSS代碼中只寫了box-shadow，在實際使用中，你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡單，復制兩個box-shadow，在它們前面分別加上-moz-和-webkit-。

img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}

(1). 投影，沒有位移，10px的陰影大小，沒有擴展，顏色#06C

img{box-shadow:0 0 10px #06C;}

這里的顏色值是HEX值，我們還可以使用RGBA值，RGBA值的好處是，它多了一個Alpha透明值，你可以控制陰影的透明度。

img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}

(2). 在上面的基礎上加上20px的擴展

img{box-shadow:0 0 10px 20px #06C;}

(3). 內陰影，無位移，10px大小，沒有擴展，顏色#06C

img{box-shadow:inset 0 0 10px #06C;}

(4). 多重陰影效果

box-shadow可以同時使用多次，我們來個四色的陰影。

img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue, box-shadow:0 -10px 10px yellow, box-shadow:0 10px 10px green}

(5). 使用多個陰影屬性的順序問題

當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層。比如下面這段代碼，我們先寫一個10px的綠色陰影，再寫一個10px大小但擴展20px的陰影。結果是：綠色陰影層在黃色陰影層之上。

img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}

但如果我們把順序調一下，像這樣:

img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}

我們將看不到后寫的綠色陰影層，因為它先寫且被半徑比較大的黃色層覆蓋掉了。

4. 讓IE也支持box-shadow

IE本身是shadow濾鏡可以實現類似效果的，還有一些js和.htc的hack文件可以幫助你在IE中實現這一效果。我也無法一一都去嘗試，這里只介紹我用過的一個。

ie-css3.htc是一個可以讓IE瀏覽器支持部份CSS3屬性的htc文件，不只是box-shadow，它還可以讓你的IE瀏覽器支持圓角屬性border-radius和文字陰影屬性text-shadow。

它的使用方法是：下載它并放到你的服務器目錄

在你的<head></head>里面寫入下面的代碼：

<!--[if IE]>
<style type="text/css">
img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

藍色部份輸入要使用box-shadow屬性的選擇器，綠色部份輸入ie-css3.htc的絕對路徑，或相對路徑，反正要保證能訪問得到。

然后這樣就OK了。但還是有幾點需要注意的是：

當你使用了這個htc文件后，你的CSS里面，只要寫有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一種，IE就會渲染。
當使用了這個htc文件后，你不能這樣寫box-shadow: 0 0 10px red; 而應該是box-shadow: 0px 0px 10px red; 否則IE中會失效。
不支持RGBA值中的alpha透明度。
不支持inset內陰影。
不支持陰影擴展。
陰影在IE中只會顯示為黑色，不管你設置成其它什么顏色。

所以說，這個腳本僅僅是讓IE支持了部份的box-shadow值。

html頁面中，所有可見的html標簽元素都是由margin、padding、border 和內容組成的，專業術語稱盒子模型或框模型，后面統稱為盒子模型。

如下圖示例：

盒子模型

按F12鍵打開開發者工具，使用選擇元素工具（箭頭圖標），隨便選擇一個html元素，在下方styles 面板上就會看到上圖的盒模型。

在了解盒子模型前，讓我們先學習邊距、填充、和邊框。

當html元素沒有任何內容或寬高為0時，設置邊距、邊框、填充就沒有任何意義了，所以這些都是建立在有內容的元素基礎上的。

邊距、填充、和邊框

因為每一個html元素都是一個盒子，它有上下左右四個面，所以邊距、填充、邊框屬性需要設置四個方向的值，可以簡寫也可以分開使用，語法如下：

簡寫語法：

margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000

效果如下：

margin和padding在簡寫時是按照上、右、下、左的順時針方向設置值的，這4個值不是必須都要設置的，你可以設置一個、2個、3個，但至少要一個值。

如果設置一個值時，其它方向都使用相同的值，如：

margin:10px;
padding:10px;

效果如下：

如果設置2個值時,如：

margin:10px 15px;
padding:10px 15px;

效果如下：

如上可以看到，下、左邊距都是10px，下、左填充都是15px，缺省的方向會以使用反方向的值，同理當設置3個屬性值時一樣，缺省的那個會默認使用反方向的值。

拆分寫法：

/*邊距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*邊框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

分開寫法和簡寫的效果是一樣的，這里注意邊距、填充只有一個屬性值，而邊框有三個屬性值：邊框大小、邊框樣式、邊框顏色，所以邊框更加復雜點，邊框還可以按照不同屬性單獨設置。

1、css 邊距 —— margin

邊距（margin）是指從邊框邊界向外的距離，為元素周圍創建空間，它是透明的，如下箭頭所示。

邊距的重疊現象，當相鄰的html元素都有邊距時，會出現邊距重疊而不是相加的效果，如下示例：

可以看到，盒子1的下邊距和盒子2的上邊距重疊了，它們的上下間距是10px，而不是20px。如果盒子1和盒子2的邊距值不一樣時也會重疊，只不過它們的間距會以其中最大的那個值顯示，如下：

2個盒子上下間距實際以盒子2的邊距顯示，因為盒子2邊距大于盒子1的邊距。

2、css 填充 —— padding

填充就是從邊框邊界向內到元素內容邊界的距離，如下綠色區域箭頭示例：

3、css 邊框 —— border

邊框border，不同于margin、padding，它是可見的默認是有顏色的，如下示例：

盒子1邊框寬度1px，盒子2邊框寬度10px，都是紅色邊框，其盒模型圖如下：

當border為0時，不顯示邊框。

之前介紹了邊框的簡寫方法，是按照方向分別設置邊框寬度、樣式、顏色：

border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

因為邊框有三個屬性值：寬度、樣式、顏色，所以還可以按照不同屬性值設置，如下：

border-color:red;
border-style:solid;
border-width:10px;

當按照屬性值的維度設置的時候，同樣可以繼續按照方向拆分設置，如下：

設置邊框寬度：

四個方向都是一樣的邊框寬度：

border-width:10px;

分別設置每個方向的寬度：

border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;

如下顯示效果：

設置邊框樣式

樣式分別有 dotted（虛線）、solid（實線）、double（雙線）、dashed（虛線）4個樣式，如下：

四個方向都是一樣的邊框樣式：

border-style: solid;

分別設置每個方向邊框樣式：

border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;

如下效果：

當邊框寬度為0時，設置邊框樣式或顏色是無效的。

設置邊框顏色

四個方向都是一樣的顏色：

border-color: red;

分別設置每個方向的顏色：

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;

顯示效果：

當邊框寬度為0時，設置邊框樣式或顏色是無效的。

盒子的實際大小

一個html元素在頁面中顯示的實際寬高并一定等于它的width和height屬性設置的值。

標準盒模型

標準盒模型的width/height 不包含padding和border

如下圖：

盒子1的實際顯示尺寸等于height + border + padding之和，如圖中盒子1占據的空間：高度126 = 100 + 20 + 6，寬度 136 = 100 + 30 + 6。

非標準盒模型

比如在之前Ie瀏覽器中，width/height 包含了padding和border。

這里使用box-sizing: border-box模擬非標準盒模型。

如下圖：

可以看到，padding 和 border 被包含到寬度和高度里了。

如果想要改變盒子的計算方式可以使用 CSS Box Sizing 。

當box-sizing: border-box，是非標準盒模型。

當box-sizing: content-box（瀏覽器默認），為標準盒模型。

總結

1、盒子模型的概念，由邊距、邊框、填充和元素內容組成。

2、邊距、填充和邊框的語法使用，簡寫、拆分使用、按方向或屬性值維度單獨使用。

3、html元素實際顯示寬度和高度計算方法。

4、標準盒模型和非標準盒模型的區別。

總而言之，css盒子模型是學習css的基礎知識，后面一切都是建立在盒子模型之上的，所以要完全理解它，感謝關注，祝學習愉快。

上一篇：前端入門——css 選擇器

在線咨詢

上一篇：js圖片數據轉換操作
下一篇：H5 手機 App 開發入門：技術篇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS盒子（Box）模型入門

1. box-shadow屬性的瀏覽器兼容性

2. box-shadow屬性的語法

3. 實例解析

4. 讓IE也支持box-shadow

邊距、填充、和邊框

盒子的實際大小

總結

您的項目需求