网页制作综合技术教程 教学课件 温谦 赵伟 胡静 李占波 第13章CSS盒子模型.ppt

《网页制作综合技术教程 教学课件 温谦 赵伟 胡静 李占波 第13章CSS盒子模型.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页制作综合技术教程第4部分CSS页面布局设计第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边框

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个属性值，那么前者表示上下边框的属性，后者表示左

3、右边框的属性。（2）如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。（3）如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。2．在一行中同时设置边框的宽度、颜色和样式要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。例如：border:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写

4、方便多了。3．对一条边框设置与其他边框不同的属性4．同时制订一条边框的一种属性13.3设置内边距13.4设置外边距13.5盒子之间的关系13.5.1HTML与DOM1．树2．DOM树图13.10家谱示意图图13.12DOM树与页面布局的对应关系13.5.2标准文档流这里又出现了一个新的概念——“标准文档流”（NormalDocumentStream），或简称“标准流”。所谓标准流，就是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1．块级元素2．行内元素13.5.3