Skip to content

前端 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);
}
你觉得这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度