关于position和float的初级理解和对未来的一些想法
2013-06-13 00:17
274 查看
在现在传统的网页布局里一般都离不开float和position，因为这段时间用纯html和css编写代码，对一些页面布局也有了自己的一些理解，并且也看了一些大神对于float和position的一些观点，所以写这篇博客总结一些。
在网页布局中我喜欢并且习惯用float来对整体进行布局，一些局部的小东西会用absolute来定位。这两个谁好谁坏没有明确标准，float不能起到精确的定位，而是让层飘起来，这种漂浮会带来很多问题，而position则可以精确定位，并且兼容性比float好，但是如果整体用position来定位，会造成一些不同分辨率的显示错误（配合javascript可以修正这些错误），总的来说，大多数人还是用float来整体的布局。但是通过这短时间的学习和理解，我觉得他们说成是专门用来布局的两个css属性有点牵强，首先是float，float的最初是为了用在文字环绕图片而出现的，现在大量的用在布局上，感觉是对float作用的一种变向使用，不过效果很好，这是肯定的，第二个position感觉更偏向与布局，因为position可以精确的定出内容该出现在页面的哪一个地方，这对布局也产生了灵活性，但是对每一个板块都写出left和top也实在是有点麻烦，而且position中的绝对定位是完全的脱离文档流来定位，这其实和布局感觉有点不符合，布局应该是文档流中各元素之间的相互分布，从这点来看，我倒是觉得inline-block比这两个更像是布局的。
不过这些都不影响，至少我们现在还在用这些布局。或许是因为两个属性对布局的不完善，所以在css3中加入了一些新的属性来特别的控制布局，比如flex box，layout，column，这些属性看上去更像是页面布局的属性，并且这些属性在移动端已经开始使用，并且移动web已经很少用float来布局了，html5和css3在移动端已经有了很好的推广，pc端由于各种浏览器的兼容性还需要一段时间。
现在我们还是使用float+position的方式来做好布局，合理的运用和搭配会起到意想不到的结果。
最后说一点，我们现在的布局还是在二维上的一种布局，我觉得可以引入ps中图层的概念，对网页进行分层布局，然后在对每个层进行二维布局，在叠加之后，用户在浏览器上观看的效果也不会有改变。
下面这个想法或许有点天真，全当菜鸟的几句吐槽吧，加入这种分层的想法后，可以在每个层用一个<html>标签或者其他标签（可以专门设计一个），每个层的DOM树都是独立的，但是共用同样的css和js，当页面出现css回流和重绘的时候，只会在一个层中的DOM树里执行，这样可以减少css回流和重绘的时间，提高效率。小白想法，全当抛砖引玉。
在网页布局中我喜欢并且习惯用float来对整体进行布局，一些局部的小东西会用absolute来定位。这两个谁好谁坏没有明确标准，float不能起到精确的定位，而是让层飘起来，这种漂浮会带来很多问题，而position则可以精确定位，并且兼容性比float好，但是如果整体用position来定位，会造成一些不同分辨率的显示错误（配合javascript可以修正这些错误），总的来说，大多数人还是用float来整体的布局。但是通过这短时间的学习和理解，我觉得他们说成是专门用来布局的两个css属性有点牵强，首先是float，float的最初是为了用在文字环绕图片而出现的，现在大量的用在布局上，感觉是对float作用的一种变向使用，不过效果很好，这是肯定的，第二个position感觉更偏向与布局，因为position可以精确的定出内容该出现在页面的哪一个地方，这对布局也产生了灵活性，但是对每一个板块都写出left和top也实在是有点麻烦，而且position中的绝对定位是完全的脱离文档流来定位，这其实和布局感觉有点不符合，布局应该是文档流中各元素之间的相互分布，从这点来看，我倒是觉得inline-block比这两个更像是布局的。
不过这些都不影响，至少我们现在还在用这些布局。或许是因为两个属性对布局的不完善，所以在css3中加入了一些新的属性来特别的控制布局，比如flex box，layout，column，这些属性看上去更像是页面布局的属性，并且这些属性在移动端已经开始使用，并且移动web已经很少用float来布局了，html5和css3在移动端已经有了很好的推广，pc端由于各种浏览器的兼容性还需要一段时间。
现在我们还是使用float+position的方式来做好布局，合理的运用和搭配会起到意想不到的结果。
最后说一点，我们现在的布局还是在二维上的一种布局，我觉得可以引入ps中图层的概念，对网页进行分层布局，然后在对每个层进行二维布局，在叠加之后，用户在浏览器上观看的效果也不会有改变。
下面这个想法或许有点天真，全当菜鸟的几句吐槽吧，加入这种分层的想法后，可以在每个层用一个<html>标签或者其他标签（可以专门设计一个），每个层的DOM树都是独立的，但是共用同样的css和js，当页面出现css回流和重绘的时候，只会在一个层中的DOM树里执行，这样可以减少css回流和重绘的时间，提高效率。小白想法，全当抛砖引玉。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 整理关于css中position与float的一些用法
- 关于应用为王的未来发展趋势的一些想法
- 关于计算机技术以及未来的一些想法
- [记事] 关于WEB未来发展的一些想法
- 关于 回调 、 反射 和异步的一些理解---初级知识
- 关于css position和scroll事件的一些理解
- 关于display,position,float的一些认识
- [记事] 关于WEB未来发展的一些想法
- 关于float的一些理解
- 关于php 定时执行的一些想法
- 关于电话营销的一些不太成熟的想法
- 关于事件与委托的一些个人简单理解
- 基于电信定制机，关于Android中彩信信息采集的一些想法
- 关于面向对象和设计模式的一些想法
- 关于linux中多线程编程的一些初级问题
- 关于UML使用和学习的一些想法
- 关于JDBC和一些持久化框架SQL预编译的理解整理
- 由CSP 题目引发的关于Map的一些想法
- 关于对 (char *)字符指针强制转换类型的一些理解
- 关于OpenLayers的TMS的一些理解