15-CSS边框与边界

1. CSS中边框的使用

属性名称	属性值	说明
border-style	none	不显示边线(默认)
	dotted	点线
	dashed	虚线
	solid	实线
	double	双线
border-width	长度	边框宽度
border-corlor	十六进制	边框颜色
	英文名称	边框颜色
	三原色	边框颜色

可依序设置上，右，下，左边框样式/宽度/颜色
实例1：
border-color:red/*四边均为红色*/
实例2 :
border-color : red green/*上下为红色，左右为绿色*/
实例3 :
border-color:red green blue/*上为红色、左右为绿色、下为蓝色*/
实例4 :
border-color:red green blue yellow/*上右下左分别为红绿蓝黄*/
边框的样式和宽度设置与以上四个实例类似。

边框的简化写法 :
border :长度 形态 颜色
实例 :
border : 1px solid black

2. CSS中边界的使用

padding 系列属性的介绍

属性名称	属性值	说明
padding-top	长度/百分比	元件内容与上边边线的空隙
padding-right	长度/百分比	元件内容与右边边线的空隙
padding-bottom	长度/百分比	元件内容与下边边线的空隙
padding-left	长度/百分比	元件内容与左边边线的空隙

简易写法 :

padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px

margin系列属性的介绍

属性名称	属性值	说明
margin-top	auto	自动调整元件上边线与外容器的空隙
	长度/百分比	元件上边线与外容器的空隙
margin-right	auto	自动调整元件右边线与外容器的空隙
	长度/百分比	元件右边线与外容器的空隙
margin-bottom	auto	自动调整元件下边线与外容器的空隙
	长度/百分比	元件下边线与外容器的空隙
margin-left	auto	自动调整元件左边线与外容器的空隙
	长度/百分比	元件左边线与外容器的空隙

简易写法 :

margin:0px  /*常用网页顶格设置*/
margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px