display属性详解

最新推荐文章于 2024-06-05 00:48:32 发布

木森林哥哥

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量6.1w

点赞数 144

分类专栏： Html/CSS 文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_47021982/article/details/110205540

版权

Html/CSS 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

在这里插入图片描述
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。

display常用属性值

1. none：隐藏对象

1.1 不用none前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>none</title>
    <style>
        .box>div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* display: none; */
            
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }

        .bottom {
            width: 1200px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div class="box1"></div>
        </div>
        <div></div>
        <div></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

显示：
在这里插入图片描述

1.2 用了none的时候：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>none</title>
    <style>
        .box>div {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;           
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }

        .bottom {
            width: 1200px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div class="box1"></div>
        </div>
        <div></div>
        <div></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

显示：
在这里插入图片描述

2. inline：指定对象为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline</title>
</head>
<body>
    <style>
        .box>div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* float: left; */
            display: inline;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>好好学习</div>
        <div>好好学习</div>
        <div>好好学习</div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

3. block：指定对象为块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>block</title>
</head>
<body>
    <style>
        .box>div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* float: left; */
            display: block;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

显示：

在这里插入图片描述

4. inline-block：指定对象为行内块元素

即在同一行显示，又可以设置宽高，margin和padding可以设置。注意：识别代码之间的空白。意思就是说，在一行排列的时候盒子与盒子之间会出现空白空隙。

空白解决办法：

把下面的div挨着写，不留空格，空白就会消失。
把空格部分注释起来就不会有空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline-block</title>
</head>
<body>
    <style>
        .box>div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* float: left; */
            display: inline-block;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

5. table-cell：指定对象为表格单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table-cell</title>
</head>
<body>
    <style>
        .box>div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* float: left; */
            display: table-cell;
        }

        .box>div:nth-child(2) {
            background: hotpink;
        }

        .box>div:last-child {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

6. flex：弹性盒

它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建"自适应"浏览器窗口的流动布局。

6.1 未使用flex前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .box {
            width: 100%;
            height: 600px;
            background-color: grey;
            /* display: flex; */
        }

        .box>div {
            width: 33.33%;
            height: 600px;
        }

        .item1 {
            background-color: pink;
        }

        .item2 {
            background-color: orange;
        }

        .item3 {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

6.2 使用flex后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .box {
            width: 100%;
            height: 600px;
            background-color: grey;
            display: flex;
        }

        .box>div {
            width: 33.33%;
            height: 600px;
        }

        .item1 {
            background-color: pink;
        }

        .item2 {
            background-color: orange;
        }

        .item3 {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

7. inline转块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline转块级元素</title>
</head>
<body>
    <style>
        span {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
        }

        .box1 {
            background-color: green;
        }

        .box2 {
            background-color: yellow;
        }

        .box3 {
            background-color: red;
        }
    </style>
</head>
<body>
    <span class="box1">好好学习</span>
    <span class="box2">好好学习</span>
    <span class="box3">好好学习</span>
</body>
</html>

显示：
在这里插入图片描述

--- Ending ---

木森林哥哥

关注

144
点赞
踩
994

收藏

觉得还不错? 一键收藏
8
评论
display属性详解

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。display常用属性值1. none：隐藏对象2. inline：指定对象为行内元素3. block：指定对象为块元素4. inline-bl.
复制链接

扫一扫