關於css
的一些基礎知識我們在前面文章中已經有所了解，這篇文章我們主要來學習下
css中的核心知識盒子模型的知識。
元素框的最內部分是實際的內容（
element
），直接包圍內容的是內邊距（
padding
），內邊距呈現了元素的背景，內邊距的邊緣是邊框（
border
），外邊距（
margin
)預設是透明的，因此不會遮擋其後的任何元素，對於這個圖邊框外的部分就是
margin
，邊框內內容外地部分就是
padding。
在css
中我們一般習慣性的將外邊距和內邊距設定為0，即
*css中，
width
和height
是element
區域的寬度和高度，對
padding
、border
、margin
增加尺寸不會影響
element
的寬度和高度，只會增加整個框的尺寸。
下面我們看個例子：假設框的每個邊上有 10個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素
#boxelement
、padding
、border
、margin
的尺寸就更加的一目了然了，這裡需要注意下的是，
padding
、border
、margin
即可以應用於乙個元素的所有邊，也可以應用於單獨的邊，還有一點就是，
margin
可以是負值。
元素的內邊距是再邊框和內容區之間，
padding
屬性設定用長度值或者百分比值，但不允許用負值。關於用百分比的話，有一點需要注意是，即上下內邊距的百分數會相對于父元素寬度設定，而不是相對於高度。 對於
padding
的設定，可以設定它的上下左右這四個邊距。
h1h1h1border
)是圍繞元素內容和內邊距的一條或多條線，可以規定元素邊框的樣式、寬度和顏色，這樣可以建立出效果更佳出色的邊框。
樣式是邊框的最重要的乙個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
border
可以先設定樣式，設定樣式的順序為op-right-bottom-left，設定樣式的屬性為
border-style；
如果想設定單邊樣式則為：
border-top-style
border-right-style
border-bottom-style
border-left-style
邊框寬度屬性設定用
border-width
設定；
如果想單獨設定各邊的寬度則用：
border-top-width
border-right-width
border-bottom-width
border-left-width
對於同乙個邊框寬度我們可是用三種方式來設定如下，效果是一樣的。
pppborder-color;
如果設定個邊寬度則用：
border-top-color
border-right-color
border-bottom-color
border-left-color
margin
圍繞在元素邊框外地空白區域就是
margin
，設定margin
會在元素外建立額外的「空白」，
margin
屬性接收任何長度單位、百分數值甚至負值。
在這裡先講解乙個值複製的規則，就是如果缺少左外邊距的值，則使用右外邊距的值；如果缺少下外邊距的值，則使用上外邊距的值；如果缺少右外邊距的值，則使用上外邊距的值。
換句話說，如果為外邊距指定了 3個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）複製得到。如果給定了兩個值，第 4 個值會從第 2 個值複製得到，第 3 個值（下外邊距）會從第1 個值（上外邊距）複製得到。最後乙個情況，如果只給定乙個值，那麼其他 3 個外邊距都由這個值（上外邊距）複製得到。
如果我們想設定單邊外邊距屬性，可以用下面的屬性
margin-top
margin-right
margin-bottom
margin-left
下面這兩種方式效果是一致地
h2pcss盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...