1.掌握盒子水平垂直居中的五种解法1.display.father{display:flex;对齐项目：居中；justify-content:center;}高度①：需要考虑width和height.father{position:relative;}.child{width:50px;高度：50px位置：绝对；顶部：50%；左：50%；左边距：-25px；margin-top:-25px;}②:不需要考虑宽高.father{position:relative;}.child{position:absolute;顶部：0；左：0；右：0；底部：0；margin:auto;}不需要具体宽高，但是兼容性不是很好css3.child{position:absolute;顶部：50%；还剩50%；转换：翻译（-50%，-50%）；javascript方法让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-cellmethod.father{display:table-cellvertical-align:midlle;文本中心：中心；//该方法要求父级有固定的宽高width:500px;height:500px;}.child{display:inline-block}2.盒模型标准盒模型：box-sizing:content-boxwidth=content奇怪的盒子模型：box-sizing:border-box(css3attribute)width=content+padding+border;flex弹性盒模型分为主轴和横轴显示：flex；（内联元素也可以使用display:inline-flex）注意：设置Flex布局后，子元素的float、clear、vertical-align属性将失效。子元素都是flex-itemflex-direction:row|行反转|栏目|column-reverseflex-wrap:no-wrap|包装|换行；flex-flow：flex-direction和flex-wrap的简写，justify-content：flex-start|弹性端|中心|space-aroud（等间距）|space-between(两端对齐)align-items:flex-start|弹性端|中心|基线（第一行文本的基线对齐）|stretch(默认填充容器的高度)align-content:flex-start|弹性端|中心|伸展|间隔|space-around在flex-item上设置如下属性：order：属性默认顺序为0，值越小越靠前；flex-grow：该属性定义了item的放大倍数，scale默认为0，即如果还有剩余空间，则不会放大，越大的为两倍。flex-shrink：该属性定义item的收缩比例，默认为1，越大越小。flex-basis：属性定义在分配额外空间之前占据主轴空间，默认auto，flex：flex-grow，flex-shrinkflex-basis简写，默认值01autoalign-self：允许单个item不同于otheritems相同的对齐方式，可以覆盖align-items，默认是auto，表示继承父元素的align-items属性，如果没有父元素，相当于stretch3.经典布局方案HolyGrail布局:浮动和负margin.body{height:100%;溢出：隐藏；}.容器{高度：100%；填充：0200px；float:left;}.left{marign-left:-200pxposition:relative;}.right{margin-right:-200px}usecalc.center{width:calc(100%-400px)}usedisplay.container{显示:flexjustify-content:space-between;}.center{flex:1}positioning.center{margin:0200px}.left,.right{position:absolute;}.left{left:-200px;}.right{right:200px;}4.BFC含义：块级格式化上下文，不受外界影响的独立区域。BFC触发条件1.根元素()2.float值不为none3、溢出值不可见4、显示值有inline-block、table-cell、table-caption、flex、inline-flex5、positionvaluesareabsolute,fixedBFC特性1.属于同一个BFC的两个相邻容器上下边距会重叠（强调）===>父元素：overflow:hidden2，计算BFC高度时浮动动态元素也参与计算（重点）===>1.父元素溢出：隐藏===>2.添加兄弟元素===>3通用清除规则：content:"";display:block;clear:两者；/*高度：0；溢出：隐藏；为了解决IE浏览器的兼容性问题*/height:0;overflow:hidden;/*visibility:hidden;为了隐藏content中的内容*/visibility:hidden;3、BFC的区域会不与浮动容器重叠（重点）===>兄弟元素溢出：隐藏4，BFC中的容器在垂直方向上按顺序排列5，元素的margin-left与元素的border-left接触包含block6，BFC是一个独立的容器，容器内部元素不会影响容器外部元素。5.移动端响应式布局开发的三大解决方案mediaremflexvh/vw6.让div消失visibility的方法：hidden=>不脱离隐藏文档流，这个属性继承显示：none，outofthedocumentflow,不占原位置，页面消失完全透明：background属性opacity:transparency0.0（完全透明）~1（完全不透明）定位移出width:0+overflow:hidden;margin-left:-99999px;transform:translateX(-9999px);transform:scale(0)7.文字垂直居中1.line-height:100px+text-align:center+height:100px2.多行文字padding:+text-align:center3,固定父元素parent:display:tablechild:display:table-cellvertical-align:middle,text-align:center8,单行文字溢出overflow:hidden;文本溢出：省略号，空白：nowrap；九、inline-block间隙原则：不可见符号会保留父层字体大小的1/3，换行会有换行符解决方法：1.写在一行中2.父容器字体03.letter-sapcing:04.转换为块级元素
