目錄
一、盒子在網頁中的呈現
二、各個部分的介紹
1.border邊框
（1）語法：
（2）**的細線邊框：
（3）盒子邊框總結：
2.內邊距 padding
3.外邊距 margin
（1）總結
（2）外邊距實現盒子居中
（3）清除元素的預設邊距：全域性選擇器
（4）外邊距合併
盒模型的寬度=width+padding+border=margin
盒模型的寬度=width+padding-left+padding-right+border-right+border-left+margin-left+margin-right
內padding外margin
寬度padding
內邊距有效內容和邊框的距離
padding-left padding-right
border
4個邊框
border-left border-right
margin
外邊距兩個盒子的距離 調整盒子的距離
margin-left margin-right
border:border-width||border-style||border-colorborder-style:邊框樣式
none
沒有邊框，即忽略所有邊框的寬度（預設值）
solid
邊框為單實線（最常用）
dashed
邊框為虛線
dotted
邊框為點線
double
邊框為雙實線
border-color:邊框顏色
border-collpase:collpase
/*表示邊框合併再一起*/
樣式屬性
邊框寬度 border-width
邊框樣式 border-style
邊框顏色 border-color
上邊框border-top-width
border-top-style
border-top-color
下邊框border-bottom-width
border-bottom-style
border-bottom-color
左邊框border-left-width
border-left-style
border-left-color
右邊框border-right-width
border-right-style
border-right-color
設定了盒子的內邊距之後，在瀏覽器中顯示的盒子會增大，此時必須減小width
padding-top
上邊距padding-bottom
下邊距padding-left
左邊距padding-right
右邊距注意：padding後面跟幾個數值的意思是不一樣的
值的個數
表達意思
1個值padding:3px 上下左右都是3px
2個值padding:3px 5px 上下3px 左右5px
3個值padding:3px 5px 10px 上3px 左右5px 下10px
4個值padding:3px 5px 10px 15px 上3px 右5px 下10px 左15px(順時針)
margin-top
上外邊距
margin-bottom
下外邊距
margin-left
左外邊距
margin-right
右外邊距
margin
上下左右邊距
值的個數
表達意思
1個值margin:3px 上下左右都是3px
2個值margin:3px 5px 上下3px 左右5px
3個值margin:3px 5px 10px 上3px 左右5px 下10px
4個值margin:3px 5px 10px 15px 上3px 右5px 下10px 左15px(順時針)
可以讓乙個盒子實現水平居中，需要滿足以下兩個條件：
1.必須是塊級元素
2.盒子必須制定寬度 width
.box*盡量避免
巢狀塊元素垂直外邊距的合併
1.父元素定義上邊框或上內邊距
2.為父元素新增 overflow:hidden
有關：巢狀塊元素垂直外邊距的合併，詳情請看三個盒子的巢狀，下面為你指路：
頁面布局 盒模型
css框模型 譯者注 也被稱為 盒模型 是網頁布局的基礎 每個元素被表示為乙個矩形的方框，框的內容 內邊距 邊界和外邊距像洋蔥的膜那樣，一層包著一層構建起來。瀏覽器渲染網頁布局時，它會算出每個框的內容要用什麼樣式，周圍的洋蔥層有多大，以及框相對於其它框放在 文件的每個元素被構造成文件布局內的乙個矩形...
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
盒模型與浮動布局
盒子由幾部分組成 物品 填充物 外包裝 外邊距 content padding border margin margin 後面接多個值 上 右 下 左 margin 50px 30px 40px 20px 上 左右 下 margin 50px 30px 40px 上下 左右 margin 50px ...