1.盒子模型由----網頁內容content、邊框boder、內邊距padding、外邊距margin----四部分組成
2.邊框boder：三個屬性---顏色color、粗細width、樣式style
01.color：分開設定boder-top-color上邊框顏色、boder-bottom-color下邊框顏色、boder-left-color左邊框顏色、boder-right-color右邊框顏色
同時設定，boder-color：上、右、下、左，必須按上、右、下、左
順序設定，中間用空格分開，沒有找對邊
舉例：boder-color：red blue black；上邊框顏色為紅色， 右邊框顏色為藍色，下邊框顏色為黑色，沒有設定左邊框，找它的對邊右邊框，則左邊框為藍色
02.width：分開設定boder-top-width上邊框粗細、boder-bottom-width下邊框粗細、boder-left-width左邊框粗細、boder-right-width右邊框粗細
同時設定，boder-width：上、右、下、左，必須按上、右、下、左
順序設定，中間用空格分開，沒有找對邊
03.style：樣式有：none、hidden、dotted、dashed、solid、double、groove、ridge、outset等
最常用的none無邊框、dashed虛線邊框、solid實線邊框、dotted點線邊框
總結：boder的三個屬性可以同時設定 ，三個屬性不要求有序
舉例：boder-bottom:red 5px solid,設定的是下邊框
boder：red 5px solid表示四條邊框一樣，同時設定
3.外邊距：margin，是指與其他盒子之間的距離
margin-top上外邊框、margin-bottom下外邊框、margin-left左外邊框、margin-right右外邊框
同時設定margin，上、右、下、左，必須按上、右、下、左
順序設定，中間用空格分開，沒有找對邊
4.內邊距：
padding，是控制內容與邊框之間的距離
padding-top上外邊框、padding-bottom下外邊框、padding-left左外邊框、padding-right右外邊框
同時設定padding，上、右、下、左，必須按上、右、下、左
順序設定，中間用空格分開，沒有找對邊
5.盒子模型的尺寸
內盒的總尺寸=boder+padding+內容寬/高
外盒的總尺寸=margin+boder+padding+內容寬/高
6.box-sizing拯救布局
語法：box-sizing：centent-box 、border-box、 inherit
centent-box預設值，盒子的總尺寸=boder+padding+內容寬/高
盒子模型的邊框 內邊距 外邊距 陰影
1 邊框 1 css的三大重點 盒子模型 浮動 定位 2 盒子模型 內容 邊框 外邊距 內邊距 3 網頁布局本質 拼接盒子的過程 div css 4 邊框 1 邊框屬性 邊框厚度 邊框的顏色 邊框的線條樣式 2 邊框厚度 border top width 上 3 邊框的顏色 border top c...
CSS 之盒子模型 邊框 內邊距 外邊距
使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...
盒子模型 外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...