由CSS浮动、定位引发的对CSS标准流的思考

来源：互联网发布：安卓软件简单源码编辑：程序博客网时间：2024/06/09 13:53

  CSS标准流是一种CSS布局规则。之所以标准，是因为在不使用其它特殊的规则(如浮动、定位)下，CSS所默认的对html各种元素的排列规则。  标准流是指元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

在html文档中，CSS将元素分为两大类：块级元素和行内元素。常见的块级元素有div标签、p 标签等，常见的行内元素有span标签、em标签、strong标签等。

块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向上独占一行，不能与其它的元素并列。

行内元素不占据单独的空间，依附于块级元素，在水平方向上一个接一个的排列。

下面举个直观的例子：

<!DOCTYPE html><html><head>    <title>backgroundimage</title></head><body><P>This is paragraph text, but you knew that. Within the content of this paragraph is an image that's been floated.<em>The block for the image is the paragraph.</em></P><P>This is paragraph text, but you knew that. Within the content of this paragraph is an image that's been floated.<strong>The block for the image is the paragraph.</strong></P><P>This is paragraph text, but you knew that. Within the content of this paragraph is an image that's been floated.<em>The containing block for the floated image is the paragraph.</em><strong>The block for the image is the paragraph.</strong></P></body></html>

运行结果：

这里写图片描述

在这个例子里，我定义了三个块级元素（P标签），可以发现三个块级元素，都各自独占一行，不允许其它元素并列。同时也定义了两个行内元素（strong标签和em标签），可以发现在运行结果的第三行中，这两个行内元素是从左到右并列一行。

所以，这就是CSS标准流所定义的布局。当然，块级元素和行内元素并不是绝对的，我们也可以用display属性来让块级元素称为行内元素，让行内元素成为块级元素，这里就不作赘述了。

阅读全文

0 0