position和float对内联元素的影响

1、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed ,该元素就会脱离文档流。
但是relative元素是个特例,因为该元素对然脱离了文档流,但是它原本所占的空间仍然占据文档流。
例如:
Code


2、positon 与 display
元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位
<span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的,
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>,这里的display:block就是多余的了。
3、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float(但是能设置margin和padding,只是这时的margin或者padding的值影响的是定位流,而不会影响原来的文档流)。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。


float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素(也就是说一旦设置了float,元素都会被设置成块级元素)。

本文转自http://blog.sina.com.cn/s/blog_8f7509310100vs8m.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值