一、定位 盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
二、table-cell布局 父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
三、定位 + transform ; 适用于 子盒子 宽高不定时; (这里是本人经常使用方法)css
position: relative / absolute; /*top和left偏移各为50%*/ top: 50%; left: 50%; /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/ transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增长耗电量的 (至于何是3D加速 请看浏览器进程与线程篇)
四、flex 布局
父级:
/flex 布局/
display: flex;
/实现垂直居中/
align-items: center;
/实现水平居中/
justify-content: center;web
再加一种水平方向上居中 :margin-left : 50% ; transform: translateX(-50%);数组
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333; }
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 固然还须要加宽度width属来兼容部分浏览。
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
一、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它须要组合其余的WebKit属性。常见结合属性:
二、display: -webkit-box; 必须结合的属性 ,将对象做为弹性伸缩盒子模型显示 。
三、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。浏览器
var arr = [ 1,5,1,7,5,9]; Math.max(...arr) // 9
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])] // [2, "12", 12, 1, 6, 13]