文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>第四章 定位元素

第四章 定位元素

时间: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才有意义。

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载