网页制作综合技术教程：CSS盒子模型.ppt

第13章CSS盒子模型“盒子”与“模型”的概念探究13.1边框13.2设置内边距13.3设置外边距13.4盒子之间的关系13.5盒子在标准流中的定位原则13.6盒子模型概念的案例13.7盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。13.1“盒子”与“模型”的概念探究

图13.1画框示意图图13.2盒子模型13.2边框

图13.3border示意图13.2.1设置边框样式

13.2.2属性值的简写形式

1．对不同的边框设置不同的属性值 在13.2.1节的实例代码中，分别设置了border-color、border-width和border-style这3个属性，其效果是对上下左右4个边框同时产生作用。 在实际使用CSS时，除了采用这种方式，还可以分别对4条边框设置不同的属性值。 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体如下。 （1）如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。Border-color:redblue;1122 （2）如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。Border-color:redbluegreen;1223 （3）如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。Border-color:redbluegreenpurple;12332．在一行中同时设置边框的宽度、颜色和样式

要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。 例如： border:2pxgreendashed; 这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写方便多了。 3．对一条边框设置与其他边框不同的属性 4．同时制订一条边框的一种属性13.3设置内边距

13.4设置外边距

13.5盒子之间的关系

13.5.1HTML与DOM 1．树 2．DOM树图13.10家谱示意图图13.12DOM树与页面布局的对应关系 1．块级元素 2．行内元素13.5.3div标记与span标记

html head titlediv与span的区别/title /head body案例13-05 pdiv标记不同行：/p divimgsrc=cup.gifborder=0/div divimgsrc=cup.gifborder=0/div divimgsrc=cup.gifborder=0/div