前端 CSS 相关

更新: 2023-12-07 18:05:28   字数: 0 字   时长: 0 分钟

1、DIV 水平垂直居中

<div class='flex'>
	<div class="box"></div>
</div>

方案一（推荐）：利用 display:flex 实现 div 居中，未知大小的 div 也可用此方法居中

.flex {
  display:flex;
  align-items: center;
  justify-content:center;
}

方案二：父元素 display:table-cell;vertical-align:center 里面的子元素就会实现水平垂直居中，不需要知道子元素的宽高

.flex {
  display: table-cell;
  vertical-align: middle;
}

方案三：利用 display:grid 目前最强大的布局方案，使用还尚未流行

.flex {
  display: grid;
}

.box {
  align-self: center;
}

2、文字超出部分显示省略号

单行文本的溢出显示省略号（一定要有宽度）

div {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本溢出显示省略号

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 的字体样式

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 页面滑动卡顿

body,html{
  -webkit-overflow-scrolling: touch;
}

6、使元素鼠标事件失效

div {
  pointer-events: none;
  cursor: default;
}

7、禁止用户选择

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、全屏背景图片的实现

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、网站置灰

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);
}