html,css篇

一.水平垂直居中

    1.水平居中

        ①margin:0 auto;           

    2.垂直居中

        ①line-height行高为盒子高度

    3.水平垂直居中

        ①父元素相对定位position:relative，子元素绝对定位 position: absolute; top: 50%; left: 50%;margin-top:-height的一半；     margin-left: -width的一半;

        ②css3中transform， margin: 0 auto;/*水平居中*/ position: relative; top: 50%;/*偏移*/ transform: translateY(-50%);

        ③未脱离文档流元素的居中：display: table-cell; vertical-align: middle;text-align: center;

        ④弹性盒子：display:flex;align-items: center;justify-content: center;

---

二.清除浮动与BFC

    ①.BFC：一个独立的布局环境，BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）

    如何生成：父元素属性满足以下条件：float的值不为none，overflow的值不为visible，display的值为inline-block、table-cell、table-caption，position的值为absolute或fixed

    特性：

        a)margin会发生合并，同一个BFC内的相邻元素会发生margin合并现象

        b)BFC不会重叠浮动元素

        c)BFC可以包含浮动

    ②.清除浮动方法

        a)父级元素设置height/定义overflow:hidden

        b)添加空div,.clear{clear:both}

        c)伪元素.clearfix:after{

　　　　　　    content:"";//设置内容为空

　　　　　　    height:0;//高度为0

　　　　　　    line-height:0;//行高为0

　　　　　　    display:block;//将文本转为块级元素

　　　　　　    visibility:hidden;//将元素隐藏

　　　　　　    clear:both//清除浮动

                    }

                    .clearfix{

　　　　　　    zoom:1;为了兼容IE

　　　　       }

---

三.盒模型

    1.box-sizing

        ①content-box标准模式，盒子总宽度/高度=width/height+padding+border+margin

        ②border-box怪异模式，盒子总宽度/高度=width/height+margin=内容区+padding+border+margin

        ③