css框模型

本文转载于:猿2048网站css框模型

css框模型

（一）内边距

padding 内边距
即边框和内容之间的空白区域
h1 {padding: 10px 0.25em 2ex 20%;}
四个值这种则分别是按照上，右，下，左的顺序设置内边距

单边内边距属性
padding-top
padding-right
padding-bottom
padding-left

（二）边框

每一个边框有3个方面：宽度，样式，颜色
边框的样式：
border-style的值
none 无边框
hidden 无边框
dotted 点状边框
dashed 虚线
solid 实线
double 双线

定义单边样式：
border-top-style
border-right-style
border-bottom-style
border-left-style

边框宽度
border-width
两种方法：指定长度值或者使用关键字(thin medium thick)

定义单边宽度
p {border-style: solid; border-width: 15px 5px 15px 5px;}
分别从上右下左来设置各边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width

边框的颜色
border-color，一次性能够接受最多4个颜色值

定义单边颜色
border-top-color
border-right-color
border-bottom-color
border-left-color

透明边框
border-color: transparent;

（三）外边距 margin

外边距指定少于 4 个值时，规则以下：
若是缺乏左外边距的值，则使用右外边距的值。
若是缺乏下外边距的值，则使用上外边距的值。
若是缺乏右外边距的值，则使用上外边距的值。

单边外边距属性
margin-top
margin-right
margin-bottom
margin-left

(四）外边距合并

当两个垂直外边距相遇时，他们会合并成一个外边距，取二者中的最大者1）一个元素出如今另外一个元素之上2）一个元素包含在另外一个元素之中3）空元素上下外边距合并