【CSS3】-08 盒模型之 display

最新推荐文章于 2021-09-21 15:51:31 发布

Nameless-Y

最新推荐文章于 2021-09-21 15:51:31 发布

阅读量112

点赞数

分类专栏： html5+css3 文章标签： css display

本文链接：https://blog.csdn.net/yang1111111112/article/details/113753221

版权

html5+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

使用 display:block 将内联元素转换为块级元素
使用 display:inline 将块状元素转换为内联元素
使用 display:inline-block 转为内联块元素
使用 display:none 使其作用的对象隐身

<!DOCTYPE html>
<!-- 盒模型 -->


<html>
    <head>
        <meta charset="UTF-8">
        <title>盒模型</title>

        <style>
            
            /* 使用 display:block 将内联元素 a 转换为块级元素 */
            a{
                display: block; 
                background-color: green;
            }

            /* 使用 display:inline 将块状元素转换为内联元素 */
            div,span{
                display: inline;
                background-color: pink;
            }

            /* 使用 display:inline-block 转为内联块元素  */
            box1{
                display: inline-block;
                width: 80px;
                /*在默认情况下宽度不起作用*/

                height: 100%;
                /*在默认情况下高度不起作用*/

                background: rgb(245, 220, 151);
                /*设置背景颜色为粉色*/

                text-align: center;
                /*设置文本居中显示*/
            }

            /* 使用 display:none 使其作用的对象隐身 */
            box2{
                display:none;
            }

        </style>

    </head> 

    <body>
    <p>
        <a>块级元素特点：</a>

    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

   2、元素的高度、宽度、行高以及顶和底边距都可设置。

    3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
    </p>

    <hr>

        内联元素特点：

        <div>1、和其他元素都在一行上；</div> 

        <span>2、元素的高度、宽度及顶部和底部边距不可设置；</span>

        <span>3、元素的宽度就是它包含的文字或图片的宽度，不可改变。</span> 

    <hr>
    内联块状元素（inline-block）:<br>
    就是同时具备内联元素、块状元素的特点，代码 display:inline-block 就是将元素设置为内联块状元素。<br>(css2.1新增)，img、input标签就是这种内联块状标签。
    <br>
   <box1>inline-block 元素特点：</box1> 

   <box1>1、和其他元素都在一行上；</box1> 

   <box1>2、元素的高度、宽度、行高以及顶和底边距都可设置。</box1> 

    <hr>
    这里有一行隐身了：<br>
    <box2>显示吗</box2>
    <hr>
       
    </body>
</html>

效果：