一、把握盒子程度垂直居中的五大计划
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、 转成块级元素
发表回复