前端学习019---CSS---元素显示模式-CSDN博客

本文链接：https://blog.csdn.net/ketemstion/article/details/120594709

元素显示模式

什么是元素的显示模式
元素显示模式的分类
元素显示模式的转换

2.1 元素的显示模式

在这里插入图片描述 HTML元素一般分为块元素和行内元素两种类型。

2.2 块元素

在这里插入图片描述

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>你好</div>


    <p>
        欢迎你
    </p>
</body>

在这里插入图片描述

2.3 行内元素

在这里插入图片描述

 <style>
        span {
            background-color: pink;
            width: 200px;
            height: 200pxs;
        }
    </style>
</head>

<body>
    <span>1111</span><strong>2222</strong>
    <span>3333</span><strong>4444</strong>
</body>

在这里插入图片描述

2.4 行内块元素

在这里插入图片描述

  <style>
        input {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

在这里插入图片描述

2.5 元素显示模式总结

在这里插入图片描述

2.6 元素显示模式转换

增加链接的触发范围。

在这里插入图片描述

  <style>
        a {
            /* 把行内元素a转换为 块级元素 */
            display: block;
            background-color: pink;
        }

        div {
            /* 把块级元素div转为 行内元素 */
            display: inline;
            background-color: plum;
        }

        span {
            /* 把行内元素转换为行内块元素 */
            display: inline-block;
            background-color: powderblue;
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <a href="#">我是行内元素</a>
    <div>我是块级元素。</div>
    <span>行内元素转为行内块元素</span>

</body>