类型常见元素
inline<span> <a> <em> <i> <strong> …
block<div> <ul> <li> <p> <h1> <table> …
inline-block<img> <button> <input> …

行内元素 inline

行内元素特点：

  1. 不会独占一行，相邻的行内元素会同行排列，直到一行排不下才会换行，宽度随元素的内容而变化；
  2. 设置宽高无效
  3. 设置外边距（margin）内边距（padding）仅左右有效 上下无效（设置背景颜色可以看到有效但是是不占空间的）
  4. 可以设置行高（line-height）
  5. 行内元素只能容纳文本或则其他行内元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            span{
                padding: 20px;
                margin: 20px;
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <span style="background: chartreuse">span1</span>
        <span style="background: aquamarine">span2</span>
        <span style="background: cadetblue">span3</span>
        <span style="background: brown">span4</span>
        <span style="background: lawngreen">span5</span>
        <div style="height: 20px;background: red"></div>
    </body>
    </html>

块级元素

  1. 每个块级元素都是独占一行
  2. 可以设置宽高
  3. margin、padding都是可以控制的
  4. 多个块级元素写在一起，默认从上到下排列
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{margin: 0}
            div{
                padding: 20px;
                margin: 20px;
                width: 100px;
                height: 100px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div style="background: chartreuse">div1</div>
        <div style="background: aquamarine">div2</div>
        <div style="background: cadetblue">div3</div>
        <div style="background: brown">div4</div>
        <div style="background: lawngreen">div5</div>
        <div style="height: 20px;background: red;width: calc(100% - 40px);"></div>
    </body>
    </html>

行内块元素

  1. 高度、行高、margin、padding都可以控制
  2. 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙

三者转换

  • display:inline 将元素转为行内元素
  • display:block 将元素转为块级元素
  • display:inline-block 将元素转为行内块元素