html頁面中的元素都可以被看作乙個盒子，這個盒子包括：內邊距（padding），外邊距（margin），邊框（border），和元素的實際內容。
下圖可表示乙個盒子模型：
在css中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
注意：寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標記和 input 除外）。
例如：
div
在css屬性中，border-style屬性用於設定邊框樣式。其基本語法格式為：
border-style：上邊的（右邊的 下邊的 左邊的)
;
border-style屬性的常用屬性值有四個，分別用於定義不同的顯示樣式：
border-width屬性用於設定邊框的寬度，其基本語法格式為：
border-width
: 上邊的（右邊的 下邊的 左邊的)
;
border-color屬性用於設定邊框的顏色，其基本語法格式為：
border-color
: 上邊的（右邊的 下邊的 左邊的)
;
border
: 寬度 樣式 顏色;
【注意：中間是用空格分開，而不是用逗號】
border-radius屬性用於將矩形邊框圓角化，其基本語法格式為：
border-radius
: 引數1/引數2;
屬性說明
border-image-source
指定的路徑
border-image-slice
指定邊框影象頂部、右側、底部、左側內偏移量
border-image-width
指定邊框寬度
border-image-outset
指定邊框背景向盒子外部延伸的距離
border-image-repeat
指定背景的平鋪方式（重不重複）
邊距有內邊距（padding）和外邊距（margin）
css3中的box-shadow屬性用於設定對盒子陰影的新增，其基本語法格式為：
box-shadow
:畫素值1 畫素值2 畫素值3 畫素值4 顏色值 陰影型別;
說明畫素值1
表示元素水平陰影位置，可以為負值（必選屬性）
畫素值2
表示元素垂直陰影位置，可以為負值（必選屬性）
畫素值3
陰影模糊半徑（可選屬性）
畫素值4
陰影擴充套件半徑，不能為負值（可選屬性）
顏色值陰影顏色（可選屬性）
陰影型別
內陰影（inset）/**影（預設）（可選屬性）
box-sizing屬性用於定義盒子的寬度值和高度值是否包含元素的內邊距和邊框。它有兩個屬性值，分別為：
在css中，使用background-color屬性來設定盒子的背景顏色，其屬性值與文字顏色的取值一樣，可使用預定義的顏色值、十六進製制#rrggbb或rgb**rgb(r,g,b)。background-color的預設值為transparent，即背景透明，此時子元素會顯示其父元素的背景。
背景不僅可以設定為某種顏色，還可以將影象作為元素的背景。在css中通過background-image屬性設定背景影象。我們經常用的格式為：
background-image：url（要取的相對路徑）;rgba是css3新增的顏色模式，它是rgb顏色模式的延伸，該模式是在紅、綠、藍三原色的基礎上新增了不透明度引數。其語法格式為：
rgba（r,g,b,alpha）；在css3中，使用opacity屬性能夠使任何元素呈現出透明效果。其語法格式為：
opacity：屬性值;預設情況下，背景影象會自動沿著水平和豎直兩個方向平鋪，如果不希望影象平鋪，或者只沿著乙個方向平鋪，可以通過background-repeat屬性來控制，該屬性的取值如下：
注意：如果將背景影象的平鋪屬性background-repeat定義為no-repeat，影象將預設以元素的左上角為基準點顯示。
如果希望背景影象固定在螢幕的某一位置，不隨著滾動條移動，可以使用background-attachment屬性來設定。它有兩個屬性值，分別代表不同的含義，具體解釋如下：
在css3中，background-size屬性用於控制背景影象的大小，其基本語法格式為：
background-size
:屬性值1 屬性值2;
說明畫素值
設定背景影象的高度和寬度。第乙個值設定寬度，第二個值設定高度。如果只設定乙個值，則第二個值會預設為auto
百分比以父元素的百分比來設定背景影象的寬度和高度。第乙個值設定寬度，第二個值設定高度。如果只設定乙個值，則第二個值會預設為auto
cover
把背景影象擴充套件至足夠大，使背景影象完全覆蓋背景區域。背景影象的某些部分也許無法顯示在背景定位區域中
contain
把影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域
在預設情況下，background-position屬性總是以元素左上角為座標原點定位背景影象，運用css3中的background-origin 屬性可以改變這種定位方式，自行定義背景影象的相對位置，其基本語法格式為：
background-origin
:屬性值;
在css樣式中，background-clip屬性用於定義背景影象的裁剪區域，其基本語法格式為：
background-clip
:屬性值;
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...