day13 html5

day13

最小高度的兼容设置方法：（兼容的思路）
1: min-height:300px;_height:300px;
2: min-height:300px;height:auto!important;height:300px;
1: 高版本浏览器解析顺序：
min-height能识别，也能识别！important 所有height:auto;权重最高，height:auto 就能把height:300px覆盖。
2:IE6解析流程：
min-height不能识别，也不能识别！important , 后写的height:300px;能把height:auto覆盖，

过滤器（IE6过滤器）：
    1：下划线过滤器
        语法：
            _属性：属性值：
        只有IE6能识别带有下划线的属性。
    2: !important  (IE6不识别)
        语法：
            属性：属性值!important;
   3. *属性过滤器
         当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的作用。
    语法：选择符{*属性：属性值；}
   4.   \9  ：IE版本识别；其它浏览器都不识别
        语法：选择符{属性：属性值\9;}

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

高度塌陷出现的场景：
当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷
注：浮动的子元素不会撑开父元素的 height 或者是 min-height。

解决高度塌陷的方法：
    1：给出现高度塌陷的元素添加：overflow:hidden;
        原理：overflow:hidden;触发了一个 BFC(布局逻辑)
            BFC规定：计算BFC高度时候，浮动元素也参与计算。
        弊端：隐藏掉定位在当前元素外围的内容。

    2：在浮动元素的下方（同级）添加一个空的div，给div设置样式
        div{clear:both;}
        原理：添加的空div添加了clear：both;忽略上方同级添加浮动的元素留出的空间。在父元素最底下显示，撑开父元素高度。
        弊端：形成代码的冗余（出现高度塌陷，添加一个div）

    3：万能清除法：
        .clear_fix:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
        }
        （IE6） .clear_fix{
            zoom:1;
        }
        
        clear:both; 当前元素会忽略上方添加浮动的元素 留出来的空间。(闭合浮动)
    	 clear的属性值：
         clear:left
  		 clear:right
         clear:both
         visibility:hidden;将元素隐藏，占据空间，在页面上留下一片空白 高度自适应第一种情况

伪对象选择符：

1： 元素选择符::after{
        content:"";
    }
    说明： 在某个元素的后面用css的形式添加内容（图片、文本）。

2:  元素选择符::before{
        content:"";
    }说明： 在某个元素的前面用css的形式添加内容（图片、文本）
   
3:  元素选择符::first-letter{
    }说明：控制第一个字符的样式
            
4:  元素选择符::first-line{
    } 说明：控制第一行的样式

高度自适应总结

1：高度不去设置，或者高度设置auto    内容撑开父元素的高度。

2：内容撑开父元素的高度   ->   最小高度的设置  min-height

3: 浮动元素添加高度自适应 ->  添加浮动元素的父元素没有高度，会出现高度塌陷

4：高度塌陷的解决方案
    （1） 添加overflow:hidden;
        原理：触发BFC
        弊端：隐藏掉定位在元素外面的内容。

    （2）给浮动的元素的下方添加空div   并且设置样式 {clear:both;}
        原理：clear:both; 忽略上方浮动元素留出的空间 【闭合浮动】
        弊端：反复添加空div   会形成代码的冗余

    （3）万能清除法：
        .clear_fix:after{
            content:"";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
        }
        .clear_fix{
            zoom:1;
        }
         高度自适应第一种情况：内容撑开父元素高度

高度自适应第二种情况：让子元素高度随着父元素高度进行改变。

    需求：让一个元素在浏览器窗口完全铺满：
        前提条件：
            body,html{
                height:100%;
            }