CSS小代码

[TracerLee]

CSS代码片段收集

旨在通过日常的开发中汲取一些可贵的代码片段，方便查阅和复习。

[TracerLee]

css reset

来自http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js

@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}

[TracerLee]

IE6透明滤镜写法

.class {
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="your-image.png");}
}

[TracerLee]

loading keyframes

.loading {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 20px;
    animation: loading 1s steps(1) infinite 0s;
    background: url(../images/loading-sm.png) no-repeat 0 0;
}

@keyframes loading {
    0%     {background-position: 0 0;}
    9.09%  {background-position: -16px 0;}
    18.18% {background-position: -32px 0;}
    27.27% {background-position: -48px 0;}
    36.36% {background-position: -64px 0;}
    45.45% {background-position: -80px 0;}
    54.54% {background-position: -96px 0;}
    63.63% {background-position: -112px 0;}
    72.72% {background-position: -128px 0;}
    81.81% {background-position: -144px 0;}
    90.90% {background-position: -160px 0;}
    100%   {background-position: -176px 0;}
}

loading序列动画（loading-sm.png）

[TracerLee]

-webkit-filter 的用法

-webkit-filter 用法是标准的 CSS 写法，如：

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有：

• blur 模糊
• brightness 亮度
• contrast 对比度
• drop-shadow 阴影
• grayscale 灰度
• opacity 透明度
• sepia 褐色
• invert 反色
• saturate 饱和度
• hue-rotate 色相旋转

[TracerLee]

文本溢出显示省略号(…)

先回顾一下单行的做法：

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: [可选宽度];
}

多行的做法：

主要是通过借助WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp（文档）

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

其他javascript方案(Clamp.js)、兼容方案，请参考此文：

• http://www.css88.com/archives/5206

[TracerLee]

上下阴影效果

div {-webkit-mask-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff 10%,#fff 80%,hsla(0,0%,100%,.5) 90%,hsla(0,0%,100%,0));}

[TracerLee]

禁用A标签拖动

document.addEventListener("dragstart", function(event) { 
  if(event.target.tagName === 'A') event.preventDefault()
})

[TracerLee]

简易垂直居中

.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

[TracerLee]

display:-webkit-box

<div class="wrap">
  <div class="parent">
    <div class="child-one">child-1</div>
    <div class="child-two">child-2</div>
    <div class="child-three">child-3</div>
    <div class="child-four">child-4</div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.wrap {
  display: -webkit-box;
  -webkit-box-pack: center;
  border: 1px solid #000;
}
.parent {
  width: 500px;
  height: 200px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
}
.child-one {
  background: lightblue;
  -webkit-box-flex: 1;
  height: 100px;
}
.child-two {
  background: lightgray;
  -webkit-box-flex: 2;
  height: 110px;
}
.child-three {
  background: lightgreen;
  -webkit-box-flex: 3;
  height: 120px;
}
.child-four {
  background: pink;
  width: 100px;
  height: 50px;
}

演示： https://jsfiddle.net/TracerLee/1w8ufpc9/

[TracerLee]

table-cell 垂直居中

.center_table_cell {
    display: table;
}

.center_table_cell * {
    display: table-cell;
    vertical-align: middle;
}

BTW: table-cell 里面的内容如果是 inline-block 会无法居中。

[TracerLee]

table-cell 实现一列满足最小宽度

label {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}