首页>网页设计培训>相关知识分享

css中display属性与float属性

2012-03-21发布
首先我们要明确,display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  当然这看起来不像是display:inline;与float:left;的区别所在,但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

  那么我们很清楚了,内联(display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。

position:relative和absolute属性的区别

position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。

对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:

display:block与display:left - zhuoweida - zhuoweida的博客

子元素B可以通过top、right、bottom、left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于B元素具有absolute定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了 z-index(空间坐标系的Z轴) 属性,谁的值大,谁就在上面。另外,如果父级元素A没有设置relative,那么B元素就会以body标签当作参考点。

对于具有position:relative属性的元素A,其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸。值得注意的是,此时元素A的margin,margin将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置,并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的 absolute,比如上面的A、B两个元素,如果两个元素都设置了top、right、bottom、left,对于元素B来说,其位置偏移的参考点是元素A偏移后的位置,不是元素A的原位置,同样,如果元素B有margin,其参考点也是元素A偏移后的位置,这点很重要,这才是absolute的概念


上一篇:2013年网页设计的一些流行趋势

下一篇:已是最后一篇

相关推荐:
* 网站logo的设计规范有哪些?
* 从苹果看网页设计
* 保定网页设计培训,轻松找到好工作!
* 网页设计师招聘市场火爆!
* 想参加倬威达网页设计培训,应该有信心!

PHP培训|网页设计培训|SEO培训|软件开发|零费用学习—倬威达软件
保定PHP软件开发培训保定网站制作保定网站优化保定软件开发倬威达网站地图站点地图关于我们学员登录返回顶部

Copyright©倬威达软件公司All Rights Reserved (2006-2018)冀ICP备13006696号-1

地址:河北省保定市东风东路999号(河北软件职业技术学院东校区) 电话:0312-5097704 / 13082308722

河北软件职业技术学院 校企合作专业 询热线线:0312-5097704 / 13082308722