css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。

    元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

盒子示意图示：

 

 

l border

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式（border-style）、宽度(border-width)和颜色(border-color)。

.border{

border-width:2px;

border-style:solid;

border-color:#30F;

}

 

上面三行可以简写为一行：

border:2px solid #03F;

Border的样式有如下值：

值	描述	实例
none	无边框
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	点状边框。在大多数浏览器中呈现为实线。
dashed	虚线。在大多数浏览器中呈现为实线。
solid	实线
double	双线。双线的宽度等于 border-width 的值。
groove	3D 凹槽边框。其效果取决于 border-color 的值。
ridge	3D 垄状边框。其效果取决于 border-color 的值。
inset	3D inset 边框。其效果取决于 border-color 的值。
outset	3D outset 边框。其效果取决于 border-color 的值。

 

单边框：

boder-top/boder-right/boder-bottom/boder-left

去掉某一边框：

boder-right:none;

 

l padding

padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

语法1：

padding:上 右 下 左

如：

padding:10px 20px 30px 40px;

相当于：

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:40px;

语法2：

padding:上下px  左右px

如：padding:20px 40px;

 

语法3：

Padding:10px

四边统一边距10px

 

l margin

    设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

语法：

margin:上 右 下 左

margin:上下 左右

margin:四边

 

l 外边距合并

    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

.merge1{

width:100px;

height:100px;

background:#F3F;

margin-bottom:20px;

}

.merge2{

width:100px;

height:100px;

background:#0CF;

margin-top:30px;

}

<div class="merge1"></div>

<div class="merge2"></div>

第一个div下边距20px，第二个div上边距30px，合并后为30px。