非常有用的CSS代码片段

纯CSS美化单复选框（checkbox、radio）

        label {
            font-size: 12px;
            cursor: pointer;
        }
        label i {
            font-size: 12px;
            font-style: normal;
            display: inline-block;
            width: 12px;
            height: 12px;
            text-align: center;
            line-height: 12px;
            color: #fff;
            vertical-align: middle;
            margin: -2px 2px 1px 0px;
            border: #2489c5 1px solid;
        }
        input[type="checkbox"], input[type="radio"] {
            display: none;
        }
        input[type="radio"] + i {
            border-radius: 7px;
        }
        input[type="checkbox"]:checked + i, input[type="radio"]:checked + i {
            background: #2489c5;
        }
        input[type="checkbox"]:disabled + i, input[type="radio"]:disabled + i {
            border-color: #ccc;
        }
        input[type="checkbox"]:checked:disabled + i, input[type="radio"]:checked:disabled + i {
            background: #ccc;
        }

<label><input type="checkbox"><i>✓</i>复选框</label><br>
<label><input type="checkbox" checked><i>✓</i>复选框</label><br>
<label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
<label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
<label><input type="radio" name="abc"><i>✓</i>单选框</label><br>
<label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>
<label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
<label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>

修改chrome记住密码后自动填充表单的黄色背景

// 大体可以通过input : -webkit-autofill来进行修改！
input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}

IOS手机浏览器字体齿轮

修改-webkit-font-smoothing属性，结果是：

-webkit-font-smoothing: none: 无抗锯齿
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

怎么让Chrome支持小于12px 的文字？

这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？
我们的做法是：
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！

<style>
   p span {
            font-size: 10px;
            -webkit-transform: scale(0.8);
            display: block;
        }
</style>
<p><span>haorooms博客测试10px</span></p>

给 body 添加行高

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

body {
  line-height: 1;
}

逗号分隔的列表

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

ul > li:not(:last-child)::after {
  content: ",";
}

优化显示文本

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

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

所有一切都垂直居中

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

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

图片垂直居中对齐

第一种：table-cell法

<div class="test_box">
    ![](book.jpg)
</div>

.test_box {display:table-cell;width:200px;height:200px;vertical-align:middle;text-align:center;
    *float:left;*font-family:simsun;*font-size:200px;*line-height:1;
    border:1px solid #000000;
}
.test_box img {vertical-align:middle;}

第二种：span法

<div class="test_box">
    <span class="hook"></span>
    <a href="http://blog.linxz.de/css_book/" target="_blank">![](book.jpg)</a>
</div>

.test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}
.test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.test_box img {vertical-align:middle;border:0 none;}

超出3行显示省略号

.yourclassname {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

限制输入字数，超出部分显示...

.word-keep {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

文本溢出省略

.textoverflow a {
    display:block;
    width:120px;
    margin: 0px 0px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    -o-text-overflow: ellipsis;     /* for Opera */
    text-overflow: ellipsis;        /* for IE */
}
.textoverflow:after{ content: "..."; }/* for Firefox */
@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }

长英文自动换行的最终解决方法

word-wrap: break-word;  // 控制换行  使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
word-break:break-all; // 是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
white-space: pre-wrap;

移动端-禁止长按选中文本，如果想要文本可以复制，直接去掉下面的样式即可

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

添加一个类，对于需要禁止的dom添加这个类。用js方法也能实现：

ontouchstart="return false;"   //在需要禁止的dom上添加这段代码

常用字体

微软雅黑 "Microsoft YaHei"
// 比较好看的字体，细体
font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
font-family: "Hiragino Sans GB","华文细黑","STHeiti","微软雅黑","Microsoft YaHei",SimHei,"Helvetica Neue",Helvetica,Arial,sans-serif;

PC端 css内外屏

//外屏：
.ww{width:100%;min-width:1190px;}
//内屏：
.w{width:1190px;margin:0 auto;}

图片在IE6浏览器中也垂直居中

<p>CAN HAS VERTICAL CENTER?</p>
<p>
    ![](/pics/smiley.png)
    <span class="for_ie6"></span>
     CAN HAS VERTICAL CENTER?
</p>
    
div {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

img { vertical-align: middle; }

.for_ie6 { display: inline-block; }
.for_ie6 { display: inline; }

@font-face

@font-face也是CSS3的属性之一，他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体，具体使用：

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('☺'),
    url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
h2 {
    font-family:'Graublau Web';
}

基本的CSS Sprite按钮

a { 
  display: block; 
  background: url(sprite.png) no-repeat;
  height: 30px; 
  width: 250px; 
}
a:hover {
  background-position: 0 -30px; 
}

使用 max-height 来建立纯 CSS 的滑块，用来显示溢出的部分

max-height 与 overflow hidden 一起来建立纯 CSS 的滑块：

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

鼠标移入滑块元素时增大它的 max-height 值

垂直居中任何元素

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

另一种方式：

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

水平居中元素

方式一：CSS3 transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%:
    transform: translateX(-50%);
}

方式二：flex 布局

.parent {
    display: flex;
    justify-content: center;
}

针对字符的样式

text-indent : 1em;
// 设置文本的缩进，可以为负值
letter-spacing: 1em;
// 设置文字之间的间隔，可以为负值
text-transform : none | capitalize | uppercase | lowercase
none : 　无转换发生 
capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生 
uppercase : 　转换成大写 
lowercase : 　转换成小写
检索或设置对象中的文本的大小写。

常用的选择器

// 使用 :not() 选择器来决定表单是否显示边框
/* 添加边框 */
.nav li {
  border-right: 1px solid #666;
}
//为最后一个元素去除边框
/* 去掉边框 */
.nav li:last-child {
  border-right: none;
}
//不过不要这么做，使用 :not() 伪类来达到同样的效果：
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}
// 当然，你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ，但是 :not() 更加清晰，具有可读性。

