一.水平垂直居中
????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：一個獨立的布局環(huán)境，BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響并村。）
? ??如何生成：父元素屬性滿足以下條件：float的值不為none嘉蕾，overflow的值不為visible荚醒，display的值為inline-block芋类、table-cell、table-caption界阁，position的值為absolute或fixed
????特性：
????????a)margin會發(fā)生合并侯繁，同一個BFC內(nèi)的相鄰元素會發(fā)生margin合并現(xiàn)象
????????b)BFC不會重疊浮動元素
????????c)BFC可以包含浮動
? ? ②.清除浮動方法
? ? ? ? a)父級元素設置height/定義overflow:hidden
? ? ? ? b)添加空div,.clear{clear:both}
? ? ? ? c)偽元素.clearfix:after{
????content:"";//設置內(nèi)容為空
????height:0;//高度為0
????line-height:0;//行高為0
????display:block;//將文本轉(zhuǎn)為塊級元素
????visibility:hidden;//將元素隱藏
????clear:both//清除浮動
????????????????????}
????????????????????.clearfix{
????zoom:1;為了兼容IE
? ? ? ?}
三.盒模型
? ? 1.box-sizing
? ? ? ? ①content-box標準模式，盒子總寬度/高度=width/height+padding+border+margin
? ? ? ? ②border-box怪異模式泡躯，盒子總寬度/高度=width/height+margin=內(nèi)容區(qū)+padding+border+margin
? ??????③
