前端 CSS 相关
1、DIV 水平垂直居中
HTML
<div class='flex'>
<div class="box"></div>
</div>
方案一(推荐):利用 display:flex
实现 div 居中,未知大小的 div 也可用此方法居中
CSS
.flex {
display:flex;
align-items: center;
justify-content:center;
}
方案二:父元素 display:table-cell;vertical-align:center
里面的子元素就会实现水平垂直居中,不需要知道子元素的宽高
CSS
.flex {
display: table-cell;
vertical-align: middle;
}
方案三:利用 display:grid
目前最强大的布局方案,使用还尚未流行
CSS
.flex {
display: grid;
}
.box {
align-self: center;
}
2、文字超出部分显示省略号
单行文本的溢出显示省略号(一定要有宽度)
CSS
div {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本溢出显示省略号
CSS
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
3、中英文自动换行
word-break:break-all
只对英文起作用,以字母作为换行依据
word-wrap:break-word
只对英文起作用,以单词作为换行依据
white-space:pre-wrap
只对中文起作用,强制换行
white-space:nowrap
强制不换行,都起作用
4、设置 placeholder 的字体样式
CSS
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}
5、解决 IOS 页面滑动卡顿
CSS
body,html{
-webkit-overflow-scrolling: touch;
}
6、使元素鼠标事件失效
CSS
div {
pointer-events: none;
cursor: default;
}
7、禁止用户选择
CSS
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
8、全屏背景图片的实现
CSS
div {
background-image: url(./img/bg.jpg);
width: 100%;
height: 100%; /* 父级高不为100%请使用100vh */
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
9、网站置灰
CSS
body,html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}