web学习总结之布局

浅谈web布局中的“float”属性  

  对于刚学习web前端的同学,布局和排版都是一个难点。虽然我们能够通过各种调试实现我们希望得到的页面效果,但是如果不把其中的道理弄清楚的话,在下次布局的时候,也无法对整体页面有一个比较全面的掌控。只要弄清楚其中的道理,实现页面的良好布局并不是一件特别难的事情。下面,我就谈谈我学习布局的经验~初来乍到,多多指教~!

1.理解“流”

  要学会web布局,首先要理解“流”的概念和工作原理。“流”,形象一点说,就像水流一样,浏览器从html文件的开头,把元素流入页面中,块级元素独占一行,内嵌元素共享一行,按html文件中的顺序一个接一个的把它们“流”到页面上,直到将最后一个元素放到页面上,这就是我们常说的“正常文档流”。这是浏览器默认的元素放置方式。这些元素按照它们的规则和顺序被放置在同一层中。

块级元素独占一行,内嵌元素共享一行

  很简单,块级元素在文档流中前后都有换行,故独占一行。而内嵌元素呢?内嵌元素会在水平方向上一个接一个地流,从左到右直到没有足够的空间,就流到下一行。

2.“float”浮动的原理

  在我们的布局工具中,有一个叫“float”属性,意思是“浮动”。“float”属性有两个值:“left”、“right”。简单来说,“float”属性就是让一个元素尽可能的靠左或靠右。既然叫做“浮动”,那么它当然是漂浮在正常文本流之上的。因此,它脱离了正常文本流,然后再文本流之上,尽可能的浮动到左(右)边。那么,原先页面中的元素会如何放置呢?

  就像湖里的水流一样,你从中舀走一碗,旁边的水流就会填充过来,湖面还是如镜面一般平坦。当文本流中的一个元素被“float”漂浮起来时,跟在它后面的元素就会填充它原本的位置。

对于正常文档流中的元素,被“float”的元素就像不存在一样。你甚至会发现,浮动元素遮住了下面正常文本流中的块元素。注意!正常文本流中的内嵌元素可不同,当内嵌元素遇到浮动元素时,它们会包围在浮动元素边界的周围(最初“float”就是用于实现文字环绕图片的效果的)。

3.使用“float”,你还需要知道:

  “float”属性浮动的位置跟你的html文件中添加了“float”属性的元素的位置顺序有关,浮动元素只会跟在它的上一个元素(html文件中,浮动元素的上一个元素)后面进行浮动。

 

 

 

web学习总结之布局,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。