常用的css开发样式

多行文本溢出省略号---ie8不支持
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

单行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

溢出隐藏会有不对齐的问题 也就是Overflow的影响
需要当前行都是用浮动 有的时候浮动比行内块好用很多

文本对其方式左右对齐
text-align: justify;
text-justify: inter-ideograph;

对齐方式
vertical-aligin:top;

移动---rem
// 封装方法和通用样式
getRem(1920, 100)
// onresize----页面窗口大小发生改变时触发
window.onresize = function () {
getRem(1920, 100)
};

function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
//下面的代码是为了考虑兼容性
// owidth----body的大小,会随着屏幕大小发生改变而改变
// pwidth----设计稿的大小
var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
// console.log(oWidth)
html.style.fontSize = oWidth / pwidth * prem + "px";
}

表格tr行间距设置
border-collapse: separate;
border-spacing: 0px 5px;

a标签下载 download=""属性

行内框元素之间的空白元素会根据font-size变大

如果发现页面高度无法更改在页面也查看不到记得在行内元素加display：block；

placeholder样式颜色

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color:    #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #909;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:    #909;
}

input::-webkit-input-placeholder {

color: #c5c8ce;

}

input::-moz-placeholder {

/* Mozilla Firefox 19+ */

color: #c5c8ce;

}

input:-moz-placeholder {

/* Mozilla Firefox 4 to 18 */

color: #c5c8ce;

}

input:-ms-input-placeholder {

/* Internet Explorer 10-11 */

color: #c5c8ce;

}

媒体响应式

@media screen and (max-width: 970px) {

nav {

display: none;

}

.content-in {

margin-left: 0 !important;

}

}