1、清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是....// 清除浮动.clearfix{ ?zoom: 1;}.clearfix:after{ ?display: block; ?content: ‘‘; ?clear: both;}2、垂直水平居中在css的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式绝对定位方式且已知宽高position: absolute;top: 50%;left: 50%;margin-top: -3em;margin-left: -7em;width: 14em;height: 6em;绝对定位 ＋ 未知宽高 ＋ translateposition: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);//需要补充浏览器前缀flex 轻松搞定水平垂直居中( 未知宽高)display: flex;align-items: center;justify-content: center;3、 文本末尾添加省略号当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。宽度固定，适合单行显示...overflow: hidden;text-overflow: ellipsis;white-space: nowrap;宽度不固定，适合多行以及移动端显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;4、制造文本的模糊效果当我们希望给文本制造一种模糊效果感觉的时候，可以这样做color: transparent;text-shadow:0 0 2px rgba(0,0,0,.5);5、动画实现简洁loading效果我们来实现一个非常简洁的loading效果.loading:after{ ?display: inline-block; ?overflow: hidden; ?vertical-align: bottom; ?content: ‘\2026‘; ?-webkit-animation: ellipsis 2s infinite;}// 动画部分@-webkit-keyframes ellipsis{ ?from{ ???width: 2px; ?} ?to{ ???width: 15px; ?}}6、自定义文本选中样式默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)，如果我们想自己定制被选中的部分的样式呢？// 注意只能修改这两个属性 字体颜色 选中背景颜色element::selection{ ?color: green; ?background-color: pink;}element::-moz-selection{ ?color: green; ?background-color: pink;}7、顶角贴纸效果有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条就像hexo默认博客的fork me on github那个效果一样，如下图。 接下来我们开始一步步完成最左边的这个效果html<div class="wrap"> ?<div class="ribbon"> ???<a href="#">Fork me on GitHub</a> ?</div></div>css/* 外层容器几本设置 ?*/.wrap{ ?width: 160px; ?height:160px; ?overflow:hidden; ?position: relative; ?background-color: #f3f3f3;}.ribbon{ ?background-color: #a00; ?overflow: hidden; ?white-space: nowrap; ?position: absolute; ?/* shadom */ ?-webkit-box-shadow: 0 0 10px #888; ?-moz-box-shadow: 0 0 10px #888; ?box-shadow: 0 0 10px #888; ?/* rotate */ ?-webkit-transform: rotate(-45deg); ?-moz-transform: rotate(-45deg); ?-ms-transform: rotate(-45deg); ?-o-transform: rotate(-45deg); ?transform: rotate(-45deg); ?/* position */ ?left: -50px; ?top: 40px;}.ribbon a{ ?border: 1px solid #faa; ?color: #fff; ?display: block; ?font: bold 81.25% ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; ?margin: 1px 0; ?padding: 10px 50px; ?text-align: center; ?text-decoration: none; ?/* shadow */ ?text-shadow: 0 0 5px #444;}8、input占位符当我们给部分input类型的设置placeholder属性的时候，有的时候需要修改其默认的样式。input::-webkit-input-placeholder{ ?color: green; ?background-color: #F9F7F7; ?font-size: 14px;}input::-moz-input-placeholder{ ?color: green; ?background-color: #F9F7F7; ?font-size: 14px;}input::-ms-input-placeholder{ ?color: green; ?background-color: #F9F7F7; ?font-size: 14px;}9、移动端可点击元素去处默认边框在移动端浏览器上，当你点击一个链接或者通过Javascript定义的可点击元素的时候，会出现蓝色边框，说实话，这是很恶心的，怎么去掉呢?-webkit-tap-highlight-color: rgba(255,255,255,0);10、首字下沉要实现类似word中首字下沉的效果可以使用以下代码element:first-letter{ ?float:left; ?color:green; ?font-size:30px;}11、小三角在很多地方我们可以用得上小三角，接下来我们画一下四个方向的三角形.triangle{ ?/* 基础样式 */ ?border:solid 10px transparent;}/*下*/.triangle.bottom{ border-top-color: green;}/*上*/.triangle.top{ border-bottom-color: green;}/*左*/.triangle.top{ border-right-color: green;}/*右*/.triangle.top{ border-left-color: green;}可以看出画一个小三角非常简单，只要两行样式就可以搞定，对于方向只要想着画哪个方向则设置反方向的样式属性就可以12、鼠标手型一般情况下，我们希望在以下元素身上添加鼠标手型asubmitinput[type="iamge"]input[type="button"]buttonlabelselecta[href],input[type=‘submit‘], input[type=‘image‘],input[type=‘button‘], label[for], select, button { ?cursor: pointer;}13、屏蔽Webkit移动浏览器中元素高亮效果在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;

 移动端兼容性问题1.手机旋转字体会自动调整*{text-size-adjust:none}2.click出现点击区域闪一下a{-webkit-tap-highlight-color:rgba(0,0,0,0)}3.textarea,input默认框内有阴影textarea,input{appearance:none}4.iOS下默认识别页面中的电话<meta name="format-detection" contnent="telephone=no">5.:active兼容处理(1)给body添加ontouchstart(2)document.addEventListener(‘touchstart‘,function(){},false)6.某些圆角实效background-clip:padding-box;7.IE10 Inputy有叉号input:ms-clear{display:none}

 * {margin: 0;padding: 0;text-decoration: none;-webkit-overflow-scrolling: touch !important;/*iOS惯性滚动*/outline: none;-webkit-font-smoothing: antialiased;/*字体细长*/-moz-osx-font-smoothing: grayscale;}body {position: relative;margin: 0 auto;width: 100%;height: 100%;min-width: 900px;overflow-x: hidden;font-family: "微软雅黑";-webkit-touch-callout: none;/*禁用长按页面时的弹出菜单*/-webkit-tap-highlight-color: white;box-sizing: border-box;}li {list-style: none;}ul,ol {list-style-type: none;}select,input,img,select {vertical-align: middle;}img {border: none;display: inline-block}i {font-style: normal}a {text-decoration: none;-webkit-appearance: none;}*:focus {outline: none;}input,textarea,button {resize: none;-webkit-appearance: none;outline: none;}input {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}strong {font-weight: bold;}h3,h4 {font-weight: normal}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #cecece;}input:-moz-placeholder,textarea:-moz-placeholder {color: #cecece;}input[type="button"],input[type="submit"],input[type="file"],button {cursor: pointer;-webkit-appearance: none;}table {border-collapse: collapse;border-spacing: 0;}.hover-hand {cursor: pointer;/*悬浮显示手*/}/*禁止选中copy*/.dont-select {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}/*float*/.left {float: left;}.right {float: right;}.clearfloat:after {content: "";display: block;height: 0;clear: both;zoom: 1;visibility: hidden;}.clearfloat {zoom: 1;clear: both;}.clear {clear: both;zoom: 1;}.hide {display: none !important;}.show {display: block;}/*font-size*/.font12 {font-size: 12px;}.font13 {font-size: 13px;}.font14 {font-size: 14px;}.font15 {font-size: 15px;}.font16 {font-size: 16px;}.font18 {font-size: 18px;}.font19 {font-size: 19px;}.font20 {font-size: 20px;}.font22 {font-size: 22px;}.font24 {font-size: 24px;}.font26 {font-size: 26px;}.font28 {font-size: 28px;}.font30 {font-size: 30px;}.font32 {font-size: 32px;}.font36 {font-size: 36px;}.font48 {font-size: 48px;}.font60 {font-size: 60px;}.color-white {color: white;}.color-red {color: red;}.color-green {color: green;}.color-black {color: black;}.cl1685d3 {color: #1685D3;}.bg1685D3 {background: #1685D3;}.color-blue {color: blue;}.color-yellow {color: yellow;}.color-pink {color: pink;}.bg-yellow {background: yellow;}.bg-red {background: red;}.border-blue {border: 1px solid blue;}.border-black {border: 1px solid black;}.border-white {border: 1px solid white;}.tc {text-align: center;}.tl {text-align: left;}.tr {text-align: right;}/*一行多行显示省略号*/.one-line {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*clip ?修剪文本。*/}.more-line {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}/*flex*/.flex {display: flex;flex-wrap: nowrap;flex-direction: row;flex-flow: row nowrap;justify-content: flex-start;/*flex-start | flex-end | center | space-between | space-around;*/align-items: flex-start;/*flex-start | flex-end | center | baseline | stretch;*/align-content: flex-start;/*flex-start | flex-end | center | space-between | space-around | stretch;*/align-self: auto;}/*移动端1px*/.onepx-border:before {content: ‘‘;position: absolute;top: 0px;left: 0px;width: 200%;height: 200%;border: 1px solid blue;transform-origin: 0 0;transform: scale(0.5, 0.5);box-sizing: border-box;border-radius: 10px;}/*滚动条样式*/::-webkit-scrollbar {width: 6px;height: 6px}::-webkit-scrollbar-track-piece {background: #eee;}::-webkit-scrollbar-thumb:vertical {background: #666;}

