第04讲使用XHTML与CSS制作网页.ppt

3、v盒模型结构给各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。1.1CSS布局属性边框属性border2用来设置选择符对象的边框风格、线条、颜色等属性。1）边框风格属性（border-style）这个属性用来设定上、右、下、左边框的风格，它的值如下：None、solid、dotted、dashed等。例如：.d1{border-style:none;}1/41.1CSS布局属性边框属性border22）边框宽度属性（border-width）这个属性用来设定上

4、下左右边框的宽度，它的值如下：medium（是默认值）、thin（比medium细）、thick（比medium粗）、用长度单位定值。可以使用绝对长度单位（cm、mm、in、pt、pc）或者用相对长度单位（em、ex、px）。例如：.d2{border-width:1px;border-style:solid;}2/41.1CSS布局属性边框属性border23）边框颜色属性（border-color）这个属性用来设定上、下、左、右边框的颜色。例如：4）边框属性（border）这个属性是边框属性的一个快捷

5、的综合写法，它包含border-width、border-style和border-color。例如：.d3{border-color:#CE2301;border-style:solid;}.d1{border:1pxsolid#CE2301;}3/41.1CSS布局属性边框属性border25）单边边框属性上、下、左、右4个边框不但可以统一设定，也可以分开设定。设定上边框属性，可以使用border-top、border-top-width、border-top-style、border-top-col

6、or。设定下边框属性，你可以使用border-bottom、border-bottom-width、border-bottom-style、border-bottom-color。设定左边框属性，你可以使用border-left、border-left-width、border-left-style、border-left-color。设定上边框属性，你可以使用border-right、border-right-width、border-right-style、border-right-color。4/4

7、1.1CSS布局属性边距属性margin3边距属性是用来设置页面中元素块距离父层或者其他相邻元素的距离。1）单个边距设置上边距属性（margin-top）、右边距属性（margin-right）、下边距属性（margin-bottom）、左边距属性（margin-left）、例如：.d1{margin-top:10px;margin-bottom:10px;}1/21.1CSS布局属性边距属性margin32）边距属性（margin）这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上、右

8、、下、左、边距属性。可以为上、下、左、右边距设置相同的宽度。例如：也可以分别设置边距，顺序是上、右、下、左。例如：.d1{margin:1px}2/2.d1{margin:1px2px3px4px}1.1CSS布局属性间隙属性padding4间隙属性指的是元素块内的元素距离元素的边界的距离。1）单个间隙设置上间隙属性（padding-top）、右间隙属性（padding-right）、下间隙属性（padding-bottom）