宽高自适应

day 10 8.31   
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;
                    }
    隐藏元素 区别：（隐藏元素的三种方式：display：none；隐藏之后不占据原来的位置。visibility：hidden隐藏元素，隐藏之后还占据原来的位置（视觉上看不见）；opacity：0；表示元素的透明度，元素隐藏后占据原来的位置）
2.自适应的优点：元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同的设备、不同的窗口和不同的分辨率下显示。
3.伪对象选择器
语法：选择符：：after{content：“内容”；}（内容和路经只能二选一）
           选择符：：after{content：url（图片路径）；}必须要和content使用
 注意：（不可设置宽高，可设置文字大小，文字颜色，背景颜色，文字加粗）
 1）div::after 把伪对象添加为div的最后一个子元素（可对块级，行内元素）用的比较多
      div::after {
            content: "我是伪对象qqqq";
            /* content: url(../images/21.jpg); */
            font-size: 20px;
            color: red;
        }
2）div::before 把伪对象添加为div的第一个子元素 （可对块级，行内元素）用的比较多
div::before {
            content: "我是伪对象before";
            font-size: 20px;
            color: green;
        } 
3）选择符::first-letter 改变第一个字符的样式 （此伪对象选择符只对块级元素）
        h1::first-letter {
            color: yellow;
            font-size: 50px;
      }
4）选择符::first-line 改变第一行的样式（此伪对象选择符只对块级元素）
h1::first-line {
            background: red;
        }
4.最小高度min-height
当实际的内容小于最小高度的时候，显示最小高度。
如果实际内容大于最小高度，显示的是实际的高度。
IE6以下的最小高度是height
    解决IE6及以下浏览器的最小高的方法：
    第一种：_ height：value；
    第二种：height：auto！important；height：value；
5.max-height 最大高度
当实际内容的高度小于最大高度的时候，显示的实际的高度
当实际内容的高度大于最大高度的时候，显示的是最大高度
6.过滤器(filter)
1）_ 下划线属性过滤器  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
语法：选择符{  _属性：属性值；}
此方法是区分IE6浏览器和其他浏览器的方法；
2）!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6没有最高权重的概念，把该属性值当作普通的看待。）
语法：选择符{属性：属性值 !important;}
3）* 属性过滤器 当在一个属性前面增加了*后，该属性能被IE7及以下浏览器识别，其它浏览器忽略该属性的作用。
语法：选择符{*属性：属性值；}
4）\9 ：  IE版本识别；其他浏览器都不识别
语法：选择符{属性：属性值\9;}
5）\0  :   ie浏览器中 IE8及以上版本识别；其他浏览器都不识别   
语法：选择符{属性：属性值\0；}