CSS中 dispaly属性详解

最新推荐文章于 2024-05-17 00:30:00 发布

楠木大哥

最新推荐文章于 2024-05-17 00:30:00 发布

阅读量2.7k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/nanmudage/article/details/118628704

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 综述

display 所有可能取值
如上展示了display 属性的所有取值，其中基础类型有 block ,inline,table 格式。我们可以使用盒模型的方式来理解:

盒模型分为两种：块级盒子和内联盒子。块级盒子负责结构，内联盒子负责内容。
块级盒子：1.独自占据整一行 2.可以设置宽高（默认是父标签的100%）
内联盒子：1.所有的内联元素在一行内显示 2.不可以设置宽高

组合类型包有，inline-block, list-item, inline-table, table-row 等。我们可以将其理解为多个盒子类型的叠加。

inline-block，我们可以认为其是内层一个block盒子外层套了一个inline盒子，这样就不难理解，因为外层盒子是内联类型可以在一行内显示，由于内层是一个块级盒子所以可以设置宽度和高度，而外层内联盒子的宽度和高度由其内层内容的宽度和高度来确定，所以 inline-block 类型既具有内联盒子特性又具有块级盒子特性。
list-item 在原有块级盒子的基础之上添加了一个标记盒子，专门用来放置圆点、数字等项目符号。

2. 示例

2.1 display:list-item

<html>

<head>
    <title>myFirstPage</title>
    <style>
        .list {
            display: block;
        }
        
        p {
            display: list-item;
            background-color: red;
            width: 500px;
            list-style-type: decimal; /* 设定标记盒子展示内容的样式 */
            list-style-position: inside; /* 设定标记盒子的位置 */
        }
    </style>
</head>

<body>
    <div class="list">
        <p>fist</p>
        <p>second</p>
        <p>thrid</p>
    </div>
</body>

</html>

结果：

代码结果

我们可以看到，list-item 主体部分是一个块级元素。

2.1 display:table

<html>

<head>
    <title>myFirstPage</title>
    <style>
        .table {
            display: table;
            border: 1px solid black;
        }
        
        .table .row {
            display: table-row;
        }
        
        .table .row>p {
            display: table-cell;
            width: 100;
            background-color: seashell;
            border: 1px solid black;
        }
        
        .caption {
            display: table-caption;
        }
        
        .footer {
            display: table-footer-group;
        }
    </style>
</head>

<body>
    <div class="caption">This is a table caption.</div>
    <div class="table">
        <div class="row">
            <p>fist</p>
            <p>second</p>
            <p>thrid</p>
        </div>
        <div class="row">
            <p>fist</p>
            <p>second</p>
            <p>thrid</p>
        </div>
    </div>
    <span class="fotter">This is a table fotter.</span>
</body>

</html>