宽高自适应

高度自适应

                 不设置高度  或者 高度设置为100% height:auto;
                
                 内容多了可以撑开 。but  内容少了就会根据内容的高度 影响布局

                 引出来了最小高度  min-heigth:;

                 当父元素只设置了min-height:; 子元素有浮动  就会产生父元素的高度塌陷 因为浮动的元素不占据空间

                 这就引出来了怎么解决高度塌陷的办法

                 1  给父元素添加overflow:hidden; 
                     触发了一个BFC
                    BFC的高度测量 包括浮动的元素

                    优点  便捷 简单
                    弊端  会隐藏定位在当前元素外的内容

                 2  给浮动元素的最后面添加一个空的div  并添加属性 div{clear:both}
                   
                    清除浮动元素预留下来的位置

                    弊端 结构上多了很多空的div  结构冗余


                 3  万能清除浮动法

                     元素：after{
                         content:"内容或图片";
                         clear:both;
                         display:block;
                         height:0;
                         overflow:hidden;
                         visibility:hidden;
                     } 
                      
                      伪对象   
                                ：after   
                                
                                在当前元素的最后面添加内容或图片

                                :before
                                 
                                在当前元素的最前面添加内容或图片

                                ：first-letter 

                                在当前元素的第一个字符上添加样式

                                ：first-line

                                在当前元素的第一行上添加样式
               
            
                         clear

                           闭合浮动

                           属性值 left/right/both

                          清除浮动元素给下面元素预留的位置

                              visibility:hidden;
                                隐藏当前元素  但是当前位置不会发生改变

                              display：none;
                                隐藏当前元素  但是当前位置也会消失



                        两种情况 

                        1  父元素的高度靠子元素的多少来撑开

                        2  子元素跟随父元素的高度的变化而变化

最小高度的兼容问题

      最小高度 
                    
                        min-height:;

                        如果高度和最小高度同时出现  执行的是高度

                        IE6 不兼容这个最小高度  height就代表最小高度

                        怎么解决这个问题

                    1   min-height:value;  _height:value;

                    2   min-height:value; 
                        height:auto!important;
                        height:value;


                    过滤器

                            1：下划线过滤器（IE6过滤器）
                                语法：
                                    _属性：属性值：
                                只有IE6能识别带有下划线的属性。


                            2: !important  (IE6不识别)
                                语法：
                                    属性：属性值!important;


                            3. *属性过滤器
                                 当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的作用。

                            语法：选择符{*属性：属性值；}


                           4.   \9  ：IE版本识别；其它浏览器都不识别
                                语法：选择符{属性：属性值\9;}

                            5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别