CSS宽高自适应

宽度自适应：

1. 块状元素当宽度不去设置的时候、或者是设置width:100%;
   那么宽度是跟随父元素宽度显示。
2. 如果一个元素没设置宽度，并且设置了绝对定位、浮动、固定定位 ，让元素脱离文本流，宽度是内容撑开的宽度
3. 高度自适应第一种情况需求：
   a: 当内容增多的时候，让内容撑开盒子的高度
   b: 如果内容偏少或者是没有内容的时候，让盒子保持一个最小高度。
4. height属性：
   默认值为auto;
   一个元素设置height:auto 或者 是不设置的时候：元素的高度是被内容撑开的

最小高度：

• min-height:;

  • 执行逻辑：
    如果内容超出当前元素，元素高度则被内容撑开，
    如果内容小于当前元素高度，元素会保持一个最小高度。

兼容问题（了解）:

    min-height   ->   IE6不能识别
    IE6把height直接识别为最小高度。

        解决方法：
        1：
            _height:300px;
            min-height:300px;
        2：
            min-height:300px;
            height:auto!important;
            height:300px;

• 过滤器：
  1.下划线过滤器（IE6过滤器）

  • _属性：属性值;

  2.!important IE6不能识别权重
  3. 属性过滤器

• 当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的作用。
  语法：选择符{*属性：属性值；}

• \9 ：IE版本识别；其它浏览器都不识别
  语法：选择符{属性：属性值\9;
  5. \0 : IE8 及以上版本识别；其它浏览器都不识别

高度坍塌

• 高度坍塌出现的场景：
  当父元素没有设置高度，子元素添加浮动，父元素会出现高度塌陷
  即使设置高度height或min-height 浮动的子元素也不会撑开父元素的高度。

• 高度塌陷的解决方法：
  1：给高度塌陷的元素添加overflow:hidden;

  • 原理：overflow:hidden触发了BFC ( BFC:布局逻辑 )
    BFC规定：计算元素高度的时候，里面的浮动元素也参与计算。
  • 弊端：overflow:hidden;溢出隐藏 隐藏掉定位到父元素以外的内容。

  2：在浮动元素的最下方，添加一个空的div 并且给div{ clear:both; }

  • 原理：clear:both; 忽略上方元素预留的空间
  • 弊端：会产生大量的代码冗余

  3：万能清楚法

 高度塌陷的元素: after{  
         content:" ";
         display:block;
         height:0;
         overflow:hidden;
         clear:both;
         visibility:hidden;
}

• clear: 闭合浮动空间！！
  属性值：

  • left
  • right
  • both

  伪对象选择器：

  1： 在当前元素的内容最后添加一些内容。

   :: after{
        //content:"";
        content:url();
    }

2: 在当前元素的内容最前面添加一些内容。

   ::before{
            //content:"";
            content:url();
        }

3:控制第一个字符的样式

   ::first-letter{
           
   }

4.控制第一行的样式

 ::first-line{       
    }

visibility

• display:none;
  完全隐藏，不占据空间

• visibility:hidden;
  隐藏元素，占据空间

高度自适应

• 第一种情况：
  内容撑开父元素
• 第二种情况：
  让子元素跟随父元素高度