一、元素基本类型

1、行内元素

inline-level box即行内元素 (opens new window)

# 行内元素
<tt>、<button>, <input>, <label>, <select>, <textarea>
<strong>、<i>、<small>、<sub>、<sup>、<br> ……

<a>、<span>、<img> 🎈

2、块级元素

block-level box即块级元素 (opens new window)。

# 块级元素
<address>、<article>、<aside>、<footer>、<header>
<dd>、<dl>、<ol>、<ul>、<section>、<table>、<form>、
<hr>、<blockquote>、<pre>

<div>、<p>、<h1-h6> 🎈

4、状态转换

  元素的类型状态不是绝对的，我们可以通过下面的 display 属性让元素拥有其他元素类型的特性：

• display 属性的说明如下：

属性值	说明	应用
block	元素以块级方式展示。	独占一行
inline	元素以内联方式展示。	在一行内与其他元素并排排列
inline-block	元素以内联块的方式展示。	可以让行内元素，拥有设置宽高等块级元素的特性 （例如导航栏中<a>标签的使用）
none	隐藏元素。

二、元素对齐方式 🎯

1、text-align（水平）

  在块级元素中的行内内容对齐方式，类似的我们可以关注一下 text-align (opens new window) 属性

扩展：单行文本两端对齐

• 只对块级元素或行内块元素生效（行内元素（如 span）默认不支持此属性）
• 对单行文本不会产生效果，对最后一行无效。

如果我们要在单行中使用text-align: justify ，可以这样使用

<div>
  <ul>
    <li>
      <p>地址</p>
      <p>：深圳市龙岗区坂田华为总部办公楼</p>
    </li>
    <li>
      <p>监督邮箱</p>
      <p>：[email protected]</p>
    </li>
  </ul>
</div>

<style>
  li {
    display: flex;
  }
  li > p:first-child {
    width: 90px;
    text-align: justify;
    /* 方案1 */
    text-align-last: justify;
  }

  /* 方案2 */
  /* li > p:first-child::after {
    content: '';
    width: 100%;
    display: inline-block;
  } */
</style>

<div>
  <!--  -->
  <div class="btn-box">
    <button>查询</button>
    <button>重置</button>
  </div>
</div>

<style>
  .btn-box {
    text-align: right;

    /* 思考？：float: right */
    /* float: right; */
  }
</style>

2、vertical-align（垂直）

  vertical-align 属性可被用于两种环境：

vertical-align 只对 inline、inline-block 和表格单元格元素生效

• 使行内元素盒模型与其行内元素容器垂直对齐（例如：图片和文本）
• 表格单元内容垂直对齐

<div>
  <div class="logo-box">
    <!-- 行内元素 -->
    <img src="img/logo.jpg" />
    <span>任先生</span>
  </div>
</div>

<style lang="scss">
  .logo-box {
    height: 100px;
    /* text-decoration: underline overline; */

    img {
      height: 100%;
      vertical-align: middle; /* 取值：长度值、百分比、关键字或者是基准线值（如 sub 和 super） */
    }
  }
</style>

三、元素类型解读

1、宽高角度

  行内元素的宽度和高度通常由其内容决定，而块级元素可以通过 CSS 设置其宽度和高度

行高

  默认情况下，行高通常是字体大小的 1.2 到 1.5 倍之间，具体取决于浏览器的实现。

  如果不设置行高，则文本的行高将随着字体大小的变化而自动调整，这可能会导致文本的布局发生变化。

.demo {
  line-height: 1;
}

2、盒子角度 ✨

  块级元素通常可以容纳其他块级元素或行内元素，而行内元素则只能容纳其他行内元素或文本节点。

  块级元素的 padding 和 margin 会影响到其周围的空白区域，而行内元素的 padding 和 margin 则只会影响元素自身。

1、思考下面的这个例子是不是存在 margin 塌陷？
2、尝试观察 padding、margin 对行内元素影响的局限性

<style>
  .box1 {
    background-color: yellow;
    padding: 10px;
    margin: 10px; /* 注释掉试试看 👀 */
  }
  .box2 {
    background-color: yellow;
    padding: 10px; /* 注释掉试试看 👀 */
    margin: 10px; /* 注释掉试试看 👀 */
    display: inline;
  }
</style>

<div class="box1">这是一个块级元素</div>
<span class="box2">这是一个行内元素</span>

4、浮动和定位

• 块级元素可以浮动或者通过 CSS 定位到页面的任何位置，而行内元素则不可以。

浮动

  使用 float 时（以 float:right 为例），建议将浮动元素放置在一个有限制的父容器元素中：

• 父元素必须有宽度，否则子元素会会尽可能地向右浮动，直到遇到父元素的边界或其他元素为止
• 如果没有父元素，意味着没有容器可以限制浮动元素的宽度，它可能会影响到其他元素的布局。

定位

  使用position时，建议将定位元素放置在一个有 position 的父容器元素中：

• 父元素建议使用 position，否则子元素会相对于文档流中最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（浏览器窗口的可视区域）进行定位
• 如果父元素没有定位，那么子元素的定位可能会受到其他元素的影响，从而导致布局的混乱。

  为了让行内元素支持 ✍ 浮动 和 定位，我们还需要将它的 display 属性设置为 inline-block。

关于 line-height

① line-height 大小问题

  在谷歌浏览器中，Microsoft YaHei 字体的默认大小是 14 像素，而一般情况下，Microsoft YaHei 字体的默认 line-height 是 1.5 （即：14*1.5 = 21px）。

同理，如果我们设置另外一种常见的中文字体 SimSun，可以计算出他的默认 line-height 是 18px（即：12*1.5 = 18px）

body {
  font-family: 'SimSun';
}

  但是谷歌浏览器中采用 🚩 的是: font-size 默认为 16px、line-height 默认采用字体原始计算的大小

② strut 空白节点

img 标签不用设置 line-block，img 自身就是一个内联元素

<style>
  .box {
    background-color: skyblue;
  }
  img {
    width: 200px;
    /* 解决strut 空白节点问题 */
    /* vertical-align: middle; */
  }
  span {
    display: inline-block;
    background-color: white;
  }
</style>

<div class="box">
  <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
  <span>测试文字</span>
</div>

<style>
  body {
    margin: 20px; /* 谷歌浏览器默认body的margin值为8px */
    font-size: 20px;
    line-height: 20px;
  }
  div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
  }

  .box1 {
    background-color: yellow;
    float: right;
    display: inline-block;
  }
  .box2 {
    background-color: green;
    position: absolute;
    top: 50px;
    left: 50px;
    display: inline-block;
  }
</style>

<div>
  <span class="box1">这是一个行内元素</span>
  <span class="box2">这是另一个行内元素</span>
</div>