高度自适应

1、相对窗口自适应       html,body{height:100%;}    （全屏显示的页面必须要给 html,body设置高度100%）
      
 注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)

2、相对元素或者内容自适应：
   1）非浮动元素的父元素高度自适应
           实现方法：
           1、不设置高度，或者高度设置成 ：  height:auto；
           2、通过最小高度实现高度自适应 ：  min-height:300px;_height:300px;
           3、给需要高度自适应的元素添加这些属性：min-height:value;  height:auto!important;height:value;

           兼容IE6的写法：
           /*_height:300px;*/  /* “_”  叫做下划线过滤器，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 */

           height:auto !important;/* 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性 ；!important; 对于IE6来说，是无效的，IE6不支              持*/
           height:300px;/* 专门让IE6识别的 */

 

           过滤器："_"  叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的。
   

      

 

            

            min-width:       最小宽度
            max-width：    最大宽度
            min-height：   最小高度
            max-height：  最大高度

            注：这组属性在IE6浏览器里是不支持的；

 

            padding和margin显示百分比显示值得时候，他的参照物是根据窗口的宽度来显示的。

            padding-top/bottom  ;margin-top/bottom; 在设置百分比的时候，百分比大小显示的参照物是窗口宽度（会根据窗口宽度显示百分比的值。）
 

 

   2）浮动元素的父元素高度自适应

       注：如果想实现元素高度自适应（相对元素或者是内容）：

        1、高度能不能设置成固定的值？？

        2、高度不能固定，那该怎么设置呢？？

  

   说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；
   
   怎么去解决？（只要解决高度他显得问题，父元素就能实现高度自适应了）

         1、可以个固定高度去解决解决高度塌陷问题，
    弊端：但是不能让元素高度自适应了 。
       
          2、overflow：hidden;   解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）   弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；
  
          3、在浮动元素的下方添加一个空元素，并且给他设置一下属性：       空标记：<div class="clear_fix"></div>
    clear:both;height:0;overflow:hidden;
                   弊端：会添加很多空标记，增加结构负担，产生代码冗余； 
                     
         4、display:table;   给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
    弊端：会改变当前元素的元素类型；

         5、万能清除法：
    :after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}     说明：推荐使用万能清除法；
    弊端：单词太多，不好记；