商务网页第20课.pptx

4.7 用CSS设置元素的边框与边距设置元素的边框和边距是非常重要的显示技巧，巧妙地设置元素边框和边距的宽度、颜色，可以制作出非常美观的显示效果。 4.7.1 元素的边框与边距容器类元素都有边框和边距，边距又分为外边距和内边距，边框与边距均有上、下、左、右4条边。一个容器的边框与边距（边距、边框足够宽）如图4.34所示。在CSS中，外边距的属性是margin，内边距的属性是padding，边框的属性是border。运用不同的内边距、边框和外边距方案，能够组合出丰富多彩的显示效果。边框与边距的相关属性赋值顺序都是从上端开始，按照顺时针方向，即“上、右、下、左”的次序分别赋值。如果没有设置边框和边距，会采用系统默认值。系统默认边框为“0px”，即没有边框，默认的边距为“0px”，即没有边距。4.7.2 设置元素边框与边距设置容器类元素的边框，需要使用容器类元素标签，及其边框属性border（或者使用边框线宽border-width属性、边框颜色border-color属性、边框类型border-style属性）。设置方法为容器类标签｛ border=线宽属性值 边框颜色属性值 边框类型属性值;｝或者为容器类标签｛ border-width=线宽属性值; border-color=边框颜色属性值; border-style=边框类型属性值; ｝其中，边框类型属性值与表格边框类型的属性值的概念是相同的。采用border属性设置边框，只适用于4条边的属性值都相同的情况，写法简洁；而采用border-width、border-color、border-style属性设置边框，更适用于4条边的属性值存在差异的情况。1．设置边框类型边框类型有实线、虚线、双线等，是设置边框效果的重要方面，只有精通边框类型设置，才能做出漂亮的边框效果。每个元素都有上下左右4条边框，可以统一设置或分别设置。（1）设置边框类型（2）统一设置边框的宽度、颜色和边框类型htmlhead title统一设置边框/title style type=text/css div{ border:12px #006600 double; } /style/headbody div统一设置边框4条边/div/body/html（3）分别设置边框的宽度、颜色和边框类型如果想把边框4条边设置成不同的宽度、颜色或边框类型，必须使用border-width、border-color、border-style属性分别设置，其赋值顺序是上、右、下、左。这3个属性赋值比较灵活，可以对其赋1个数值，也可以赋2个数值、3个数值、4个数值，分别代表不同的赋值含义。如果仅赋1个值，代表4条边均采用这个数值；如果赋2个值，按照上、右的顺序取值，即上边取第1个数值，右边取第2个数值。下边、左边没有赋值，取对边的值；如果赋3个值，按照上、右、下的顺序取值，左边没有赋值，取对边的值；如果赋4个值，则按照上、右、下、左的顺序取值。分别设置边框的宽度、颜色和边框类型的示例htmlheadtitle分别设置边框/titlestyle type=text/cssdiv{ height:100px; width:300px; border-width:5px 9px 12px 16px; border-color: #0099FF #CC0099 #000000 #006600 ; border-style: solid dotted dashed double; }/style/headbody div分别设置4条边框的宽度、颜色和边框类型/div/body/html也可以使用padding-top、padding-right、padding-bottom、padding-left属性分别设置。如果padding只设置1个数值，代表4个内边距都采用该数值；如果padding设置2个或3个数值，按照上、右、下、左的顺序依次取值，未被赋值的边距采用对边的值；如果设置了4个数值，则按照上、右、下、左的顺序依次取值。以文本段落为例，使用CSS设置段落内边距htmlheadtitleCSS设置内边距示例/titlestyle type=text/css p{ border: 5px #FF00CC double; font: 20px 宋体; color: #FFFF00; background-color: #006666; padding:20px 200px 20px 50px; }/style/headbody p元素有两个边距：外边距和内边距。外边距是指本元素边框距离外部元素边框之间的距离，内边距是指本元素边框到内部元素边框之间的距离。内边距和外边距都是为了控制页面的松紧程度而提供的属性。