共计 3396 个字符，预计需要花费 9 分钟才能阅读完成。
一、把握盒子程度垂直居中的五大计划
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、转成块级元素