怎么区分块元素、行内元素以及行内块元素呢，以及他们之间怎么相互转换呢？

1、块元素

特点：

独占一行
可以对其设置 宽、高、内外边距
宽度默认为容器的100%
布局时，块元素可以包含块元素和行内元素

常见的块元素：
块元素和行内元素及其元素转换
注：

文字类的元素内不能使用块元素，例如：p、h1~h6.

2、行内元素

特点：

同行多个显示
宽、高直接设置无效，可以设置margin和padding的左右
默认宽度由内容撑开
布局时，行内元素一般不包含块级元素

常见的行内元素：
块元素和行内元素及其元素转换

注：

链接中不能再嵌套链接

3、行内块元素

同时具备块元素和行内元素的特点。
特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个
默认宽度由内容撑开
可以对其设置 宽、高、内外边距

行内块元素：img、input、td

4、相互转换

行内元素转换为块元素：display：block；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行转块</title>
</head>
<body>
    <!-- 行内元素转换为块元素 -->
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
</body>
</html>

块元素和行内元素及其元素转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行转块</title>
    <style>
        img {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 行内元素转换为块元素 -->
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
    <img src="../images/nature.jpg">
</body>
</html>

块元素和行内元素及其元素转换

块元素转换为行内元素：display：inline；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块转行</title>
</head>
<body>
    <!-- 块元素转换为行内元素 -->
    <p>块转行</p>
    <p>块转行</p>
    <p>块转行</p>
</body>
</html>

块元素和行内元素及其元素转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块转行</title>
    <style>
        p {
            display: inline;
        }
    </style>
</head>
<body>
    <!-- 块元素转换为行内元素 -->
    <p>块转行</p>
    <p>块转行</p>
    <p>块转行</p>
</body>
</html>

块元素和行内元素及其元素转换

行内元素转换为行内块元素：display：inline-block；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内转行内块</title>
    <style>
        span {
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 行内元素转换为行内块元素 -->
    <span>行内转行内块</span>
    <span>行内转行内块</span>
    <span>行内转行内块</span>
</body>
</html>

块元素和行内元素及其元素转换

加油，分享课堂笔记~

不当之处请大家及时指出，若有什么建议可以给我留言！
❤笔芯

标签 select, 元素, 转换