第二版：

* {margin: 0;padding: 0;border: 0px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*清除手机tap事件后element 时候出现的一个高亮*/text-decoration: none;-webkit-overflow-scrolling: touch !important;/*iOS惯性滚动*/outline: none;-webkit-font-smoothing: antialiased;/*字体细长*/-moz-osx-font-smoothing: grayscale;}body {position: relative;margin: 0 auto;width: 100%;height: 100%;min-width: 900px;overflow-x: hidden;font-family: "微软雅黑";-webkit-touch-callout: none;/*禁用长按页面时的弹出菜单*/-webkit-tap-highlight-color: white;box-sizing: border-box;-webkit-transform: translateZ(0);/*CSS开启硬件加速*/-webkit-backface-visibility: hidden;/*使用CSS transforms 或者 animations时可能会有页面闪烁的bug*/}li {list-style: none;}ul,ol {list-style-type: none;}select,input,img,select {vertical-align: middle;}img {border: none;display: inline-block}i {font-style: normal}a {text-decoration: none;-webkit-appearance: none;}*:focus {outline: none;}input,textarea,button {resize: none;-webkit-appearance: none;/*移除浏览器默认的样式，比如chrome的input默认样式*/outline: none;}input {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}strong {font-weight: bold;}h3,h4 {font-weight: normal}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #cecece;}input:-moz-placeholder,textarea:-moz-placeholder {color: #cecece;}input[type="button"],input[type="submit"],input[type="file"],button {cursor: pointer;-webkit-appearance: none;}table {border-collapse: collapse;border-spacing: 0;}.hover-hand {cursor: pointer;/*悬浮显示手*/}.use-3D {-webkit-transform: rotateY(60deg);/* Chrome, Safari, Opera */-webkit-transform-style: preserve-3d;/* Chrome, Safari, Opera */transform: rotateY(60deg);transform-style: preserve-3d;}.perspective {/*perspective 透视 ?: 这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。*/perspective: 400px;}/*禁止选中copy*/.dont-select {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}/*float*/.left {float: left;}.right {float: right;}.clearfloat:after {content: "";display: block;height: 0;clear: both;zoom: 1;visibility: hidden;}.clearfloat {zoom: 1;clear: both;}.clear {clear: both;zoom: 1;}.hide {display: none !important;}.show {display: block;}/*font-size*/.font12 {font-size: 12px;}.font13 {font-size: 13px;}.font14 {font-size: 14px;}.font15 {font-size: 15px;}.font16 {font-size: 16px;}.font18 {font-size: 18px;}.font19 {font-size: 19px;}.font20 {font-size: 20px;}.font22 {font-size: 22px;}.font24 {font-size: 24px;}.font26 {font-size: 26px;}.font28 {font-size: 28px;}.font30 {font-size: 30px;}.font32 {font-size: 32px;}.font36 {font-size: 36px;}.font48 {font-size: 48px;}.font60 {font-size: 60px;}.color-white {color: white;}.color-red {color: red;}.color-green {color: green;}.color-black {color: black;}.cl1685d3 {color: #1685D3;}.bg1685D3 {background: #1685D3;}.color-blue {color: blue;}.color-yellow {color: yellow;}.color-pink {color: pink;}.bg-yellow {background: yellow;}.bg-red {background: red;}.border-blue {border: 1px solid blue;}.border-black {border: 1px solid black;}.border-white {border: 1px solid white;}.tc {text-align: center;}.tl {text-align: left;}.tr {text-align: right;}/*一行多行显示省略号*/.one-line {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;/*clip ?修剪文本。*/}.more-line {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.auto-gp {/*自动换行*/word-wrap: break-word;word-break: normal;}/*flex*/.flex {display: flex;flex-wrap: nowrap;flex-direction: row;flex-flow: row nowrap;justify-content: flex-start;/*flex-start | flex-end | center | space-between | space-around;*/align-items: flex-start;/*flex-start | flex-end | center | baseline | stretch;*/align-content: flex-start;/*flex-start | flex-end | center | space-between | space-around | stretch;*/align-self: auto;}/*移动端1px*/.onepx-border:before {content: ‘‘;position: absolute;top: 0px;left: 0px;width: 200%;height: 200%;border: 1px solid blue;transform-origin: 0 0;transform: scale(0.5, 0.5);box-sizing: border-box;border-radius: 10px;}/*滚动条样式*/::-webkit-scrollbar {width: 6px;height: 6px}::-webkit-scrollbar-track-piece {background: #eee;}::-webkit-scrollbar-thumb:vertical {background: #666;}