关于position和float的初级理解和对将来的一些想法

时间 2019-11-07

标签关于 position float 初级理解将来一些想法栏目 CSS 繁體版

原文原文链接

在如今传统的网页布局里通常都离不开float和position，由于这段时间用纯html和css编写代码，对一些页面布局也有了本身的一些理解，而且也看了一些大神对于float和position的一些观点，因此写这篇博客总结一些。 javascript

在网页布局中我喜欢而且习惯用float来对总体进行布局，一些局部的小东西会用absolute来定位。这两个谁好谁坏没有明确标准，float不能起到精确的定位，而是让层飘起来，这种漂浮会带来不少问题，而position则能够精肯定位，而且兼容性比float好，可是若是总体用position来定位，会形成一些不一样分辨率的显示错误（配合javascript能够修正这些错误），总的来讲，大多数人仍是用float来总体的布局。可是经过这短期的学习和理解，我以为他们说成是专门用来布局的两个css属性有点牵强，首先是float，float的最初是为了用在文字环绕图片而出现的，如今大量的用在布局上，感受是对float做用的一种变向使用，不过效果很好，这是确定的，第二个position感受更偏向与布局，由于position能够精确的定出内容该出如今页面的哪个地方，这对布局也产生了灵活性，可是对每个板块都写出left和top也实在是有点麻烦，并且position中的绝对定位是彻底的脱离文档流来定位，这其实和布局感受有点不符合，布局应该是文档流中各元素之间的相互分布，从这点来看，我却是以为inline-block比这两个更像是布局的。 css

不过这些都不影响，至少咱们如今还在用这些布局。或许是由于两个属性对布局的不完善，因此在css3中加入了一些新的属性来特别的控制布局，好比flex box，layout，column，这些属性看上去更像是页面布局的属性，而且这些属性在移动端已经开始使用，而且移动web已经不多用float来布局了，html5和css3在移动端已经有了很好的推广，pc端因为各类浏览器的兼容性还须要一段时间。 html

如今咱们仍是使用float+position的方式来作好布局，合理的运用和搭配会起到意想不到的结果。 html5

最后说一点，咱们如今的布局仍是在二维上的一种布局，我以为能够引入ps中图层的概念，对网页进行分层布局，而后在对每一个层进行二维布局，在叠加以后，用户在浏览器上观看的效果也不会有改变。 java

下面这个想法或许有点天真，全当菜鸟的几句吐槽吧，加入这种分层的想法后，能够在每一个层用一个<html>标签或者其余标签（能够专门设计一个），每一个层的DOM树都是独立的，可是共用一样的css和js，当页面出现css回流和重绘的时候，只会在一个层中的DOM树里执行，这样能够减小css回流和重绘的时间，提升效率。小白想法，全当抛砖引玉。 css3