1.什麼是盒模型
html元素中的每個元素都被描繪成矩形盒子，也就是盛裝內容的容器，
這些矩形盒子通過乙個模型來描述其**占用空間**，這個模型成為**盒模型**。
**盒模型**有外向裡分別為：
marging(外邊距)、padding(內邊距)、border(邊框)、content（內容）。
2. 盒模型—外邊距(margin)
元素與其他元素之間的距離可以使用外邊距來設定（margin）。
margin 屬性接受任何長度單位，可以是畫素、英吋、公釐、em或%。
百分數（%）是相對于父元素的 長度計算的計算的
⚠️注意：外邊距可使元素向里緊縮
簡寫語法為：
單邊外邊距屬性
屬性名稱
描述margin-top
設定上外邊距
margin-bottom
設定下外邊距
margin-left
設定左外邊距
margin-right
設定右外邊距
3. 盒模型-邊框(border）
語法：
border:border-width || border-style || border-color
屬性名稱
介紹border -width
設定邊框寬度，單位以px為主
boder-color
設定邊框顏色
border-style
設定邊框樣式––
注意：border-style邊框樣式 ，常見樣式有：
dashed（虛線）| dotted（點線）| solid（實現）
border-top
設定上邊框樣式
border-bottom
設定下邊框樣式
boder-left
設定左邊框樣式
border-right
設定右邊框樣式
4. 盒模型–內邊距（padding）
元素和邊框之間是可以設定距離的，叫內邊距（填充）。
padding 屬性接受長度值或百分比值，但不允許使用負值。
單內邊距屬性
屬性名稱
描述padding-top
設定上內邊距
padding-bottom
設定下內邊距
padding-left
設定左內邊距
padding-right
設定右內邊距
基礎 CSS盒模型
元素的外邊距 margin 邊框 border 內邊距 padding 內容 content 就構成了css盒模型。css盒模型分為ie盒模型 圖2 和w3c盒模型 圖3 其實，ie盒模型是怪異模式 quirks mode 下的盒模型，而w3c盒模型是標準模式 standards mode 下的盒模...
css基礎盒模型
盒模型組成 內容 內邊距 內填充 邊框 外邊距邊框邊 border 1px solid 000 border 粗細 樣式 顏色 設定單獨的邊框線 border top border bottom border left border right取消邊框線 border none 0 邊框粗細 bor...
CSS之盒模型
怎麼理解盒子模型？盒子模型是樣式表 css 控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法，才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是乙個盒子，佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子 頁面和頁面中的元素...