1、盒子模型（box model）
所有的html元素可以看做盒子，在css中，「box model」這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充和實際內容。
盒模型允許我們在其他元素和周圍元素邊框之間的空間放置元素。
如下圖：
不同部分說明：
margin（外邊距）- 清除邊框外的區域，外邊距是透明的。
border（邊框）- 圍繞在內邊距和內容外的邊框。
padding（內邊框）- 清除內容周圍的區域，內邊距是透明的。
content（內容）- 盒子的內容，顯示文字和影象。
border-style：
solid 實線
dotted 點線
dashed 虛線
double 雙實線
border-width：邊框大小
border-color：邊框顏色
（2）十六進製制：1234567890abcdef
（3）rgb:
r:red 紅色
g:green 綠色
b:blue 藍色
取值情況：0-255
（4）rgba:
rgba:alpha 透明度
取值在 0-1
0 是完全透明
1 是完全不透明
4、外邊距
margin：外邊距（盒子以外的距離）
margin-top:25px; /* 上外邊距 */
margin-right:0px; /* 右外邊距 */
margin-bottom:75px; /* 下外邊距 */
margin-left:100px; /* 左外邊距 */
margin:100px 75px 50px 25px; /* 上 右 下 左 */
margin:100px 75px 50px; /* 上 左右 下 */
margin:100px 50px; /* 上下 左右 */
padding屬性寫法與margin寫法一樣！
6、盒子居中
盒子的組成部分：width + height + padding + border
盒子的總寬度：width(盒子本身的寬度) + padding-left + padding-right + border-left + border-right
盒子的總高度：height(盒子本身的高度) + padding-top + padding-bottom + border-top + border-bottom
怪異盒子模型（border-box）：
規定的寬度與高度是總寬度與總高度
content：指盒子的寬度與高度（待求）
width（總）= 300
300 = width(content待求) + padding-left + padding-right + border-left + border-right
如下例子所示：
按照標準來測盒子的總寬度為：420 content=300
而怪異盒模型測出盒子的總寬度為：300 content=300 - 100 - 20 = 180
HTML css盒子模型
盒子模型 盒子屬性 1.border style邊框模式 border top style上部 border bottom style下部 border left style左 border right style右 2.border width邊框畫素 border top width上部 bor...
HTML CSS盒子模型
本篇文章 本文講述了css盒子模型的一些基本關鍵字。lang en charset utf 8 盒子模型title p,div pdiv style head 熱愛生命 我不去想是否能夠成功 既然選擇了遠方 便只顧風雨兼程 我不去想能否贏得愛情 既然鍾情於玫瑰 就勇敢地吐露真誠 我不去想身後會不會襲...
html CSS的盒子模型
css的盒子模型1 邊框 border 上 border top 下 border bottom 左 border left 右 border right 內補丁 paddings 內邊距 上 padding top 下 padding bottom 左 padding left 右 padding...