CSS 工具箱

工具网站:

综合:

  1. MDN
  2. W3Schools

查询兼容性:

  1. Can i use

动画:

  1. Animate.css
  2. cssanimate

CSS3 generator:

  1. http://www.css3generator.in/
  2. http://css3generator.com/
  3. http://css3.me/

水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* block 元素: */
/* 方法一 */
.block {
margin: 0 auto;
width: 200px;
}
/* 方法二 */
.center {
position: absolute;;
left: 50%;
transform: translateX(-50%);
}
/* 方法三 flex */
.container {
display: flex;
justify-content: center;
}
/* inline-block 和 inline 元素设置父元素的 text-align */
.container {
text-align: center;
}

水平垂直居中

方法一:absolute
CSS

1
2
3
4
5
6
7
8
9
.absolute-box {
position: relative;
}
.absolute-box .content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

HTML

1
2
3
4
5
<div class="container absolute-box">
<div class="content">
水平垂直居中
</div>
</div>

方法二:flex
CSS

1
2
3
4
5
6
7
8
9
10
11
.container {
width: 400px;
height: 200px;
background-color: #ccc;
margin: 20px;
}
.flex-box {
display: flex;
align-items: center;
justify-content: center;
}

HTML

1
2
3
4
5
<div class="container flex-box">
<div class="content">
水平垂直居中
</div>
</div>

消除 inline-block 元素之间的间隙

1
2
3
4
/* 设置父元素的 font-size */
.modal {
font-size: 0;
}

margin 的缩写

有4 2 3个值时对应关系,padding 类似

1
2
3
4
5
div {
margin: top right bottom left;
margin: (top/bottom) (right/left);
margin: top (right/left) bottom;
}

备注:元素之间的 margin 会重叠

圆形头像

1
2
3
.portrait {
border-radius: 50%;
}

文本溢出显示省略号

单行文本

1
2
3
4
5
.text {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

多行文本在最后一行溢出显示省略号

1
2
3
4
5
6
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

CSS 阴影效果被挡住问题

1
2
3
4
5
.shadow {
position: relative;
box-shadow: 0 0 20px 0px #000000;
z-index: 2;
}

img map 链接点击时不显示 outline

HTML

1
<img class="map" src="..." usemap="...">

CSS

1
2
3
img[usemap], map area{
outline: none;
}

备注: outline 属性与 border 类似,但是不改变页面布局,仅作查看效果。

文字和数字混排时强制换行,默认数字会连在一起

1
2
3
.content {
word-break: break-all;
}
如果对您有帮助,可以请我喝咖啡