块元素和行内元素及其元素转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了块元素和行内元素及其元素转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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>