| width | 寬 |
| height | 高 |
| background | 背景 |
| margin | 外邊距 |
| padding | 內(nèi)邊距 |
| border | 邊框 |
盒模型
margin 外邊距 { 盒子與盒子之間的距離
- 4個方向上的控制 { 順序:上右下左,如未設(shè)置,找對邊
margin: 10px 20px 30px 40px; // 上10,右20,下30,左40
margin: 10px 20px; // 上下10,右左20
margin: 10px 20px 30px; // 上10,右20,下30,左20
- 指定某一方向的設(shè)置:
margin-top: N px;
margin-right: N px;
margin-bottom: N px;
margin-left: N px;
- 水平方向上設(shè)置居中 { 不支持豎直方向上的居中
margin:N auto;
- 豎直方向上的重疊(融合)問題
- 在豎直方向上,兩個元素的 margin 值取其最大值,而非兩者值相加
- 對于 float 的元素,不存在 margin 融合的問題
padding 內(nèi)邊距 { 盒子內(nèi)邊框到內(nèi)容之間的距離
- 4個方向上的控制 { 順序:也是上右下左,如為設(shè)置,找對邊
padding: 10px 20px 30px 40px;
- 分別設(shè)置:
padding-top: N px;
padding-right: N px;
padding-bottom: N px;
padding-left: N px;
- 顏色
- padding 是透明的,它的顏色是盒子的背景色,即
盒子的背景色鋪到盒子的內(nèi)邊框處
border 邊框
- 寫法:
border: width寬度 style樣式 color顏色;
border: 20px solid red;
border-width: length / thin / medium / thick / 數(shù)值;
borrder-style: none / hidden / doted / dashed / solid / double / groove / ridge / inset / outset;
// 從顯示效果上看,none 和 hidden 沒有區(qū)別
border-color: 顏色單詞 / 十六進制編碼;
// 邊框顏色默認使用文本顏色)
- 分別控制:
border-top: 20px solid red;
border-right: 20px solid red;
border-bottom: 20px solid red;
border-left: 20px solid red;
討論: 一個盒子到底占多大地方?
- width 和 height 到底是誰的大小?
是指允許寫內(nèi)容的區(qū)域
也就是說,padding 往里的內(nèi)容 - 盒子本身有多大?
水平方向:左&右邊框 + 左&右內(nèi)邊距 + 內(nèi)容寬度
豎直方向:上&下邊框 + 上&下內(nèi)邊距 + 內(nèi)容高度 - 盒子占多大空間?
水平方向:左&右外邊距 + 本身
豎直方向:上&下外邊距 + 本身
2012_d1_①_005 007 008 009
