CSS常用样式 - 标准文档流 - 《前端学习笔记》

标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

①空白折叠现象。

②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。

③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。

常见的加载级别：块级元素、行内元素、行内块元素等

块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。

行内元素：大部分的文本级标签，比如 、<a>、 等。

行内块元素：比如 <img>、<input> 等。

各种等级的元素有自己的加载特点。

a、设置宽高，在浏览器中正常加载

b、必须独占一行，不能与其他任何标签并排一行。

c、如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度

a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。

b、行内元素可以与其他的行内或行内块元素并排一行显示。

c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

a、行内块元素可以设置宽度和高度。

b、行内块元素可以与其他的行内或行内块并排一行显示。

c、行内块元素如果不设置宽高，要么以原始尺寸加载，要么被内容自动撑开。

d、行内块依旧具有标准流的微观性质，例如空白折叠现象。

通过 display 属性更改一个标签的显示模式

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

block 砖、块的意思，表示元素要以块级元素模式加载，具备块级特点

inline 行内的意思，表示元素要以行内元素模式加载，具备行内特点

inline-block 行内块的意思，表示标签要以行内块模式加载，具备行内块特点

none 没有的意思，表示标签及内部内容直接隐藏，让出原有标准流的位置

隐藏的元素要想再次显示，可以将 display 的属性值设置为 block。

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。