非常有用的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阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249