收集整理了一些有用的 CSS 小技巧,熟练掌握灵活应用可以提高网页开发效率。

清除浮动

如果元素设置了浮动,但是却没有清除浮动,那么父级元素的高度就可能会丢失,这样一来就会导致页面显示错乱了。清除浮动可以在父级元素添加clearfix样式名即可。

1
2
3
4
5
6
7
8
9
10
11
.clearfix {
zoom: 1;
}
.clearfix:after {
content: '';
display: block;
visibility: hidden;
width: 100%;
height: 0;
clear: both;
}

巧用:not(:last-child)来实现分割效果:

如果有这样一个需求,需要在每个导航之间加上分割线,通常可能会用如下的方式来实现:

1
2
3
4
5
6
.nav li {
border-right: 1px solid #ddd;
}
.nav li:last-child {
border: none;
}

现在有一种更简洁的方式:

1
2
3
.nav li:not(:last-child) {
border-right: 1px solid #ddd;
}

为body元素设置行高

不必为每一个<p><h*>元素逐一添加line-height,直接添加到body元素即可,文本元素可以很容易的继承body的行高。元素的实际行高是和自身的字号相关。比如body设置的行高是1.5,某个元素的字号是20px,那么该元素的行高就是30px.

1
2
3
body {
line-height: 1.5;
}

垂直居中任何元素

不管你是inline或者block元素,使用flex真的可以做到垂直居中任何元素哦,不信你自己去试试。

1
2
3
4
5
6
7
.container {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}

如果觉得这还不过瘾,那这里有一篇文章可能适合你。

flexbox目前还不成熟,存在较多bug,慎用。

使用负的nth-child来选择元素

使用负的nth-child来选择前3个元素,比如现在有个需求,要把一个列表里的前3个元素显示出来,可以这么写:

1
2
3
4
5
6
7
8
9
10
11
/* 方法一 */
ul li {
display: none;
}
ul li:nth-child(-n+3) {
display: block;
}
/* 方法二 */
ul li:not(:nth-child(-n+3)) {
display: none;
}

使用猫头鹰选择器

猫头鹰选择是值类似这种* + *,用通用选择器或者其他选择器加上相邻选择器组成的选择器,因为长得像猫头鹰,故取名猫头鹰选择器。猫头鹰选择器有很多妙用,比如可以为相邻元素设置外间距:

1
2
3
4
5
6
7
.section-owl div {
border: 1px dashed #ddd;
padding: 10px;
}
.section-owl div + div {
margin-top: 10px;
}

又或者可以实现上面那个分割效果:

1
2
3
.nav li + li {
border-left: 1px solid #ddd;
}

给 “默认” 链接定义样式

对于一些没有class属性的链接,可以给他定义特别的样式,以至于区别:

1
2
3
4
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}

创建等宽格子的表格

使用table-layout: fixed;可以创建等宽格子的表格。table-layout有2个属性值,fixedauto.

  • auto:默认的自动算法,表格的布局居于每个格子的内容而定,等每个格子的宽度都计算完成才能渲染出整个表格,效率不好。
  • fixed:固定布局的算法,格子的实际占位宽度是和宽度、间距以及边框决定的,和表格内容无关,所以可以一行一行的渲染表格。

用属性选择器来选择空链接

<a>链接没有内容,却有href属性的时候,显示其href属性:

1
2
3
a[href]:empty::before {
content: attr(href);
}

写一个宽高固定比例的盒子

对于一个宽度未知的盒子来说,想要写一个宽高比例固定的盒子,只需要设置padding属性即可,比如写一个宽高5:1的盒子:

1
2
3
4
5
6
7
8
9
10
11
12
13
.ratio-box {
height: 0;
position: relative;
padding-bottom: 20%;
}
.ratio-box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
}

css实现响应式布局中的字体弹性

在响应式布局中,字体大小应该自适应不同的视口宽度。比如设计稿宽度是750的,那么为了好计算可以设置当视口宽度为750时,1rem相当于100px。根据vw的定义将视口的宽度平均分成100份的宽度为1个vw。那么当视口宽度为750时,几个vw会等于100px呢。计算结果是100/7.5 = 13.3334个。

1
2
3
:root {
font-size: calc(13.3334vw);
}

这个时候假如750的设计图上有个文本的字号是30px,就可以设置对应的这个元素的font-size属性为0.3rem。

将彩色照片度灰

下面的代码可以将彩色照片度灰:

1
2
3
4
5
6
7
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

用border来写三角形

兼容IE6的三角形写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 等边三角形 */
.section-arrow .arrow-left {
width: 0;
height: 0;
font-size: 0; /* IE6会有默认的字体和行高,需要去除 */
line-height: 0;
overflow: hidden;
border-width: 15px;
border-right: 30px solid #c22c2c;
border-top: 15px dashed transparent;
border-bottom: 15px dashed transparent;
}
/* 等腰直角三角形 */
.section-arrow .arrow-left-top {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
border-width: 15px;
border-top: 30px solid #ae36a2;
border-right: 30px dashed transparent;
}

模糊文本

简单但很漂亮的文本模糊效果,简单又好看!

1
2
3
4
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

跨浏览器的透明度

1
2
3
4
5
6
.transparent {
filter: alpha(opacity=50); /* ie */
-khtml-opacity: 0.5; /* html, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* firefox, chrome, safari, opera */
}

链接的的状态

使用伪类来表示链接的状态,注意书写顺序:

1
2
3
4
5
6
7
8
9
10
11
12
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}

如果需要给超链接定义:访问前,已经被点击过,鼠标悬停,正在被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现
超链接的4种状态,需要有特定的书写顺序才能生效。:focus是表示获得输入焦点的时候触发。webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

差异性奇偶行

有时候需要在一个列表数据或者表格中,把奇数行和偶数行给差异性的标示出来,可以这样做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* odd表示奇数,even表示偶数 */
li {
background-color: #fff
}
li:nth-child(even) {
background-color: #f2f2f2;
}
/* 或者使用2n表示偶数,2n+1表示奇数 */
li {
background-color: #fff
}
li:nth-child(2n) {
background-color: #f2f2f2;
}

css悬浮提示效果

css悬浮效果核心思想就是用伪类获取元素的属性,当鼠标悬浮到元素上的时候在显示出来,通过绝对定位调整到合适的位置:

1
<a href="#" data-tooltip="步步走">bubuzou</a>

核心css:

1
2
3
4
5
6
7
a:before {
display: none;
content: attr(data-tooltip);
}
a:hover {
display: block;
}

禁止选择文本

在移动端的机器上,或者基于webkit的浏览器上点击一个元素的时候,经常会发现元素周围会包围一层灰色的阴影,通过设置不能选择文本即可解决:

1
2
3
4
5
6
7
8
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

小图标和文本对齐

小图标和文本对齐的核心思想是图标元素的行高和文本的行高一致,这样就天然对齐了,想要了解得更深入可以来这里看看。所以需要往图标元素里添加一个内联元素:

1
2
3
4
<div class="parent">
<i class="icon"></i>
对齐的文本
</div>

text-indent是为了隐藏文本内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent {
font-size: 14px;
line-height: 20px;
}
.parent .icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(../images/delete.png) no-repeat center;
text-indent: -99em;
white-space: nowrap;
letter-spacing: -1em;
color: transparent;
/* IE7 */
*text-indent: 0;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');
}
.parent .icon:before {
/* 伪元素插入空格文本 */
content: '\3000';
}