宽高自适应

一、1..宽高自适应：就是元素的大小能够根据窗口或子元素自动调整。
1）宽度自适应：块级元素宽度设置为100%或者不设置情况下，默认为父元素的宽度 。
2）高度自适应：不设置父元素的高度或者设置height：auto，父元素的高度随着子元素而变化，即父元素的高度由子元素而撑开。（高度自适应主要用在内容不确定的情况下使用）
3）元素高度自适应窗口：html body 的高度在默认的情况下，height=0；如果要设置子元素的高度自适应窗口，前提要设置html，body为100%。
4）浮动之后高度塌陷：（记住设置浮动，必须要设置父元素的高度）
如果给父元素设置高度，不能达到高度自适应;（面试）
解决方法：
a.给父元素设置overflow：hidden。（缺点：会把一些元素隐藏）
b.在浮动元素的下方添加一个空的div，并且给这个方法添加（div{clear：both；height：0；overflow：hidden}）
缺点：占内存，多了很多不必要的标签，性能下降。
c.万能清除浮动法：（只要有浮动就给父元素添加清除浮动法，意思就是在不设置父元素高的情况下，会有父元素高度塌陷，则要清除浮动）
选择符（父元素的选择符）::after{
                        content:" ";
                        clear:both;
                        display:block;
                        height:0;
                        overflow:hidden;
                        visibility:hidden;
                    }

2.自适应的优点：元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同的设备、不同的窗口和不同的分辨率下显示
二、  隐藏元素的区别：（隐藏元素的三种方式：）

display：none；隐藏之后不占据原来的位置；

visibility：hidden；隐藏元素，隐藏之后还占据原来的位置（视觉上看不见）；

opacity：0；表示元素的透明度，元素隐藏后占据原来的位置。