描述格式寬
width
邊框border
圓角border-radius
高height
內邊距padding
外邊距margin
為了更夠直觀的觀察到盒子模型的屬性值，我們畫出了一下圖來描述這些屬性蘇喲表達的意思。更加直觀的知道margin是外邊距，而padding是描述內邊距的也是，content是文字內容。height和width就更不用說了一眼望去就是指的高和寬。這樣也幫助了我們的記憶。
我們所了解的這些屬性我主要會介紹以下三個的用法
略寫使用
恢復原形
margin：1px
margin：1px 1px 1px 1px
margin：1px 2px
margin：1px 2px 1px 2px
margin：1px 2px 3px
margin：1px 2px 3px 2px
不知道有沒有同學可以找到其中的規律，沒錯就是按照一定方向進行了縮寫和略寫，那到底是什麼方向呢，可能大部分同學已經看出來了，是按照以上為起點，順時針旋轉上—右—下—左，對應省略。
那可能就有些同學給就要問那如果上下邊界都是1px，我能不能對應縮寫呢？
形如：margin：1px 2px 1px 3px 上，下邊界雖然都是1px，但是不能縮寫，想一想，要是我們在下方縮寫了，那還能確定補位的是下方的還是左方的等呢。
水平居中小技巧：
margin-left：auto；margin-right:auto
margin：0 auto；
格式表述
border-width
px（畫素） 、thick（粗）、medium（中）、thin（細）
border-style
dashed（虛線）、dotted（虛點）、solid（實線）、double（雙實線）
border-color
顏色（rbga）
border
width style color
舉例：
這兩種使用方法都可以的。
示例：
為了能夠更加直觀的看到這些變化，所以我設定的比較誇張。
思考一下，圓要怎麼設定呢？
對，把我們border—radius 裡的畫素設定，應該是我們盒子的兩倍，就可以設定成我們想要的圓框。
示例：
陰影位置
格式外部陰影
outset
內部陰影
inset
使用方法：box-shadow：（inset）水平偏移 垂直偏移 模糊距離 顏色：
示例：
今天的盒子模型就介紹到這裡了，有興趣的朋友可以去實施。
css盒子模型之定位
html元素的預設值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到top,bottom,left,right影響。元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動 fixed定位使元素的位置與文件流無關，因此不佔據空間。fixed定位的元素和其他元素重疊。相對定位元素的...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...