display属性详解

忘是亡心i 2022-12-24 05:00 109阅读 0赞

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

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

### display常用属性值 ###

*   *   *  1. none：隐藏对象
         *   *  1.1 不用none前：
             *  1.2 用了none的时候：
         *  2. inline： 指定对象为行内元素
         *  3. block： 指定对象为块元素
         *  4. inline-block：指定对象为行内块元素
         *  5. table-cell：指定对象为表格单元格
         *  6. flex：弹性盒
         *   *  6.1 未使用flex前：
             *  6.2 使用flex后：
         *  7. inline转块级元素

### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]

#### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]

--------------------

### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]

--------------------

### 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>

显示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 4]

--------------------

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

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

**空白解决办法：**

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

<!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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 5]

--------------------

### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 6]

--------------------

### 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>

显示：  
![在这里插入图片描述][20201126213803689.gif_pic_left]

#### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 7]

--------------------

### 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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 8]

\--- Ending ---

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/df47df5e6b9842b2852f66f9f81cea30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 1]: https://img-blog.csdnimg.cn/20201126213030983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 2]: https://img-blog.csdnimg.cn/2020112621322663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 3]: https://img-blog.csdnimg.cn/2020112621331940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 4]: https://img-blog.csdnimg.cn/20201126213451306.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 5]: https://img-blog.csdnimg.cn/20201126213604648.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 6]: https://img-blog.csdnimg.cn/20201126213658496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[20201126213803689.gif_pic_left]: https://img-blog.csdnimg.cn/20201126213803689.gif#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 7]: https://img-blog.csdnimg.cn/20201126213844730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70_pic_left 8]: https://img-blog.csdnimg.cn/20201126214020827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70#pic_left