值得收藏的CSS小技巧

在工作中,为了提升工作效率与持续学习,常常会收集整理很多素材,有网站案例源码,有片段的代码特,在这里我收集的一些CSS小技巧。

1. 容器水平居中

先该容器设置一个明确宽度,然后将margin的水平值设为auto即可

div.horizontal-center {
  width: 760px;
  margin: 0 auto;
}

// HTML
<div class="horizontal-center "></div

2. 容器垂直居中

比如,有一大一小两个容器,请问如何将小容器垂直居中?

//首先,将大容器的定位为relative。
div.large {
  position: relative;
  height: 200px;
  background: red; //非必须
}

// 然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,
// 最后将它margin-top上移本身高度的50%即可。
div.small {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
  background: purple; //非必须
}

// HTML
<div class="large">
  <div class="small">xxx</div>
</div>

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

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

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
   flex-basis: 23%;
}

现在,列表分隔符就会在均匀间隔的位置出现。

4. 如何使得较大的图片,能够自动适应小容器的宽度?

CSS可以这样写:

img {max-width: 100%}

5. 黑白图像

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

// HTML
<img class="desaturate" src="img01.png"/>

6. 图片水平反转

 img.flip-h {
  -ms-filter: "FlipH";
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
}

// HTML
<img class="flip-h" src="avatar.jpg" />

7. font-size基准

浏览器的缺省字体大小是16px,你可以先将基准字体大小设为10px:

html { font-size:62.5%;}

后面统一采用rem作为字体单位,2.4rem就表示24px

h1 {font-size: 2.4 em}

8. text-transform

text-transform用于将所有字母变成小写字母、大写字母或首字母大写

// 把字母转换成大写
.transform-uppercase {
  text-transform: uppercase;
}

// 把字母转换成小写
.transform-lowercase {
  text-transform: capitalize;
}

// 首字母大写
.transform-capitalize {
  text-transform: capitalize;
}

// HTML
<div class="transform-uppercase">upper case</div> // UPPER CASE
<div class="transform-lowercase">LOWER CASE</div> // lower case
<div class="transform-capitalize">capitalize</div> // Capitalize

9. font-variant

用于将字体变成小型的大写字母(即与小写字母等高的大写字母)

.font-small {
  font-variant: small-caps;
}

// html
<div class="font-small">abcd</div> 

10. 模糊文本

简单但很漂亮的文本模糊效果,简单又好看!

.blur {
  color: transparent;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

// HTML
<div class="blur">blur</div>

11. CSS首字放大

p:first-letter {
  display: block;
  float: left;
  margin: -3px 0px 0 0;
  color: red;
  font-size: 1.4em;
  font-family: Helvetica;
}

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

.unselect { user-select: none; }

13. 优化显示文本

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

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

注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持

14. 容器透明度设置

将一个容器设为透明,可以使用下面的代码:

.element {
  -moz-opacity: 0.5; // Firefox
  -khtml-opacity: 0.5; // webkit核心的浏览器
  filter: alpha(opacity=50); // IE专用的
  opacity: 0.5; // Opera
}

// HTML
<div class="element"></div>

15. CSS三角形

如何使用CSS生成一个三角形?

.triangle {
  height: 0px;
  width: 0px;
  border-style: solid;
  border-width: 0px 300px 300px 300px;
  border-color: transparent transparent green transparent;
}

// HTML
<div class="triangle"><div>

16. 取消IE文本框的滚动条

textarea { overflow: auto; }

17. 使用 :not() 取消底部边框

.nav li:not(:last-child) {
  border-bottom: 1px solid #666;
}

// 通过此方法也可以取消第一个元素的顶部边框
// .nav li:not(:first-child) {}

// HTML
<ul class="nav">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

18. 页面顶部阴影

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 100;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}

19. 继承 box-sizing

让 box-sizing 继承 html,这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

20. 禁用鼠标点击事件

.disabled { pointer-events: none; }

// HTML
<a href="https://www.baidu.com" class="disabled">xxx</a>

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

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

a[href^="http"]:empty::before {
  content: attr(href);
}

// HTML
<a href="https://www.baidu.com"></a> // 有效
<a href="https://www.baidu.com" /> // 这种标签无效
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257