圖文講解CSS的Box Model盒模型中的邊距
簡書 發(fā)布時間：2016-06-21 11:50:28 作者：牧歌_ 
我要評論
我要評論盒模型在Web頁面布局中很重要,而對邊距的把控是掌握盒模型的關(guān)鍵,下面我們就來以圖文講解CSS的Box Model盒模型中的邊距
盒模型由以下CSS屬性組成：
0.內(nèi)容（content）1.padding 內(nèi)邊距
2.border 邊框
3.margin 外邊距
下面有一個最常見的例子，虛線不屬于盒模型，用于標(biāo)識范圍。
CSS Code復(fù)制內(nèi)容到剪貼板
- <div class="box"></div>
- <style type="text/css">
- .box {
- width: 200px;
- height: 200px;
- background-color: green;
- padding: 20px;
- border: 5px solid red;
- margin: 50px;
- }
- </style>
顯式效果：
你可以使用Chrome（Ctrl + Shift + j）或者Firefox的firebug等開發(fā)者工具查看盒模型：
我做了些簡單的標(biāo)記，黑色方框?qū)嵕€和最外邊的虛線一樣，都是為了標(biāo)識，而不是設(shè)置的樣式：
我們可以看到，div的內(nèi)容寬高度均為200px，對一個block或者inline-box元素設(shè)置內(nèi)邊距padding，內(nèi)邊距會影響一些CSS元素，比如說背景也會顯式在padding上。
紅色的為border，而border元素并不會算進(jìn)元素內(nèi)容，也就是說沒辦法獲得背景等。
margin元素一般是看不見的，也無法對其設(shè)置顏色等，margin常用來與其他元素分割一些距離。
通過DOM改變border的大小，或者顯式border，會改變元素的大小，可能會打亂布局，CSS中還有一個屬性outline，這個屬性和border相類似，也是可以作為邊框使用，但是和border不同的是，它是繪制在內(nèi)容上的，并不會改變盒子大小。IE7和更低版本不支持outline。
外邊據(jù)疊加
盒子模型還有一個特殊的東西，就是相鄰的外邊據(jù)相遇會進(jìn)行疊加，取最大的為最終外邊據(jù)。
相關(guān)文章
解析CSS的box model盒模型及其內(nèi)的子元素布局控制
盒模型是CSS控制布局的主要方式之一,尤其是內(nèi)部的元素排列控制,這里我們將來解析CSS的box model盒模型及其內(nèi)的子元素布局控制,需要的朋友可以參考下2016-07-01- 下面小編就為大家?guī)硪黄狢SS3彈性盒模型flex box快速入門心得(必看篇)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 下面小編就為大家?guī)硪黄狢SS彈性盒模型flex在布局中的應(yīng)用詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 這篇文章主要介紹了幾個CSS3的flex彈性盒模型布局的簡單例子演示,flex布局是迄今為止最強(qiáng)大的web布局方式,需要的朋友可以參考下2016-05-12
- 下面小編就為大家?guī)硪黄狢SS使用盒模型實(shí)例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-20