元素隐藏方式，宽高自适应，高度塌陷问题，全屏页面高度100%设置

元素隐藏方式

1.display：none 将元素彻底隐藏掉，不占据位置

2. visibility: hidden; 只是元素看不见了 占据位置

3.调透明度, 只是元素看不见了 占据位置

                opacity（0-1）=======盒子里面的内容也是会跟着一起透明的

                rgba()=====只能让背景透明，里面的内容不是跟着透明

宽度自适应

父元素不设置宽度 ,不写就相当于写了一个width:auto;为默认值

（如果没有子元素撑开，那就是 0）

min-width:最小宽。哪怕这个区域里面没有内容或者内容比较少也要保证这个区域是存在的。

块级元素宽度不写默认和父元素保持同宽

子元素跟随父元素 让子元素写width：100%

width:auto 和 width:100% 区别

       width: auto; 或者宽度不写，指的是：内容区+内间距+边框线的总宽度是和父亲一致 

       width:100%，指的只是内容区的宽，如果加了 内间距和边框线，是会超出父盒子的

高度自适应

父元素不设置高度 ,不写就相当于写了一个height:auto;为默认值 

（如果没有子元素撑开，那就是 0）

min-height:最小高。哪怕这个区域里面没有内容或者内容比较少也要保证这个区域是存在的。 可能会产生高度塌陷

子元素跟随父元素 让子元素写height：100%

高度塌陷问题

高度塌陷指的就是子元素浮动了不占据位置了导致撑不开父元素了，父元素没有高了。

方式一：overflow:hidden: 好处：简单 弊端：会把超出的元素隐藏掉

方式二：在高度塌陷的盒子的末尾添加一个空的div，在这个div上面写清除浮动的代码。 弊端：创建了不必要的空标签，造成html代码冗余

方式三：万能清除法

.clear-fix::after{ content: ""; display: block; height: 0; overflow: hidden; visibility: hidden; clear: both; }

用法：哪个盒子塌陷了，就给哪个盒子上面写这个类名即可

全屏页面高度100% 设置

一定要把html和body的高度设置成100%  html,body{ height:100%; }