网络营销推广
首页 > 网站搭建 > 网站建设 > 网站css布局中的float布局与position布局对比分析

网站css布局中的float布局与position布局对比分析

作者:蒋元 来源:http://www.jiangyuanblog.com/ 2017-08-17 12:48:55

  在工作中,一直使用浮动(float)布局,说到布局,其实我认为table是很好的,不存在浏览器兼容性的问题,但已经是过时的布局方式,在DIV结合CSS布局的方案中,有两'...

  在工作中,一直使用浮动(float)布局,说到布局,其实我认为table是很好的,不存在浏览器兼容性的问题,但已经是过时的布局方式,在DIV结合CSS布局的方案中,有两种:一是float,二是:position,position我一直觉得不好理解,用得也很少,在知乎上看到有人回到了这两者之间的区别与对比,觉得知识很实用,今天我们通过蒋元的网络营销博客一起来了解一下吧!

企业网站建设

  float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果。

  float从字面上的意思就是浮动,这种在印刷排版之  类中可能解释的更加贴切。float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

  而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定  位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流  的,不会占据文档流空间。

  比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样  不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。为什么?因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

  float  布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

  如果说到性能问题reflow问题,将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等,用absolute或者fixed定位会更好。

  以上就是为大家分享的关于网站css布局中的float布局与position布局对比分析,相信可以帮助大家更好的运用css的布局操作手法,更多有关企业网站建设的相关需求,请关注:蒋元的网络营销博客。

网络营销师   网络营销技巧   网络营销方案   网络营销学习

相关阅读

热点话题
  • 网站css布局中的float布局与position布局对比分析

    网站css布局中的float布局与position布局对比分析

  • 如何删除ASPCMS自带的默认栏目分类和内容

    如何删除ASPCMS自带的默认栏目分类和内容

  • 网站被挂马的影响与应对措施有哪些?

    网站被挂马的影响与应对措施有哪些?

  • 数据备份4大技巧的重要性

    数据备份4大技巧的重要性

  • 网站建设需要趋向人性化设计

    网站建设需要趋向人性化设计

  • 搭建自己的网站步骤是什么

    搭建自己的网站步骤是什么

今日话题