border:邊框
margin:外邊距
padding:內邊距
盒子大小計算方式：
margin+border+padding+內容寬度
border有三部分組成：
粗細（單位px）
樣式（分為dashed-虛線 solid-實線）
顏色例：
border
:2px solid red
組合使用時：
順時針計算，外邊距舉例：
1. margin:1px 2px 3px 4px
（上邊距(top)1px 右邊距(right)為2px 下邊距(left)3px 左邊距(bottom)4px）
2.margin:1px 2px 3px
上邊距1px 左右2px 下3px
3.margin：0(上下為0) auto(左右對齊)
4.margin:0(表示所有邊距為0)**
固定的寬度
最保守的方法：
margin:0 auto與text-align:center配合使用
border-radius圓角邊框
四個角，從左上角開始順時計算
圓圈：圓角等於半徑；
盒子陰影box-shadow
box-shadow與背景影象陰影一致
效果圖
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS基礎 盒子模型
width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度，當內容超出寬度和高度之後，不會自動填充擴...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...