所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素
不同部分的說明：
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文字和影象。
當指定乙個css元素的寬度和高度屬性時，預設設定的是內容區域的寬度和高度。要知道，完全大小的元素，還必須新增填充，邊框和邊距。
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
border-style
邊框樣式
none: 預設無邊框
dotted: 定義乙個點線邊框
dashed: 定義乙個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3d溝槽邊框。效果取決於邊框的顏色值
ridge: 定義3d脊邊框。效果取決於邊框的顏色值
inset:定義乙個3d的嵌入邊框。效果取決於邊框的顏色值
outset: 定義乙個3d突出邊框。 效果取決於邊框的顏色值
border-color
邊框顏色
border-width
邊框寬度
也可以單獨設定某一邊的屬性
border-style：屬性1，屬性2，屬性3，屬性4
上->右->下->左
border-style：屬性1，屬性2，屬性3
上->左右->下
border-style：屬性1，屬性2
上下->左右
border-style：屬性1
上下左右屬性相同
p
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度。
outline的屬性和border相同，outline是不佔空間的，既不會增加額外的width或者height
margin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。
margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
可能的值
auto 設定瀏覽器邊距。
length 定義乙個固定的margin（使用畫素，pt，em等）
% 定義乙個使用百分比的邊距
margin屬性可以有一到四個值。
margin:25px 50px 75px 100px;
上邊距為25px，右邊距為50px，下邊距為75px，左邊距為100px
margin:25px 50px 75px;
上邊距為25px，左右邊距為50px，下邊距為75px
margin:25px 50px;
上下邊距為25px，左右邊距為50px
margin:25px;
所有的4個邊距都是25px
margin-top
:100px;
margin-bottom
:100px;
margin-right
:50px;
margin-left
:50px;
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性可以改變上下左右的填充。
可能的值
length 定義乙個固定的填充(畫素, pt, em,等)
% 使用百分比值定義乙個填充
使用方式和margin相似
padding-top
:25px;
padding-bottom
:25px;
padding-right
:50px;
padding-left
:50px;
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盒...