自我学习前端第八天--中心放大和高度自适应

1、中心放大

原理

一般情况下内容是从左上角开始放大，如果要设置中心放大，除了增加宽高之外，还需要偏移距离

两种方式
   margin偏移
	定位的left和top值偏移


	   偏移距离的计算 margin-top/top=-（放大后的高度-放大前的高度）/2
	   偏移距离的计算 margin-left/left=-（放大后的宽度-放大前的宽度）/2

---

三角形怎么用css设置 边框

---

可以动态计算数值  calc()
    +  -  *  /

2、高度自适应：

 盒子的高度由内容撑开
 盒子不设置高度
 height：auto


最小高度： min-height:600px
内容的高度小于600px,以最小高度为准，如果内容的高度大于600px，以内容的高度为准

兼容性：
     min-height   


 IE6以下浏览器不识别min-height，但是height就是（最小高的效果）

    min-height解决兼容问题

        高版本浏览器     min-height
        IE6以下浏览器    _height 


        min-heigh：600px;
        height:auto !important;
        height:600px


-------------------------------------
高度塌陷：父元素的高度由内容撑开，内容浮动后不占位，父元素就会出现高度塌陷

解决方法：

    1、给父元素设置overflow:hidden
        原理：overflow:hidden可以触发BFC（一个独立的渲染区域）规定浮动元素也参与高度计算。


    2、在所有浮动元素的最下方设置一个空盒子，需要给空盒子清除浮动，把父元素的高度撑开
            .clear{
                clear: both;
            }

    3、万能清除法：
        .clear-fix:after{
            content: "";
            display: block;
            clear: both;
            height: 0px;
            overflow: hidden;
            visibility: hidden;
        }
        .clear-fix{
            *zoom: 1;
        }

    4、设置固定高度

伪元素选择器

    ::after
    ::before

after 和before可以在盒子内部动态生成内容，after是盒子内容的下方生成，before是盒子内容的上方生成

注意： 使用 ::after ::before必须要跟content属性一起用！！