css样式 向下补白,div+css[3]：css中边框border与补白padding属性设置

1.边框属性 border

□

边框样式

border-style:none|dotted|dashed|solid|......

none:没有边框.

dotted点线 dashed虚线 solid实线.....等等

边框样式也可以像padding一样,用4个值分别定义上下右左4个边框样式.

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

以上可以简写成为:(顺序为钟面原则:上右下左)

border-style:dotted solid dotted

solid;

若上下值相同\左右值相同,则又可以简化成为

border-style:dotted solid;

□ 边框宽度

border-width:medium|thin|thick|长度值

medium:

默认值 thin:比默认值细 thick:比默认值粗 长度值:

边框宽度也可以像padding一样,用4个值分别定义上下右左4个边框宽度,各不相同.

border-top-width:10px;

border-right-width:5px;

border-bottom-width:10px;

border-left-width:5px;

以上可以简写成为:(须序为钟面原则:上右下左)

border-width:10px 5px 10px 5px;

若上下值相同与左右值相同,则又可以简化成为

border-width:10px 5px;

□ 边框颜色

border-color:颜色值;

border-top-clolr:#cccccc;

border-right-clolr:#999999;

border-bottom-clolr:#cccccc;

border-left-clolr:#999999;

以上可以简写成为:(须序为钟面原则:上右下左)

border-color:#cccccc #999999 #cccccc #999999;

若上下值相同与左右值相同,则又可以简化成为

border-color:#cccccc #999999;

□ 边框的综合定义

border:border-style border-width

border-color;

其中,每个属性的顺序可以随意交换,每个属性之间用空格分隔.

border:#999999

10px solid;

该样式定义了边框颜色为淡灰色,边框宽度为10px,边框样式为实线.

□ 单侧边框的综合定义

border-top:border-style border-width

border-color;

border-right:border-style border-width border-color;

border-bottom:border-style border-width

border-color;

border-left:border-style border-width

border-color;

2.补白属性 padding

padding:长度值|百分比 (百分比一般不建议用)

padding-top:20px;

padding-right:10px;

padding-bottom:20px;

padding-left:10px;

以上可简写成为:(顺序为钟面原则:上右下左)

padding:20px 10px

20px 10px;

如果上与下同值,右与左则值,则又可以简写成为:

padding:20px 10px;

如果左边值未设,则默认为与右边相同,若两边都没设,则默认为0.上下值设置相同.