1、4.7 用CSS设置元素的边框与边距l 设置元素的边框和边距是非常重要的显示技巧，巧妙地设置元素边框和边距的宽度、颜色，可以制作出非常美观的显示效果。4.7.1 元素的边框与边距l 容器类元素都有边框和边距，边距又分为外边距和内边距，边框与边距均有上、下、左、右4条边。一个容器的边框与边距（边距、边框足够宽）如图4.34所示。l 在CSS中，外边距的属性是margin，内边距的属性是padding，边框的属性是border。运用不同的内边距、边框和外边距方案，能够组合出丰富多彩的显示效果。l 边框与边距的相关属性赋值顺序都是从上端开始，按照顺时针方向，即“上、右、下、左”的次序分别赋值。l 如
2、果没有设置边框和边距，会采用系统默认值。系统默认边框为“0px”，即没有边框，默认的边距为“0px”，即没有边距。l 4.7.2 设置元素边框与边距l 设置容器类元素的边框，需要使用容器类元素标签，及其边框属性border（或者使用边框线宽border-width属性、边框颜色border-color属性、边框类型border-style属性）。设置方法为容器类标签 border=线宽属性值 边框颜色属性值 边框类型属性值;或者为容器类标签 border-width=线宽属性值;border-color=边框颜色属性值;border-style=边框类型属性值;其中，边框类型属性值与表格边框类
3、型的属性值的概念是相同的。l 采用border属性设置边框，只适用于4条边的属性值都相同的情况，写法简洁；而采用border-width、border-color、border-style属性设置边框，更适用于4条边的属性值存在差异的情况。1设置边框类型l 边框类型有实线、虚线、双线等，是设置边框效果的重要方面，只有精通边框类型设置，才能做出漂亮的边框效果。每个元素都有上下左右4条边框，可以统一设置或分别设置。（1）设置边框类型（2）统一设置边框的宽度、颜色和边框类型 统一设置边框 div border:12px#006600 double;统一设置边框4条边（3）分别设置边框的宽度、颜色和边
4、框类型l 如果想把边框4条边设置成不同的宽度、颜色或边框类型，必须使用border-width、border-color、border-style属性分别设置，其赋值顺序是上、右、下、左。l 这3个属性赋值比较灵活，可以对其赋1个数值，也可以赋2个数值、3个数值、4个数值，分别代表不同的赋值含义。l 如果仅赋1个值，代表4条边均采用这个数值；如果赋2个值，按照上、右的顺序取值，即上边取第1个数值，右边取第2个数值。下边、左边没有赋值，取对边的值；如果赋3个值，按照上、右、下的顺序取值，左边没有赋值，取对边的值；如果赋4个值，则按照上、右、下、左的顺序取值。分别设置边框的宽度、颜色和边框类型的示
5、例分别设置边框div height:100px;width:300px;border-width:5px 9px 12px 16px;border-color:#0099FF#CC0099#000000#006600;border-style:solid dotted dashed double;分别设置4条边框的宽度、颜色和边框类型l 也可以使用padding-top、padding-right、padding-bottom、padding-left属性分别设置。l 如果padding只设置1个数值，代表4个内边距都采用该数值；如果padding设置2个或3个数值，按照上、右、下、左的顺序依
6、次取值，未被赋值的边距采用对边的值；如果设置了4个数值，则按照上、右、下、左的顺序依次取值。以文本段落为例，使用CSS设置段落内边距CSS设置内边距示例 p border:5px#FF00CC double;font:20px 宋体;color:#FFFF00;background-color:#006666;padding:20px 200px 20px 50px;元素有两个边距：外边距和内边距。外边距是指本元素边框距离外部元素边框之间的距离，内边距是指本元素边框到内部元素边框之间的距离。内边距和外边距都是为了控制页面的松紧程度而提供的属性。3设置外边距l 设置外边距主要是设置元素之间的距离
7、，控制页面元素紧凑显示还是松散显示。也可以同边框、内边距组合，美化元素的显示效果。l 在CSS中设置外边距，需要使用容器类元素标签及其外边距margin属性，设置方法为容器类标签 margin:上外边距 右外边距 下外边距 左外边距;或者使用margin-top、margin-right、margin-bottom、margin-left属性分别设置。l 设置外边距与设置内边距的实现方式是相同的，可以对margin赋1个值、2个值、3个值或4个值，取值方式同设置内边距。4.7.3 制作文字按钮综合范例l 网页中的超链接如果不做美化处理，就像普通的文本一样非常单调（见图4.39）。如果采用边框与
8、边距技术加以处理，就会出现按钮形状的显示效果（见图4.40）。l 按钮状的超链接非常美观，普通超链接则显得呆板。l 那么如何实现按钮状超链接呢？主要是利用好外边距、边框、内边距的显示效果，配合鼠标指针经过与悬停时的显示对比效果来实现的。按钮超链接 a /*以下是统一设置超链接的初始样式*/margin:2px;font-family:宋体;font-size:16px;text-align:center;vertical-align:middle;a:link,a:visited /*设置超链接未访问、访问后的显示状态*/padding:4px 10px 4px 10px;background
9、-color:#CCCCCC;text-decoration:none;color:#0000FF;border-top:1px solid#EEEEEE;/*利用边框颜色搭配 实现阴影效果*/border-left:1px solid#EEEEEE;border-bottom:1px solid#333333;border-right:1px solid#333333;a:hover /*设置鼠标指针经过时的超链接状态*/color:#CC00CC;/*改变文字颜色*/padding:6px 8px 2px 12px;/*利用内边距改变文字显示位置*/background-color:#CCC;/*改变背景色*/border-top:1px solid#333333;/*以下是利用边框 实现“按下去”的效果*/border-left:1px solid#333333;border-bottom:1px solid#EEEEEE;border-right:1px solid#EEEEEE;首页 产品方案网点联系我们
