前言:

css 的布局方式有很多种,但是无论布局方式如何变化,我们都应该知道,标准流布局,因为几乎所有的布局方式都是依赖于标准流的布局方式进行演化而来的.本篇主要总结标准流相关的概念.

什么是标准流

在互联网的洪荒时代,人们关注页面的内容更胜过关注页面的形式.所以在这个阶段,只需要有一种简单的文档布局,就能满足人们对网页的需求,因此标准流应运而生.

标准流就是 "横平竖直"的一种布局方式.
它根据html 元素的显示类型,来决定这个元素是独占一行,还是仅占据一行的一部分.
不同的显示类型也决定了我们可以给这个html 元素添加什么样的属性.
非独占一行html元素的占据多大的空间由元素的盒子模型决定.

一个完全由标准流布局的页面如下:

标准流就是 "横平竖直"的一种布局方式.

标准流把页面中的所有元素按照从左到右,从上到下的顺序摆放好,默认情况下,互相之间不存在层叠现象.

所谓横平是指,所有的元素默认都是按照从左到右的方式进行排布的,就像写日记一样,一个字一个字的摆在日记本上,当一行放不下我们的html 元素时,就自动换行.

html 复制代码

<span
  >央视网(cctv.com)新闻频道是面向全球,多语种,多终端的立体化新闻信息共享平台。以视听与互动为核心,24小时不间断提供最快捷,最权威,最全面,最丰富的新闻视听与互动服务,传播中国,了解世界。</span>
<span
  >央视网(cctv.com)新闻频道是面向全球,多语种,多终端的立体化新闻信息共享平台。以视听与互动为核心,24小时不间断提供最快捷,最权威,最全面,最丰富的新闻视听与互动服务,传播中国,了解世界。</span>

而竖直,又指的是什么呢,在写日记时,我们可以重新开始一行来编写一个新的段落,标准流布局中,如果我们也有类似的概念,叫重启一行.

即当遇到独占一行的元素的时,它不会再跟在上一个元素的右边,而是在这个元素的下边从新的一行排布这个元素,并且这个新的一行只有这个元素,如果这个元素后还有元素,那么对不起,请在下一行排布.

html 复制代码

<span
  >央视网(cctv.com)新闻频道是面向全球,多语种,多终端的立体化新闻信息共享平台。以视听与互动为核心,24小时不间断提供最快捷,最权威,最全面,最丰富的新闻视听与互动服务,传播中国,了解世界。</span
>
<div>独占一行的元素类型</div>
<span
  >央视网(cctv.com)新闻频道是面向全球,多语种,多终端的立体化新闻信息共享平台。以视听与互动为核心,24小时不间断提供最快捷,最权威,最全面,最丰富的

那么,都哪些元素是独占一行的元素呢?

能不能修改一个元素,让它独占或不独占一行呢?

这里就要提到另外一个概念,元素的显示类型.

元素的显示类型

HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;

当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?

✓ 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;

比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;

比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;

而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;

◼ 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:

块级元素（block-level elements）: 独占父元素的一行

行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示

html 元素使用时的注意事项 --- html 元素的语义化

块级元素,inline-block 元素

一般情况下,可以包含其他元素(比如块级元素,行内级元素,inline-block元素)

特殊情况,p元素不能包含其他块级元素

行内级元素(比如a,span,strong等)

一般情况下,只能包含行内级元素

通过修改元素的显示类型,我们就决定这个元素在页面中如何排布.

css - display 属性

css 中有个display 属性,能修改元素的显示类型,有5个常用值.

block: 让元素显示为块级元素,即独占一行的元素.
inline:让元素显示为行内级元素.
inline-block: 让元素同时具备行内级,块级元素的特征.
none:隐藏元素
flex :使该元素的直接子元素,采用flex 布局,具体请参考链接:flex布局

实际上,之所以我们使用的html元素有些独占一行,有些不独占一行,也是因为浏览器为这些html 元素默认添加了 display 属性,具体可以查看链接:css 我要搞定你

元素占据的空间大小-盒子模型

请参考盒子模型

css 布局一:标准流布局