php学习之div+css盒子模型（二）

说明：

在html中的每个元素都是一个以盒子的形状来存在的，盒子模型

盒子特点：由“内容或元素”+内填充+边框+外边距

属性：

border属性：

• border-top：    上边框              属性值：  border-top：粗细 样式 颜色  比如：border-top:1px dashed red;
• border-right：  右边框              属性值： border-right:粗细 样式 颜色  比如：border-right:1px dashed red;
• border-bottom：  下边框          属性值：粗细 样式 颜色  比如：border-bottom:1px dashed red;
• border-left：       左边框            属性值：粗细 样式 颜色  比如：border-left:1px dashed red;
• border：          简写四边           属性值：粗细 样式 颜色  比如：border：粗细 样式 颜色

案例：

padding属性：

• padding-top：上内填充            属性值：数值   如：padding-top：10px；
• padding-right：右内填充          属性值：数值   如：padding-right：10px；
• padding-bottom：下内填充       属性值：数值   如：padding-bottom：10px；
• padding-left：左内填充               属性值：数值   如：padding-left：10px；
• padding：简写形式                  属性值：数值          有四种形式：1.padding：10px；四边相等   2.padding：10px 10px；第一个10代表上下内填充，第二个10代表左右内填充        3.padding：10px 20px 30px；第一个代表上内填充，第二个代表左右，第三个代表下        4.padding：10px 20px 10px 20px 表示上右下左顺序

案例：注意padding是占背景的

margin属性：

• margin-top： 上外边距        属性值：数值      如：margin-top：10px；
• margin-right：  右外边距          属性值：数值      如：margin-right：10px；
• margin-bottom：下外边距       属性值：数值      如：margin-bottom：10px；
• margin-left：左外边距         属性值：数值      如：margin-left：10px；
• margin  ：        简写形式            属性值：数值      如：同上padding属性一样

案例：