我所理解的标准流与浮动流

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

1 问题引入

在网页设计布局中,除了普通流以外,还有重要的标准流与浮动流。在这篇文章中我将谈谈我所理解的标准流与浮动流,希望能给大家的CSS带来些许帮助。

2浅显理解

在CSS中单单的使用普通流是肯定不够的。那么这个时候就需要用到标准流,但是在标准流中,有些元素是不能设置一些属性的。像行内元素就不能设置它的宽高,但是再结合浮动流后,它又可以进行设置了。接下里,我们就谈谈什么是标准流,什么是浮动流。

首先,介绍关于标准流的知识。标准流是浏览器默认的排版方式,也被为称文档流。它是不借助任何特殊的CSS排列元素的排列规则。也就是说,标准流是一种排列规则。它的元素主要分为块级元素和行内元素。

块级元素(block):

它是独占一行的,主要在排版中做垂直分布的作用。它不同于接下来的一种元素,它是可以设置宽高的。如果不去对它设置宽和高,那么它将会默认宽高为百分之百。

行内元素(inline):

它可以多种元素存在一行里,它主要是对排版中的水平分布起作用。它(input,img除外)是不能直接设置宽高的,但是可以使用浮动来设置它的宽高。

说完标准流的主要元素,接下来说说嵌套规则。嵌套规则往往与框架同时出现。通俗的讲,框架等于外壳一样,只是一个框。嵌套就是框架里面的东西,一层一层的按一定的逻辑顺序进行嵌套,里面的一层就是外面一层的嵌套。开始说嵌套规则,其实就是一些注意事项:

1)块级元素能嵌入行内元素;

2)ul、ol只能嵌套li,而li可以嵌套任何元素;

3)dl只能嵌套dt、dd元素;

4)textarea只能嵌套文本;

5)p、h只能嵌套文本和行内元素;

6)select只能嵌套option;

7)a可以不嵌套交互性标签。

现在,开始讲讲浮动流。浮动流的作用是实现文字的环绕效果,它只能用于水平排版,设置某个元素的左对齐或者右对齐。在浮动流中的元素,是都可以设置宽高的,与标准流中的行内块级元素很相识,但是浮动流没有居中对齐(不能使用margin:0 auto)。浮动流的脱标是指,在前一个元素浮动,后一个没有的情况下,前面的元素会覆盖后面的元素。在排序方面,同向时,按照浮动的先后顺序进行排序;在不同向时,左浮动的会找左浮动,右浮动的会找右浮动的。浮动元素浮动后的位置是由元素浮动前标准流中的位置决定的。在浮动元素中会出现元素贴靠的现象,这是由于父元素位置决定的,位置足够时,就依次向左贴,直到贴到父元素的最左端为止;位置不够时,就会并列显示。

3 总结

在实际学习中和动手实践中,要善于留心标准流、浮动流的书写方式。感受不同排版方式的特色。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181205B00DOR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券