CSS标准文档流

落日映苍穹つ 2023-01-07 12:27 128阅读 0赞

#### 标准文档流 ####

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

HTML就是一种标准文档流文件  
HTML中的标准文档流特点通过两种方式体现：

*  微观现象
 *  元素等级

#### 标准文档流的特点 ####

##### 微观现象 #####

*  空白折叠现象
 *  文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果

<span> 这是一段文字 </span>
    <a href=""> 超链接 </a>
    <input type="text" name="" id="">
    <img src="1.jpg" alt="">

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

/*设置一个 div 框 把内容放在一个固定的宽度中以便观察*/
        div {
        width: 200px;
        border: 1px solid red;
    }

##### 元素等级 #####

*  在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。
 *  块级元素：大部分容器级标签包括 p 标签都是块级元素，比如 `<div>` 、`<h1>`等
 *  行内元素：大部分的文本级标签，比如 `<span>`、`<a>`、`<b>` 等
 *  行内块元素：比如 `<img>`、`<input>` 等  
    各种等级的元素有自己的加载特点

**块级元素**

*  块级元素可以设置宽高，在浏览器中正常加载
 *  块级元素必须独占一行，不能与其他任何标签并排一行
 *  块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度

**行内元素**

*  行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
 *  行内元素可以与其他的行内或行内块元素并排一行显示
 *  行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

div {
        width: 200px;
        border: 1px solid red;
    }
    span {
        width: 200px;
        height: 50PX;
        background-color: salmon;
        border: 2PX solid red;
        padding: 10px;
        margin: 10px;
    }

**行内块元素**

*  行内块元素可以设置宽度和高度
 *  行内块元素可以与其他的行内或行内块并排一行显示
 *  行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开
 *  行内块依旧具有标准流的微观性质，例如空白折叠现象

.imgl {
        width: 50px;
        height: 50px;
    }
    <input type="button" value="">
    <input type="button" value="普通按钮">
    <img src="1.jpg" alt="" class="imgl">