165 外边距margin 属性值的设置和内边距padding 是一样的，也可以设置不同的属性个数代表相应的含义。
15.3  盒子的浮动与定位
通过前面几节的学习，我们已经熟悉了一个盒子内部的关系。但实际网页上分布着大量的盒子，它们之间有着父子的相互关系。要把一个盒子和其他盒子之间的关系搞清楚并不容易。为了方便组织页面上的各种盒子，CSS 规范的制定者进行了深入细致的思考，既能有足够的灵活性，可以适应各种排版要求，又能使规则尽可能简单易用，让用户都能容易实现。
CSS 规范首先确定了一种标准的排版方式，可以保证设置的简单化，各种网页元素都按照这种标准的方式进行布局，这就是所谓的“标准流”方式。但仅有标准流方式还不够灵活，是无法实现所有的排版方式的，所以CSS 规范还给出了其他的布局方法，如“浮动”属性和“定位”属性等。
15.3.1  标准流
“标准文档流”简称为“标准流”，是指在不使用其他与排列和定位相关的特殊CSS 规则时各种页面元素默认的排列规则。
页面元素可以分为如下两类。
（1）块级元素（block level ）：总是以一个块的形式表现出来，并和同级的兄弟依次垂直排列，左右撑满。比如<li>标记，总不会排在同一行，而是和相邻的<li>垂直排列。
padding是外边距还是内边距（2）行内元素（inline ）：相邻元素之间横向排列，到最右端自动折行。比如<a>标记。
标准流就是CSS 默认的块级元素和行内元素的排列方式。在一个页面中如果没有出现特殊的排列方式，那么所有的页面元素将以标准流的方式排列，即一个个盒子形成一个序列，同级别的盒子依次在父级盒子中按照块级元素或行内元素的排列方式进行排列，同级父级盒子又依次在它们的父级盒子中排列，依此类推，整个页面如同河流和它的支流，所以称为“标准流”。
15.3.2  盒子的定位原则
掌握盒子在标准流中定位原则需要对margin 有很深刻的理解，因为padding 只在盒子内部，不会影响盒子的外部，margin 是一个盒子的外边距，它直接影响与其他盒子之间的关系。
1．行内元素之间的水平定位
行内元素主要用于确定水平定义。span 是行内元素，下面以两个span 为例说明行内元素之间的定位。
图15-5描述了两个span 之间的水平定位效果，由图中可以看出，两个行内元素之间的水平间距由左边元素的右外边距加右边元素的左外边距共同决定。
图15-5  行内元素水平定位
【示例15-4】行内元素水平定位margin 设置效果示例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。