style=&quot 766;position:abs...

来源：蜘蛛抓取(WebSpider) 时间：2011-08-26 19:44 标签：
您的举报已经提交成功，我们将尽快处理，谢谢！
如何更改新浪博客的通栏图
新浪博客的通栏图位于博客首页上方的长条图，通栏图的样式可以在“控制面板中”的“定制我的模板”中选择。
你也可以修改为自...
大家还关注
(window.slotbydup=window.slotbydup || []).push({
id: '2081942',
container: s,
size: '1000,60',
display: 'inlay-fix'CSS 中，position：absolute、float、display：inline-block 都能实现相同效果，区别是什么？
不用解释每个的概念，仅谈应用上的区别。应用范围是？或者说在什么情况下优先使用哪个？尽管都能实现某一效果
按投票排序
诚然，实现同一种效果的方法有很多，我不想回答太多技术性的东西（比如 ，自行补脑）。举个生活中的栗子：比如早上从家到学校有三条路（对应问题中的三种方法），如果你骑车可以走小路，路程短。如果下雨了，你要坐公交又是另外一条路。再者，只有第三条路有早点卖，如果你没吃早餐，可以走这条路。回到问题：float 直接快速，如同你骑车抄近道，但是不可避免有时候会下雨，比如浮动带来的父元素高度塌陷。inline-block 似乎很好，可是公交车有时候会很堵的，该属性带来的空隙问题曾经令我纠结很久（去除空隙的兼容性解决方案我总结的在这里：）。绝对定位我就不说了。OK，不用纠结上面的栗子了，举个实际的栗子吧：有时候 inline-block
可以做到的，float 未必可以做到。如果想要实现如下布局：使用 float 则会变成这样(Demo：使用 float 则会变成这样(Demo：)：inline-block 则可以做到（Demo：）总之，实现某一种效果有很多路可以走，但是未必都是适合你的。CSS3 的进化为我们带来了诸如 flex，grid 这些专用强大的布局属性，如同现在有了幸福的校车，包接包送！噗……对于 老湿的理论，在这里简单理解就是：你得想好你的需求，是想抄近道还是想吃早餐亦或坐公交，这些就是设计湿的设计意图，CSS 最终反映的就是设计意图，而非「到达学校」这个最终效果（结果）。 更新：总结一下：CSS2.1 之前,一直没有一个专门的属性来解决网页布局问题,Float也好,position 也罢,都只是一种 Tricks.直到 Flexbox 的出现,非常方便的解决了网页一维布局的问题,而CSS Grid 则能更好的解决二维布局的问题.以上
position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。===================================================补充，其实这个答案完全没有回答问题，因为提问者说：不用解释每个的概念，仅谈应用上的区别。应用范围是？或者说在什么情况下优先使用哪个？尽管都能实现某一效果但是我想回答的是，这三种方式产生的排版效果是截然不同的，只有充分理解了他们的排版效果，才能作出最好的决定。
看这个网站 解释的很清楚
或者看我的关于css的总结
个人来看1、绝对定位完全脱离普通流，因此绝对定位元素无法跟普通流搭建交互关系（普通流能影响绝对定位，绝对定位不影响普通流），这样来说，在一些自适应布局场景中，绝对定位就存在一些缺陷（需要更多的限制因素，非常不灵活）。如果希望用绝对定位实现你说的 float 或 inline-block 同样的效果，这个时候一般是不推荐用 绝对定位。2、对于浮动，这个属性一般不是用来做布局的（偏向于排版），但是CSS2.1好像也就这个属性能够满足一些特定需求，所有才有了浮动布局。浮动相对绝对定位好处是，它默认可以影响行内布局，通过 clear 清除浮动也可以影响 块布局，可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的，在元素的水平定位上相比于 inline-block 更加灵活多变， 而 inline-block 的水平定位则更加有序。3、inline-block，这个属性也不是用来布局的（偏向于排版），但是在 CSS3 普及之前，它的用处也很大。该元素的盒子在行框中进行格式化，其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流，这比浮动来说有更大的优势，它可以跟普通流自然交互，而不必要借助去其他属性。而且相比浮动，相邻元素间的垂直对齐方式，inline-block 比 float 更加灵活， float 格式化时有一条规则，就是越高越好（因此常常表现为顶端对齐），而 inline-block 在行内格式化，拥有更灵活的垂直对齐方式。应用：如果使用了浮动，清除浮动就会成为你的副作用，而且如果你没有良好的HTML/CSS 结构的话，清除浮动是一个很复杂的事情。inline-block 虽然避免了清除浮动的事情，但是会有另一个副作用，即空白符问题。这个问题的解决方案也令人十分蛋疼，因为毕竟 inline-block 不是布局属性，它仅仅是 行内级块容器盒子。 同时，作为IFC环境中的格式化问题，垂直居中、行高等问题也有可能是一个副作用。其他：其实在 CSS2.1中，利用表格 table 布局也是非常强大的方法。表格布局在等高，同列等宽对齐，垂直居中对齐上面的优势是其他方法很难媲美的。甚至于在自适应场景中，表格布局的灵活性也非常出众。
float: left| 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline- 有些时候可以替代float实现相同的效果.position: absolute| 要配合top,left等定位;举例:&html&&body&&style type="text/css"&
div {border: 1 margin: 1}
div div {border: 1}&/style&&div&
&div style="float:"&Float 1&/div&
&div style="float:"&Float 2&/div&
&div style="clear: border: 0;"&&/div&&/div&&div style="text-align:"&
&div style="display: inline-"&Inline Block 1&/div&
&div style="display: inline-"&Inline Block 2&/div&&/div&&div style="position:"&
&div style="position: right: 0"&Position 1&/div&
&div style="position: right: 50"&Position 2&/div&&/div&&/body&&/html&表现:上面的是float, 中间的是inline-block, 下面的是position, 可以看出:1. 当居右(右浮动)时, float是按先后顺序来的, 先写的排子右边; 而inline-block则保持左右顺序不变.2. 在部分浏览器中(以上是在的firefox中), 空行或空格会影响到inline-block, 却不会影响到float的block.3. position只能配合left,right来定位, 如果去掉则重叠在一起; 不能借助clear等自动扩展容器.4. 他们都有共同点, 如果包裹的是行级元素, 则宽度可以按内容宽度自适应.使用场景:照片墙, 选项卡, 导航条等可以使用inline-block或float, 推荐inline-block, 但需要注意浏览器兼容(如IE, 还有空行在某些浏览器下的影响, 见 ), 用float记得习惯性的使用clear.Tip等提示, 悬浮窗, 遮罩等, 建议使用position.
如果两个div有重叠显示效果就用position了
没有的话 一般就用float了
因为inline-block 貌似有兼容性问题
absolute在一个大张背景图容器上铺各种A的时候常用，兼容性优秀，代码优雅，屡试不爽！
就是因为实现一件事情有很多条路可走，所以前端很难。
来说下我的看法：1.float：灵活，可以适应不同分辨率，页面整体可以采用float，其中某些特殊需要可以采用relative和absolute2.absolute：不能适应不同的分辨率要求，网页整体不建议使用这个定位

我要回帖

 

随机推荐