day08-宽高自适应&高度塌陷

        网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

        自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

一、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

（1）宽度自适应  

         元素宽度设置为100%。（块元素宽度默认为100%）            

        元素脱离文档流（浮动或绝对定位）可使元素自适应内容宽度

（2）高度自适应  

         元素的高度自适应： 设置如： div {height : auto;}

          窗口的高度自适应： 设置：body，html{height：100%；} div{height：30%；}

  最小高度的概念 min-height
        - 可以保持自小的高度 并且内容较多的时候可以把容器的高度撑开
        - 兼容问题: 最小高度只能在高版本浏览器中使用

    
   解决方法： 过滤器
        1.下划线过滤器
        使用方法: _属性:属性值
        规则: 只能在低版本浏览器中解析

        2.!important 最高权重 严格意义上不属于过滤器 只是表示权重的方法
         - 行内样式表>id>class>标签
         - !important 无敌
         - 使用方法 属性:属性值!important
                 
    最小高度 min-height
    最小宽度 min-width

    最大高度 max-height 
    最大宽度 max-width

二、高度塌陷/高度坍塌

    造成原因
        - 父级没有设置高度 => 自适应
        - 子级元素含有浮动 => 需求

    解决高度塌陷的方法有4种(简单=>难)

    第一种解决方法: 给父级元素设置高度
      优点:简单
      缺点:无法做到自适应

    第二种解决方法： 给父级元素设置overflow:hidden
      原理: 使用文本溢出隐藏属性触发了BFC(块级格式化上下文-布局规范)
      BFC中有一条规则: 只要触发BFC BFC中的浮动元素也参与高度计算
      优点: 简单好用 可以做到自适应
      缺点: 当子级元素超出父级容器的时候 子级被隐藏起来

    第三种解决方法: 在最后一个子级元素后面添加任意标签
        - 原理: 清除上方预留出来的空间
        - 给标签设置类名 clear-fix (前端中的不成文规定)
        - 添加相关的属性 clear:both(left\right\both)
         优点:清除方便
         缺点:代码累赘 代码冗余 结构错乱 容易出现布局问题

    第四种解决方法: 万能清除法(是前面几种方法的结合体)
      原理: 清除浮动 触发BFC
      用法: 在父级元素上添加类型 clear-fix
      注意:只要求会用 不要求理解

伪类选择器 :hover

    伪对象/伪元素(假的结构)
        1. ::after{content:''} 表示在xx之后添加
        2. ::before{content:''} 表示在xx之前添加

        3. ::first-letter  定义第一个字符的样式
        4. ::first-line 定义第一行字符

    伪对象选择器和伪类之间的区别
        伪类:  hover
        伪对象: after before

    1.写法上的区别
        - 在css2中伪类和伪对象都是一个冒号 为了区别伪对象选择器 在css3中规定要写两个冒号

    2.功能作用上的区别
        - 伪类只能改变元素的样式
        - 伪对象不仅可以改变元素的样式 还可以添加结构(虚拟的结构)
        

内容部分设置： *visibility:hidden/隐藏

*visibility:hidden;和display:none;的区别：

                 visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置