非零基础自学前端最后一遍一 HTML+CSS 9 CSS继承-层叠-元素类型 9.4 display的值

待我称王封你为后i 2024-03-25 19:18 51阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  9 CSS继承-层叠-元素类型
         *   *  9.4 display的值
             *   *  9.4.1 CSS属性 - display
                 *  9.4.2 display值的特性(非常重要)

![在这里插入图片描述][a8204d1f57ba47deadd5ef51556f63d3.png_pic_center]

#### 一 HTML+CSS ####

#### 9 CSS继承-层叠-元素类型 ####

##### 9.4 display的值 #####

###### 9.4.1 CSS属性 - display ######

*  CSS中有个display属性，能修改元素的显示类型，有4个常用值
    
     *  block：让元素显示为块级元素
     *  inline：让元素显示为行内级元素
     *  inline-block：让元素同时具备行内级、块级元素的特征
     *  none：隐藏元素
 *  事实上display还有其他的值, 比如flex, 后续会专门学习;

![在这里插入图片描述][2beb00bb8caa41ef89f5534843c7407c.png_pic_center]

默认div 占了一行，span 按照内容

给div 加上宽高

![在这里插入图片描述][4c3e458c6ec547b6bf240b063acbb17d.png_pic_center]

它依然是独占一行

如果给span 加上宽高

![在这里插入图片描述][bbfdb5f731ac4af5a55a39cce626d8cb.png_pic_center]

可以看到，没有变化，只由内容决定

试试图片

![在这里插入图片描述][b3a5a47f4c05497aa6fe3fa63e2cc80c.png_pic_center]

可以看到，虽然img 作为一个行内级，但是设置宽高对其生效，

这是因为img 是一个行内替换元素，所以行内级元素设置宽高不生效是针对于那些非替换元素而言的

###### 9.4.2 display值的特性(非常重要) ######

*  block元素:
    
     *  独占父元素的一行
     *  可以随意设置宽高
     *  高度默认由内容决定
 *  inline-block元素:
    
     *  跟其他行内级元素在同一行显示
     *  可以随意设置宽高
     *  可以这样理解
        
         *  对外来说，它是一个行内级元素
         *  对内来说，它是一个块级元素
 *  inline:
    
     *  跟其他行内级元素在同一行显示;
     *  不可以随意设置宽高; 【注意是非替换】
     *  宽高都由内容决定;

![在这里插入图片描述][34bbb0f7fcf448c98dc359ac540aac2d.png_pic_center]

[a8204d1f57ba47deadd5ef51556f63d3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/53a20fa3f1714c53be3dc91cba0563bc.png
[2beb00bb8caa41ef89f5534843c7407c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fa9551a36e0e4153ae81f7add50a5b39.png
[4c3e458c6ec547b6bf240b063acbb17d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/21795df157734370950d4f6a5222318b.png
[bbfdb5f731ac4af5a55a39cce626d8cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d4501c0ed49146848e9768377c9e82fe.png
[b3a5a47f4c05497aa6fe3fa63e2cc80c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2aaabb1db2c94b4b935d0cbab38850b2.png
[34bbb0f7fcf448c98dc359ac540aac2d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0f6a13d4ee2349f988a6c79235712a90.png