第四章 定位元素
时间:2010-09-24 来源:heartofrong
1.盒模型
标记中创建的每个元素都会在页面上生成一个盒子,对,每一个元素!元素盒子的边框默认是不可见,而且盒子的背景也是透明的。但是有些元素是具有默认不为0的padding的。
使用CSS可以调整元素盒子的3个方面:
- 边框(border):设置边框的粗细、样式和颜色
- 外边距(margin):设置盒子与相邻元素之间的距离
- 内边距(padding):设置盒子与其边框之间的距离
它们各自有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声明撤销
清除方法:
- 在浮动元素和后一元素之间创建一个空div,设置clear属性(为什么不直接在后一元素上设置clear属性呢?可能是不方便吧)
- “Aslett的清除方法”
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才有意义。