大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录: float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute(层级高)其实已经不能算是欺骗父元素了,而是出现了层级关系. 一旦给元素加上absolute或float就相当于给元素加上了display:bloc…

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行.图片的文字环绕布局效果就是float. inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果. 作者:Ivony链接:ht…

position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效. float在IE6下的双倍边距bug就是利用添加display:inline来解决的 注意一点的是,position:…

position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.bottom值是相对于自己在z-index层的位置.…

relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.…

不论之前是什么类型的元素(display:none除外), 只要设置了position:absolute或float, 都会让元素以display:inline-block的方式显示, 可以设置长宽,默认宽度并不占满父元素, 就算是显示的设置display:inline或display:block,仍然无效.…

position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签.例如平时我们要让span标签支持width属性,可能要设置: span { display:block; width:100px; } 但…

position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了下,divall(背景图)这个包裹了六个小div(背景色),并把小div在divall里依次排列,间隔是10px.定位相关的div写在了行内样式,其他的与测试不太相关的写在了前面的style里. 父div设置了上边距和左边距,距离浏览器留了30px边距.设置里面的第一排小div绝对定位,top都是1…

元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height.relative : 原来是什么类型的依旧是什么类型.absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位     <span style="position:absolute; width:100px; height:50px;">span</span…

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的…