// 只选择第五个元素
li:nth-child(5){ color: green; }
//选择除了前面的五个之外的所有元素
li:nth-child(n+6){ color: green; }  
//只选择前面的5个
li:nth-child(-n+5){ color: green; }  
//从开始的那个，选择每第四个
li:nth-child(4n-7) { /* or 4n+1 */ color: green; }  
li:nth-child(even){ color: green; }  
//选择奇数或者偶数
li:nth-child(odd){ color: green; }  
//选择最后一个元素
li:last-child { color: green; }  
//选择倒数第二个
li:nth-last-child(2){ color: green; }

更多详细内容可以看这个：
有用的:nth-child秘方
https://www.qianduan.net/useful-nth-child-recipies/

字体渐变色 2色

background: -webkit-linear-gradient(top,#fff481,#ffa900);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

字体渐变色 4色

background: -webkit-linear-gradient(top,#fc0,#f30 50%,#c00 51%,#600);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

label标签和表单控件垂直居中对齐

label, input {
    display: inline-block;
    vertical-align: middle;
    *display:inline;
    *zoom: 1;
    *vertical-align: auto;
}

渐变背景

background-image: linear-gradient(rgba(2, 101, 159, .3) 0, rgba(2, 101, 159, 0.3) 100%);

文本两端对齐的样式

-ms-word-wrap: break-word;
      word-wrap: break-word;
      text-align: justify;

删除线样式

.text_through {
    text-decoration: line-through;
}

清除浮动样式

.cf:before,
.cf:after {
    display: table;
    content: ' ';
}

.cf:after {
    clear: both;
}

placeholder颜色重置

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #9296b2;
    opacity: 1;
    font-size: 0.37333333333333335rem;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #9296b2;
    opacity: 1;
    font-size: 0.37333333333333335rem;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #9296b2;
    opacity: 1;
    font-size: 0.37333333333333335rem;
}

::-webkit-input-placeholder {
    color: #b1b1b1;
}

::-moz-input-placeholder {
    color: #b1b1b1;
}

:-moz-placeholder {
    color: #9296b2;
    opacity: 1;
    font-size: 0.37333333333333335rem;
}

::-moz-placeholder {
    color: #9296b2;
    opacity: 1;
    font-size: 0.37333333333333335rem;
}

:-ms-input-placeholder {
    color: #b1b1b1;
}

用纯css改变下拉列表select框的默认样式

select {
  border: solid 1px #000;
  /*清除select选择框默认的样式*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

去除iphone浏览器中默认input内阴影样式

-webkit-appearance:none;

媒体查询

@media (min-width: 50em) {
}

@media only screen and (min-width: 26.7em) and (max-width: 49.9999em) {
}

@media only screen and (min-width: 22.9em) and (max-width: 26.69999999999em) {
}

@media (max-width: 22.857142857142858em) {
}


// 以px为单位：
@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的设备*/

@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1024的设备*/

@media (min-width: 1280px) {
body{font-size: 22px;}
} 

@media (min-width: 1366px) {

body{font-size: 24px;}
}  

@media (min-width: 1440px) {
body{font-size: 25px !important;}
} 

@media (min-width: 1680px) {
body{font-size: 28px;}
} 

@media (min-width: 1920px) {
body{font-size: 33px;}
}

移动端的media

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }

// 更精准
/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

@media screen and (min-width: 320px) and (max-width: 480px) {  }

/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}

/* 大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}

/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
}

/* 横屏 */
@media screen and (orientation:landscape){
}

动画样式 animate

.bounceIn {
    -webkit-animation: bounceInDown 0.8s ease;
    animation: bounceInDown 0.8s ease;
}

.bounceOut {
    -webkit-animation: bounceOut 0.8s 2s ease both;
    animation: bounceOut 0.8s 2s ease both;
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,816评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,729评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,300评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,780评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,890评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,084评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,151评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,912评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,355评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,504评论 4赞 334
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,150评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2赞 351