第四章定位元素

时间：2010-09-24 来源：heartofrong

1.盒模型

标记中创建的每个元素都会在页面上生成一个盒子，对，每一个元素！元素盒子的边框默认是不可见，而且盒子的背景也是透明的。但是有些元素是具有默认不为0的padding的。

使用CSS可以调整元素盒子的3个方面：

它们各自有4个方向上的属性，顺序为上右下左（TRouBLe）。

边框：与边框相关的属性有3个（当然有4个方向）：width，style，color

内边距：内边距在盒子内部，所以它也会带有背景，当为元素添加边框时，应该同时设置内边距以避免内容与边框接触。

外边距：多数块级元素都有默认的外边距。把下面这条规则放在样式表的顶部是一个好习惯

* {margin:0, padding:0}

通常为文本元素（如段落）设置外边距时，通常混合使用不同的长度单位。如：p {font-size:1em; margin:.75em; 30px;},这样上下间距会随着字体大小变化，左右距离则保持不变，有利于布局。

折叠外边距：垂直的外边距折叠，即两个垂直相邻的元素，其外边距等于大的那一个。而水平外边距则等于相加和。

2.盒子到底有多大

设置元素盒子的宽度：p {;}，宽度为400px

设置padding: p {;padding:0 20px;},宽度变成440px

设置border：p {;padding:0 20px;border:0 6px;},宽度变成452px

设置margin：p {;padding:0 20px;border:0 6px; margin:0 30px},虽然盒子的宽度还是452px，但扩大了元素占用的整体空间。

盒模型的结论1：边框和内边距会增大盒子的宽度。事实上，width属性设置的是盒子内容的宽度，而不是盒子本身的宽度

3.包含元素与被包含元素之间的宽度关系

现有一div和被div包含的p，若设置div宽度为170px，则默认情况下p的宽度自动设置为170px（块级元素的宽度默认值为auto，“尽可能的大”）。

若设置div的padding为10px，则宽度变为190px，p元素的位置大小不变。这种情况对布局不好。

若在div和p之间再添加一个div（通常被包含元素不止一个），通过设置小div内边距或者外边距来添加空白，这样可以保持大div宽度不变。

盒模型的结论2：无尺寸限制的元素会扩展到与它的包含元素同宽。

4.浮动和清除

float和clear属性的组合是创建页面布局时一种强大的技术。浮动是将元素从常规文档流中移出的一种方式，位于浮动元素之后的元素，会在空间充足的情况下向上移动到浮动元素旁边，通过clear属性可以阻止元素向上浮动。

float属性有两个作用：实现文本环绕图片，创建多栏布局。

实现文本环绕图片效果：图片设置float属性，紧跟的文本不设置宽度，并且不设置float属性时，产生此效果

多栏布局：设置上述的文本宽度，并且设置float属性。

clear属性的作用：有时候不希望float元素后面的元素拼命往上挤，可以为后面的元素设置clear属性

clear属性的原理：设置了clear属性的元素的上外边距能够自动的重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，如果我们为清除元素设置了上外边距，这个上外边距也将被clear声明撤销

清除方法：

5.position属性

static定位，默认定位方式，按文档流自上而下排列
relative定位，相对于默认static定位的位置设置参数，有top、left、bottom、right4个参数，一般来说top和left已经足够（负属性）
absolute定位，默认定位环境为body，当外部div（可以是父元素，也可以是其他祖先元素）的定位属性设置为relative时，定位环境变为外部div。也有4个方向参数。
fixed定位，定位环境是窗口，当页面滚动时固定定位的元素位置不变。（IE6不支持）

6.display属性

常用取值包括block（行内元素）, inline（块级元素）, none.当设置为none时，这个元素会被移除，这与visibility属性有区别。

一个典型的应用：鼠标移动到图像上，出现文字说明。

div {position: relative;}

p {position: absolute;display:none;}

div:hover p, p:hover {display:block;}

其中div是outer元素，装有图片，p装有文本。当鼠标没有经过div时，p的display属性还是none，不在文档流中，所以不存在p的hover，只有在div上悬停后，p出现了，p的hover才有意义。