CSS教程（六）- 元素显示模式_css的元素显示模式-优快云博客

分类
1. 块元素
2. 行内元素
3. 行内块元素

1. 块元素

常见块元素
- 例 : <body> <div> <h1~h6> <p> <ul> <ol> <li> <form> <table>(默认尺寸由内容决定)
特点：
- 独占一行，不与元素共行；
- 可以手动设置宽高
- 默认宽度与与父元素保持一致（100%）
- 是一个容器盒子，可以放行内元素或块元素
注意
- 文字类的元素内不能使用块级元素
- <p> 标签主要用于存放文字，不能放元素，特别是不能放 <div>
- <h1> ~ <h6>等文字类块元素标签，不能放其他的块元素

2. 行内元素

常见行内元素
- 也称为内联元素，可以与其他元素共行显示
  - 例 : <span> <label> <b> <strong> <i> <s> <u> <sub> <sup> <a> <em>
特点
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意
- 链接里面不能再放链接
- 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

3. 行内块元素

介绍
- 可以与其他元素共行显示，又能手动调整宽高，具有块元素与行内元素的特点。
  - 例 : <img> <input> <button> <td> (表单控件)
特点
- 和相邻行内元素（行内块）在一行上，但它们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）。

总结

4. 嵌套原则

块元素中可以嵌套任意类型的元素
- p元素除外，段落标签只能嵌套行内元素，不能嵌套块元素
行内元素中最好只嵌套行内或行内块元素

5. 模式转换

介绍
- 特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
转换方式
- 转为 块元素：display: block;
- 转为 行内元素：display: inline;
- 转为 行内块元素：display: inline-block;

6. 示例

1 元素默认显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>块元素</title>
    <style>
      div, h2, p {
        background-color: aqua;
      }

      body > .two{
        width: 200px;
        height: 100px;
        background-color: blue;
        text-align: center;    /* 水平居中 */
        line-height: 100px;    /* 垂直居中 */
      }

      /* 行内元素 */
      span, a{
        width: 80px;
        height: 50px;
        color:white;
        background-color: blue;
      }

      img, input{
        width: 100px;
        height: 30;
      }

    </style>
  </head>
  <body>
    <!-- 行内块元素：image input -->
    <img src="man.png" alt="">
    <input type="text">

    <!-- 行内元素：a span -->
    <a href="https://www.jd.com">京东</a>
    <span>是一家大型的电商平台</span>

    <!-- 块级元素 -->
    <div>1</div>
    <h2 class="two">2</h2>
    <p>3</p>

    <!-- 不推荐此写法 -->
    <p>
        <div>4</div>
    </p>

    <h2>
        <p>5</p>
    </h2>
  </body>
</html>

在这里插入图片描述

2 元素显示模式转换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素显示模式转换</title>
    <style>
      /* 行内 -> 块级： display: block; */
      span {
        width: 100px;
        height: 50px;
        background-color: gold;
        display: block;
        text-align: center;
      }

      /* 行内块 -> 块级：独占一行 */
      input {
        display: block;
        border-radius: 10px;
      }

      /* 块级 -> 行内块 display: inline-block; */
      ul li {
        background-color: red;
        list-style-type: none;
        display: inline-block;
        width: 100px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <!-- 行内/行内块 -> 块级 -->
    <span>HTML</span>

    <input type="text" placeholder="请输入" />
    <strong>CSS</strong>

    <ul>
      <li>Python</li>
      <li>C</li>
      <li>C++</li>
    </ul>
  </body>
</html>

在这里插入图片描述