CSS核心样式

标准文档流

• 理解标准文档流特点

  • 抛出疑问：在我们遇到的HTML元素中，有的标签元素如<div>、<p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么？

• 标准文档流

  • 含义
    • 元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。
    • 前面的内容发生了变化，后面的内容位置也会随着发生变化。
    • HTML就是一种标准文档流文件
    • HTML中的标准文档流特点通过两种方式体现

      • 微观现象

        1. 空白折叠现象：发生在文字或类似文字的元素身上。

         <!-- 换行在浏览器中显示时，压缩成一个空格 -->
          <span>这是一小段文字</span>
          <a href="#">超链接</a>
          <input type="text">
        

        

        2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
        3. 自动换行，元素内一行内容写满元素的width时会自动进行换行。

      • 元素等级（三）

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

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

        2. 行内元素：大部分的文本级标签，比如<span>、<a>、<b>

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

        3. 行内块元素: 比如<img>、<input>等

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