前端小白页面开发注意事项及小工具

Posted 2021-02-06 lisashare

垂直水平居中，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法：

`
.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

`

css/js解决 页面多次点击时出现部分蓝色

`
css：html, body{
-moz-user-select: none; /火狐/
-webkit-user-select: none; /webkit浏览器/
-ms-user-select: none; /IE10/
-khtml-user-select: none; /早期浏览器/
user-select: none;
}

js：document.onselectstart=new Function("return false");

### CSS单行文本溢出省略显示
width: abc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

### CSS布局英文不能折行
word-break:break-all;
word-wrap:break-word;
`

---

未完待续