码迷,mamicode.com
首页 > Web开发 > 详细

HTML中通过CSS方式隐藏元素方法汇总

时间:2021-01-14 11:17:34      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:city   关心   容器   存在   常用   hit   透明度   定位   tran   

1 通过style属性中的   display : none    { 这种是最常用方式之一 }

        ---这两种方式的区别是:  display 设置为 none之后, 该元素不占用文档流

                   visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

2 通过style属性中的   visibility : hidden  { 这种也是最常用的方式之一 }

 

3 通过相对定位移动当前元素到屏幕左侧

1 div{
2     position: relative;
3     left: -100%
4 }
5 但是要记住:
6     1 元素仍然占用标准文档流
7     2 百分比是相对父元素的宽度和高度的, 并不是相对可视区宽度偏移的

 

4 通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.div{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
注意点:    此时子元素仍然占用文档流, 只是我们隐藏了超出部分

 

5 设置元素的宽度和高度为0, 元素直接消失

.div{
    width: 0px;
    height: 0px;
}
注意点:    1 标准文档流是相对于一个容器来说的, 每一个容器有自己的文档流, 我们只关心当前元素所在的文档流
          2 高度和宽度都设置为0后, 我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在, 这个容器也存在一个标准文档流, 供其子元素使用; 
       其子元素不会消失, 仍然会正常显示, 但是不会占用其父元素所在的标准文档流
       ( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )

 

6 设置元素透明度为 0

div{
    opacity: 0;
}
这个感觉有点傻乎乎的, 掩耳盗铃, 不过这个经常用来做动画变换

 

 7 旋转元素, 使与当前页面垂直

div{
    transform: rotateX(90deg);
}
注意点: 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此

 

 

8 缩小元素尺寸到自身的0倍

div{
    transform: scale(0);
}
注意点: 同上

 

9 其它 transform 使其假不可见

translateX()
translateY()
skew()

 

HTML中通过CSS方式隐藏元素方法汇总

标签:city   关心   容器   存在   常用   hit   透明度   定位   tran   

原文地址:https://www.cnblogs.com/longxingzhe/p/14273757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!