当前位置：
文档之家› 网页制作案例教程第13章CSS盒子模型
网页制作案例教程第13章CSS盒子模型
<li>
图13.12 DOM树与页面布局的对应关系
13.5.2
标准文档流
这里又出现了一个新的概念——“标准 文档流”（Normal Document Stream）， 或简称“标准流”。
所谓标准流，就是指在不使用其他与排 列和定位相关的特殊CSS规则时，各种元素 的排列规则。
1．块级元素 2．行内元素
<p>span标记同一行：</p> <span><img src="cup.gif" border="0"></span> <span><img src="cup.gif" border="0"></span> <span><img src="cup.gif" border="0"></span> </body> </html>
g
h
图13.24 计算图中各个字母代表的宽度（高度）是多少像素
在实际使用CSS时，除了采用这种方 式，还可以分别对4条边框设置不同的属性值。
方法是按照规定的顺序，给出2个、3个 或者4个属性值，它们的含义将有所区别，具 体如下。
（1）如果给出2个属性值，那么前者表 示上下边框的属性，后者表示左右边框的属 性。
（2）如果给出3个属性值，那么前者表 示上边框的属性，中间的数值表示左右边框 的属性，后者表示下边框的属性。
13.5.3
<div>标记与<span>标记
<html> <head> <title>div与span的区别</title> </head> <body>
<p>div标记不同行：</p> <div><img src="cup.gif" border="0"></div> <div><img src="cup.gif" border="0"></div> <div><img src="cup.gif" border="0"></div>
3．对一条边框设置与其他边框不同 的属性 4．同时制订一条边框的一种属性
13.3 设置内边距
13.4 设置外边距
13.5 盒子之间的关系
13.5.1
HTML与DOM
1．树 2．DOM树
图13.10 家谱示意图
t;li> <li>
ul
ul
<ul> <li>
li li li li
网页制作综合技术教程
第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 边 框
图13.3 border示意图
13.2.1
设置边框样式
13.2.2
属性值的简写形式
1．对不同的边框设置不同的属性值
在13.2.1节的实例代码中，分别设置了 border-color、border-width和borderstyle这3个属性，其效果是对上下左右4个边 框同时产生作用。
13.6.3
嵌套盒子之间的margin
图13.19 父子块的margin
图13.21 IE与Firefox浏览器对待父元素高度的不同处理
13.6.4
margin可以设置为负值
图13.23 父子块设置margin为负数
13.7 盒子模型概念的案例
i j k l m n o p
a b c
d
e f
（3）如果给出4个属性值，那么依次表 示上、右、下、左边框的属性，即顺时针排 序。
2．在一行中同时设置边框的宽度、颜色和样式
要把border-width、border-bordercolor和border-style这3个属性合在一起， 还可以用border属性来简写。
例如： border: 2px green dashed 这行样式表示将4条边框都设置为2像素 的绿色虚线，这样就比分为3条样式来写方便 多了。
图13.14 <div>与<span>标记的区别
13.6 盒子在标准流中的定位原则
13.6.1 margin
行内元素之间的水平
span1
Margin-right
Margin-left
span2
图13.15 行内元素之间的margin
13.6.2
块级元素之间的竖直margin
图13.17 块元素之间的margin
