cheapter7

一、一些术语

1、替换元素与非替换元素

非替换元素，如果元素的内容包含在文档中，则称之为非替换元素。eg.<p>这个段落就是非替换元素</p>

替换元素，指用作为其他内容占位符的一个元素。eg.<img src="" title="" alt="" />

2、正常流

这里指西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本格局。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法是使之成为浮动或定位元素。

 

二、水平格式化

1、一个规则：正常流中块级元素框的水平部分总和就等于父元素的width。

父级元素width=margin-left + borde-left + padding-left + padding-right + border-right + margin-right

2、水平格式化的7大属性

这7大属性中，只有有3个可以设置成auto. margin-left,margin-right,width;

3、使用auto

如果将margin-left,margin-right,width这3个属性中的某个值为auto，而余下的两个元素为特定值的话，那么设置成auto的属性会确定所需要的长度，从而使元素框的宽度等于父元素的width。

而，将这三个属性都设置为非auto的某个值（按照CSS术语，这些格式化属性过分受限（overconstrained））,此时，用户代理会把margin-right强制为auto。

4、负外边距

a) 注意：水平格式化的7大属性，只有margin-left,margin-right可以为负。

b) 7大水平属性的总和要等于父元素的width，只要所有元素都大于或等于0，元素就不会大于其父元素的内容区。所以，当指定负外边距时可以得到比父元素更宽的子元素。

eg.100px + 0 + 0 +440px + 0 + 0 -50px = 400px

于是，严格来说，元素的7项水平属性的总和不能比其包含块的元素更宽。

c) 适当条件下，指定一个左外边距时，不仅会超出其包含快的边框，还会超出浏览器窗口本身的边界。

三、垂直格式化

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>