一、把握盒子程度垂直居中的五大计划
1.display
.father{ display:flex; align-items: center; justify-content:center;}2.position
以下两种child盒子须要有宽高
①：须要思考宽高
.father{ position: relative;}.child{ width: 50px; height: 50px position:absolute; top: 50%; left:50%; margin-left: -25px; margin-top: -25px;}②：不须要思考宽高
.father{ position: relative;}.child{ position: absolute; top:0; left:0; right: 0; bottom: 0; margin: auto;}不须要具体的宽高，然而兼容性不是很好css3
.child{ position: absolute; top: 50%; left 50%; transform: translate(-50%, -50%)；}javascript办法
let HTML = documnet.documentElement;winH = HTML.clientHeight;windW = HTML.clientWidth;childW = box.offsetWidth;childH = box.offsetHeight;box.style.postion ='absolute';box.style.left = (winW - childW) / 2 + 'px';box.style.top = (winH - childH) / 2 + 'px';table-cell 办法
.father{ display: table-cell vertical-align: midlle; text-center: center; // 此种办法须要父级有固定的宽高 width: 500px; height: 500px;}.child{ display: inline-block}二、 盒模型
规范盒模型：box-sizing： content-box
width = content
怪异盒模型： box-sizing:border-box (css3属性)
width = content + padding + border;
flex 弹性盒模型 分为主轴和穿插轴
display： flex；（行内元素亦能够应用display：inline-flex）
留神： 设为 Flex 布局当前，子元素的float、clear和vertical-align属性将生效。
子元素都是flex-item
flex-direction： row | row-reverse | column | column-reverse
flex-wrap：no-wrap | wrap | wrap-reverse；
flex-flow: 是 flex-direction和 flex-wrap的简写模式，
justify-content： flex-start | flex-end | center | space-aroud（距离等距） | space-between（两端对齐）
align-items： flex-start | flex-end | center | baseline(第一行文字基线对齐) | stretch（默认占满容器的高度）
align-content：flex-start | flex-end | center | stretch | space-between | space-around
以下属性是设置在flex-item上的：
order： 属性排列程序 默认为0，数值越小越靠前；
flex-grow：属性定义我的项目放大比例 默认为0，即如果存在残余空间，也不放大， 越大就是两倍。
flex-shrink：属性定义我的项目放大比例， 默认为1，越大越小。
flex-basis：属性定义在调配多余空间之前，占据主轴空间，默认auto，
flex： flex-grow， flex-shrink flex-basis 简写， 默认值0 1 auto
align-self：容许单个我的项目与其余的我的项目不一样对齐形式，可笼罩align-items，默认为auto，示意继承父元素的align-items属性，如果没有父元素，则等同于stretch
三、经典布局计划
圣杯布局： 浮动和负margin
.body{ height: 100%; overflow： hidden;}.container{ height: 100%; padding: 0 200px;}.center{ width:100%;}.left,.right{ width： 200px}.left,.right,.center{ float: left;}.left{ marign-left: -200px position: relative;}.right{ margin-right:-200px}应用calc
.center{ width: calc(100% - 400px)}应用display
.container{ dispplay: flex justify-content: space-between;}.center{ flex:1}定位
.center{ margin: 0 200px}.left,.right{ position: absolute;}.left{ left: -200px;}.right{ right: 200px;}四、BFC
含意： 块级格式化上下文，不受外界影响的一块独立区域
BFC的触发条件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的个性
1、属于同一个BFC的两个相邻容器的高低margin会重叠（重点） ===> 父元素： overflow：hidden
2、计算BFC高度时浮动元素也参于计算（重点）
===> 1、父元素 overflow:hidden
===> 2、增加兄弟元素
===> 3 万能革除法令:
content: "";display: block;clear: both;/* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */height: 0;overflow: hidden;/* visibility:hidden;为了去暗藏content中的内容 */visibility: hidden;3、BFC的区域不会与浮动容器产生重叠（重点） ===> 兄弟元素overflow： hidden
4、BFC内的容器在垂直方向顺次排列
5、元素的margin-left与其蕴含块的border-left相接触
6、BFC是独立容器，容器外部元素不会影响容器内部元素
五、挪动端响应式布局开发三大计划
media
rem
flex
vh/vw
六、让一个div隐没的办法
visibility: hidden => 不脱离文档流的暗藏， 此属性具备继承性
display: none， 脱离文档流，不占据原来地位，页面彻底隐没
transparent： background属性
opacity： 透明度 0.0(齐全通明) ~ 1 （齐全不通明）
定位移出去
width：0 + overflow: hidden;
margin-left: -99999px;
transform:translateX(-9999px);
transform: scale(0)
七、文本垂直居中
1、 line-height: 100px + text-align:center + height: 100px
2、多行文本 padding：+ text-align：center
3、父级元素固定 父： display：table 子： display：table-cell vertical-align：middle， text-align：center
八、单行文本溢出省略
overflow：hidden；text-overflow：ellipsis，white-space: nowrap;九、inline-block 间隙
原理： 不可见符号会被保留父层字体的1/3大小空间 ，换行有换行符
解决办法：
1、 写在一行
2、父容器字体0
3、letter-sapcing： 0
4、 转成块级元素