笔记 | PHP 2012 | 盒模型 | margin 详解

width	宽
height	高
background	背景
margin	外边距
padding	内边距
border	边框

盒模型

---

margin 外边距　{ 盒子与盒子之间的距离

1. 4个方向上的控制　{ 顺序:上右下左,如未设置,找对边

margin: 10px 20px 30px 40px;　// 上10,右20,下30,左40
margin: 10px 20px;　　　　　　　// 上下10,右左20
margin: 10px 20px 30px;　　　　// 上10,右20,下30,左20

2. 指定某一方向的设置:

margin-top: N px;
margin-right: N px;
margin-bottom: N px;
margin-left: N px;

3. 水平方向上设置居中　{ 不支持竖直方向上的居中

margin:N auto;

4. 竖直方向上的重叠(融合)问题

• 在竖直方向上,两个元素的 margin 值取其最大值,而非两者值相加
• 对于 float 的元素,不存在 margin 融合的问题

---

padding 内边距　{ 盒子内边框到内容之间的距离

1. 4个方向上的控制　{ 顺序:也是上右下左,如为设置,找对边

padding: 10px 20px 30px 40px;     

2. 分别设置:

padding-top: N px;
padding-right: N px;
padding-bottom: N px;
padding-left: N px;

3. 颜色

• padding 是透明的,它的颜色是盒子的背景色,即
  盒子的背景色铺到盒子的内边框处

---

border 边框

• 写法:
  border: width宽度 style样式 color颜色;

border: 20px solid red;

border-width: length / thin / medium / thick / 数值;
borrder-style: none / hidden / doted / dashed / solid / double / groove / ridge / inset / outset;
// 从显示效果上看,none 和 hidden 没有区别
border-color: 颜色单词 / 十六进制编码;
// 边框颜色默认使用文本颜色)

• 分别控制:

border-top: 20px solid red;  
border-right: 20px solid red;  
border-bottom: 20px solid red;  
border-left: 20px solid red;   

---

讨论: 一个盒子到底占多大地方?

• width 和 height 到底是谁的大小?
  是指允许写内容的区域
也就是说,padding 往里的内容
• 盒子本身有多大?
  水平方向: 左&右边框 + 左&右内边距 + 内容宽度
竖直方向: 上&下边框 + 上&下内边距 + 内容高度
• 盒子占多大空间?
  水平方向: 左&右外边距 + 本身
竖直方向: 上&下外边距 + 本身

---

2012_d1_①_005 007 008 009