php的margin,笔记 | PHP 2012 | 盒模型 | margin 详解 | padding 详解 | border 详解

width

宽

height

高

background

背景

margin

外边距

padding

内边距

border

边框

盒模型

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

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

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

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

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

指定某一方向的设置:

margin-top: N px;

margin-right: N px;

margin-bottom: N px;

margin-left: N px;

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

margin:N auto;

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

在竖直方向上,两个元素的 margin 值取其最大值,而非两者值相加

对于 float 的元素,不存在 margin 融合的问题

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

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

padding: 10px 20px 30px 40px;

分别设置:

padding-top: N px;

padding-right: N px;

padding-bottom: N px;

padding-left: N px;

颜色

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