1、禁止文字被选中
1 .unselectable { 2 -moz-user-select: -moz-none; 3 -khtml-user-select: none; 4 -webkit-user-select: none; 5 6 /* 7 Introduced in IE 10. 8 See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 9 */ 10 -ms-user-select: none; 11 user-select: none; 12 } 13 /*整站的话 给body这个属性*/
2、垂直对齐
如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：
1 .verticalcenter{ 2 position: relative; 3 top: 50%; 4 -webkit-transform: translateY(-50%); 5 -o-transform: translateY(-50%); 6 transform: translateY(-50%); 7 }
使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性。
3、基于文件格式使用不同的样式
为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：
1 a[href^="http://"]{ 2 padding-right: 20px; 3 background: url(external.gif) no-repeat center right; 4 } 5 /* emails */ 6 a[href^="mailto:"]{ 7 padding-right: 20px; 8 background: url(email.png) no-repeat center right; 9 } 10 11 /* pdfs */ 12 a[href$=".pdf"]{ 13 padding-right: 20px; 14 background: url(pdf.png) no-repeat center right; 15 }
4、CSS：表格列宽自适用
对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space: nowrap;能让文本正确的换行
1 td { 2 white-space: nowrap; 3 }
5、包裹长文本
1 pre { 2 white-space: pre-line; 3 word-wrap: break-word; 4 }
6、制造模糊文本
1 .blurry-text { 2 color: transparent; 3 text-shadow: 0 0 5px rgba(0,0,0,0.5); 4 }
7、重置样式
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 font: inherit; 7 vertical-align: baseline; 8 outline: none; 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12 } 13 html { height: 101%; } 14 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } 15 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 16 ol, ul { list-style: none; } 17 blockquote, q { quotes: none; } 18 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 19 strong { font-weight: bold; } 20 table { border-collapse: collapse; border-spacing: 0; } 21 img { border: 0; max-width: 100%; } 22 p { font-size: 1.2em; line-height: 1.0em; color: #333; }
8、新版清除浮动（2011）
1 .clearfix:before, .container:after { content: ""; display: table; } 2 .clearfix:after { clear: both; } 3 /* IE 6/7 */ 4 .clearfix { zoom: 1; }
9、跨浏览器的透明(透明度的写法)
1 .transparent { 2 filter: alpha(opacity=50); /* internet explorer */ 3 -khtml-opacity: 0.5; /* khtml, old safari */ 4 -moz-opacity: 0.5; /* mozilla, netscape */ 5 opacity: 0.5; /* fx, safari, opera */ 6 }
10、现代字体栈
1 /* Times New Roman-based serif */ 2 font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 3 /* A modern Georgia-based serif */ 4 font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 5 /*A more traditional Garamond-based serif */ 6 font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 7 /*The Helvetica/Arial-based sans serif */ 8 font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 9 /*The Verdana-based sans serif */ 10 font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 11 /*The Trebuchet-based sans serif */ 12 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 13 /*The heavier "Impact" sans serif */ 14 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 15 /*The monospace */ 16 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
11、自定义文本选择
1 ::selection { background: #e2eae2; } 2 ::-moz-selection { background: #e2eae2; } 3 ::-webkit-selection { background: #e2eae2; }
12、为logo隐藏H1
1 h1 { 2 text-indent: -9999px; 3 margin: 0 auto; 4 width: 320px; 5 height: 85px; 6 background: transparent url("images/logo.png") no-repeat scroll; 7 }
13、图片边框偏光
1 img.polaroid { 2 background:#000; /*Change this to a background image or remove*/ 3 border:solid #fff; 4 border-width:6px 6px 20px 6px; 5 box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ 6 -webkit-box-shadow:1px 1px 5px #333; 7 -moz-box-shadow:1px 1px 5px #333; 8 height:200px; /*Set to height of your image or desired div*/ 9 width:200px; /*Set to width of your image or desired div*/ 10 }
14、CSS3：全屏背景
1 html { 2 background: url('images/bg.jpg') no-repeat center center fixed; 3 -webkit-background-size: cover; 4 -moz-background-size: cover; 5 -o-background-size: cover; 6 background-size: cover; 7 }
15、内容垂直居中
1 .container { 2 min-height: 6.5em; 3 display: table-cell; 4 vertical-align: middle; 5 }
16、强制出现垂直滚动条
1 html { height: 101% }
17、更好的 Table 边框
HTML 中的 table 没什么意思。它们非常古怪，难以设计成响应式的，而且很难与整体风格一致。比如说，你想为 table 和其中的元素添加上边框，那么td的边框会有重叠导致最外层是但边框，里面的是两个重叠在一起的边框。
有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table.
18、CSS 动画与变换
不要通过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。
下面是一个例子，我们想动画一个 ball，让它往右滑动。 不要去改变 left 的值，最好是使用 translateX() 。
1 .ball { 2 left: 50px; 3 transition: 0.4s ease-out; 4 } 5 /* Not Cool*/ 6 .ball.slide-out { 7 left: 500px; 8 } 9 /* Cool*/ 10 .ball.slide-out { 11 transform: translateX(450px); 12 }
transform 以及它的所有方法（translate, rotate, scale 等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。
16、placeholder颜色设置
1 /* 通用 */::-webkit-input-placeholder { color:#f00; }::-moz-placeholder { color:#f00; } /* firefox 19+ */:-ms-input-placeholder { color:#f00; } /* ie */input:-moz-placeholder { color:#f00; } 2 3 /* webkit专用 */#field2::-webkit-input-placeholder { color:#00f; }#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } 4 5 /* mozilla专用 */#field2::-moz-placeholder { color:#00f; }#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
17、
input button 点击的时候外边会有一个边框 蓝色的想要去掉
1 outline :none;
18、例如一段文字在某个容器中正常显示的话是三行，但是现在只让显示出来两行，超出两行外边的让现实省略号
1 display: -webkit-box; 2 -webkit-line-clamp: 2; 3 -webkit-box-orient: vertical; 4 font-size: 14px; 5 line-height: 20px; 6 color: #323232; 7 overflow: hidden; 8 text-overflow: ellipsis;
9 100px;
19、中间文字两边是线条
效果
代码
1 .title { 2 text-align: center; 3 height: 45px; 4 line-height: 45px; 5 font-weight: bold; 6 100px; 7 margin: 0 auto; 8 position: relative; 9 font-size: 16px; 10 color:#F50388; 11 } 12 .title:before { 13 content: ''; 14 73px; 15 height: 2px; 16 background: linear-gradient(to right, rgba(0, 0, 0, 0.1), #F50388 50%, 17 rgba(0, 0, 0, 0.1)); 18 display: block; 19 position: absolute; 20 right: 100%; 21 top: 48%; 22 } 23 .title:after { 24 content: ''; 25 73px; 26 height: 1px; 27 background: linear-gradient(to right, rgba(0, 0, 0, 0.1), 28 rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) ); 29 display: block; 30 position: absolute; 31 left: 100%; 32 top: 48%; 33 }
html
<div class="title">精品线路</div>
二、常见的css bug
1、在一个div元素中，里面有两个元素，分别左浮动和 有浮动，这时候 会出现 左浮动 并不是浮动到左边去了，导致浮动出现了问题，
解决方法，将有浮动的元素 放到左浮动的上变。