非零基础自学前端最后一遍一 HTML+CSS 9 CSS继承-层叠-元素类型 9.6 HTML元素隐藏的四种方法

Love The Way You Lie 2024-03-25 19:19 39阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  9 CSS继承-层叠-元素类型
         *   *  9.6 HTML元素隐藏的四种方法
             *   *  9.6.1 元素隐藏方法
                 *  9.6.2 CSS属性 - overflow

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

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

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

##### 9.6 HTML元素隐藏的四种方法 #####

###### 9.6.1 元素隐藏方法 ######

*  方法一: display设置为none
    
     *  元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);

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

*  方法二: visibility设置为hidden
    
     *  设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
     *  默认为visible, 元素是可见的;

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

*  方法三: rgba设置颜色, 将a的值设置为0
    
     *  rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;

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

*  方法四: opacity设置透明度, 设置为0
    
     *  设置整个元素的透明度, 会影响所有的子元素;

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

###### 9.6.2 CSS属性 - overflow ######

*  overflow用于控制内容溢出时的行为
    
     *  visible：溢出的内容照样可见
        
        ![在这里插入图片描述][37a78bd3b0a24db09cf893c69243be7a.png_pic_center]
     *  hidden：溢出的内容直接裁剪
        
        ![在这里插入图片描述][6b686836376144788846a11cb62da2b2.png_pic_center]
     *  scroll：溢出的内容被裁剪，但可以通过滚动机制查看
        
         *  会一直显示滚动条区域，滚动条区域占用的空间属于width、height
        
        ![在这里插入图片描述][9fbf13acd1ca4cb285ad6425c878b89e.png_pic_center]
     *  auto：自动根据内容是否溢出来决定是否提供滚动机制
        
        ![在这里插入图片描述][caa62f3eb0a94c038fae868c908d634a.png_pic_center]

[0126a70ab6894a6a84cde2ae47130ade.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4e92c39a8e474558ac9767214f3bd842.png
[29e7082673594d679255af2231fd962e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dd3b82e198c942dd9680a622451f93a4.png
[5f75229b01bc47838e0aec84c3b93200.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/38ac7731aae9400ea40221e3eac7fbc8.png
[3eecef769ea84b33ae0fc5c1db4385f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/95dae9ee05664b058e9945d601ca9534.png
[35a83943cb0d4aae891e4c708e05eb3e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1209c43beca449d6989381dac2a03d14.png
[37a78bd3b0a24db09cf893c69243be7a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/33617f7dc853433bb5a4de0b1614e822.png
[6b686836376144788846a11cb62da2b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/317e916cef9f40c18bf81f542044e495.png
[9fbf13acd1ca4cb285ad6425c878b89e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8d7d5a72cc374a3a8abda79bf5573354.png
[caa62f3eb0a94c038fae868c908d634a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/59733b21b848433abc6a410f900b935e.png