WEB前端开发工程师必备实用的50个CSS技巧

1.黑白图像

这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

img.desaturate{filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);}

2.使用:not()在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/addborder/ .navli{border-right:1pxsolid#666; }……然后再除去最后一个元素……

//removeborder/ .navli:last-child{border-right:none; }……可以直接使用:not()伪类来应用元素：

.navli:not(:last-child) { border-right:1pxsolid#666; }这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

..navli:first-child~li { border-left:1pxsolid#666; }

3.页面顶部阴影

下面这个简单的CSS3代码片段可以给网页加上漂亮的顶部阴影效果：

body:before {
content:”“;
position:fixed;
top:-10px;
left:0;
width:100%;
height:10px;
-webkit-box-shadow:0px0px10pxrgba(0,0,0,.8);
-moz-box-shadow:0px0px10pxrgba(0,0,0,.8);
box-shadow:0px0px10pxrgba(0,0,0,.8);
z-index:100;
}

4.给body添加行高

你不需要分别添加line-height到每个p,h标记等。只要添加到body即可：

body{line-height:1;} 这样文本元素就可以很容易地从body继承。

5.所有一切都垂直居中

要将所有元素垂直居中，太简单了：

html,body {
height:100%;
margin:0;}
body {
-webkit-align-items:center;
align-items:center;
display:-webkit-flex;
display:flex;
}
看，是不是很简单。

注意：在IE11中要小心flexbox。

6.逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

ul>li:not(:last-child)::after {
content:”,”;
}
对最后一个列表项使用 :not() 伪类。

7.使用负的nth-child选择项目

在CSS中使用负的nth-child选择项目1到项目n。

li {
display:none;
} /selectitems1through3anddisplaythem/
li:nth-child(-n+3) {
display:block;
}

8.对图标使用SVG

我们没有理由不对图标使用SVG：

.logo{
background:url(“logo.svg”);
}
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

9.优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
}
注：请负责任地使用optimizeLegibility。此外，IE/Edge没有text-rendering支持。

10.对纯CSS滑块使用max-height

使用max-height和溢出隐藏来实现只有CSS的滑块：

.sliderul {
max-height:0;
overlow:hidden;
}
.slider:hoverul {
max-height:1000px;
transition:.3sease;
}

11.继承box-sizing

让box-sizing继承html：

html{
box-sizing:border-box;
}
,:before,*:after{box-sizing:inherit;}这样在插件或杠杆其他行为的其他组件中就能更容易地改变box-sizing了。

12.表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用table-layout:fixed来保持单元格的等宽：

.calendar{
table-layout:fixed;
}

13.用Flexbox摆脱外边距的各种hack

当需要用到列分隔符时，通过flexbox的space-between属性，你就可以摆脱nth-，first-，和last-child的hack了：

.list{
display:flex;
}
.list.person{
flex-basis:23%;
}
现在，列表分隔符就会在均匀间隔的位置出现。

14.使用属性选择器用于空链接

当a元素没有文本值，但href属性有链接的时候显示链接：

a[href^=”http”]:empty::before{
content:attr(href);
}
相当方便。

15.检测鼠标双击

---

HTML：

31.文字的水平居中

text-align:center;

32.link状态的设置顺序

a:link

a:visited

a:hover

a:active

33.用图片充当列表标志

ul { list-style:none }

ul li {

background-image:url(“path-to-your-image”);

background-repeat:none;

background-position:00.5em;

}

34.禁止自动换行

h1{white-space:nowrap;}

35.获得焦点的表单元素

input:focus{border:2pxsolidgreen;}

36.user-select禁止用户选中文本

div{

user-select:none;/Standardsyntax/

}

37.清除手机tap事件后element时候出现的一个高亮

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

38.增强用户体验，使用伪元素实现增大点击热区

.btn::befoer{

content:”“;

position:absolute;

top:-10px;

right:-10px;

bottom:-10px;

left:-10px;

}

39.伪元素实现换行，替代换行标签

inline-element::after{

content:”\A”;

white-space:pre;

}

40.will-change提高页面滚动、动画等渲染性能

/关键字值/

will-change:auto;

will-change:scroll-position;

will-change:contents;

will-change:transform;/示例/

will-change:opacity;/示例/

will-change:left,top;/两个示例/

will-change的使用也要谨慎，遵循最小化影响原则，不要这样直接写在默认状态中，因为will-change会一直挂着：

.will-change{

will-change:transform;

transition:transform0.3s;

}

.will-change:hover{

transform:scale(1.5);

}

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover.will-change{

will-change:transform;

}

.will-change{

transition:transform0.3s;

}

.will-change:hover{

transform:scale(1.5);

}

41.box-sizing让元素的宽度、高度包含border和padding

{

box-sizing:border-box;

}

42.calc()function,计算属性值

div{

width:calc(100%-100px);

}

例子就是让宽度为100%减去100px的值

43.css实现不换行、自动换行、强制换行

//不换行

white-space:nowrap;

//自动换行

word-wrap:break-word;

word-break:normal;

//强制换行

word-break:break-all;

44.perspective透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box{

perspective:400px;

}

45.设置图像透明度的两种方式

opcity:0.6；

background:rgba(0,0,0,.6)；

46.position定位属性

position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。

position的属性值：

absolute：生成绝对定位的元素；

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；

relative：生成相对定位的元素，相对于其正常位置经行定位。

z-index：指定一个元素的堆叠顺序。

47.cursor属性

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

CSS提供的cursor值：

pointer：小手指；

help：箭头加问号；

wait：转圈圈；

move：移动光标；

crosshair：十字光标。

通过pointer属性我们可以伪造超链接：

pointer

48.隐藏没有静音、自动播放的影片

video[autoplay]:not([muted]){

display:none;

}

49.Font-Size基准

/假设浏览器的默认的大小是16px，首先将其设置为10px(font-size:10/16)/

body{font-size:10/16;}

/然后就可以用em做统一字体单位了2.4em=24px/

h1{font-size:2.4em}

50.透明容器

.element{

filter:alpha(opacity=50);/forie/

-moz-opacity:0.5;/forff/

-khtml-opacity:0.5;/forwebkitaschrome/

opacity:0.5;/foropera/

}