淘宝段正淳的css笔记大全第4/4页

css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.

0px不需要单位，直接:margin:0 
盒模型的缩写，语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的 
css属性的最后一项”;”号省略。（不建议 ^_^） 
字体宽度normal用400代替,bold用700代替。 
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D; 
border边框的缩写，语法是border:width style color,类似boder:1px solid red; 
背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?) 
字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”. 
list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用. 
想凑10条, 还真难.就把删除无用换行符和空格算一个吧
一天大家在团队中讨论“未知图片垂直居中”的问题，突发奇想用vertical-align:middle这个属性来实现，于是抽了时间做了下面这个不成熟的例子：

CSS:

 div{
  width:140px;
  height:140px;
  text-indent:-8px;
  text-align:center;
  line-height:138px;
  background:red;
  font-size:12px;
  *font-size:120px;
  *text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  vertical-align:middle;
} 
HTML:

< div>& nbsp;<img src="ipodclassics.jpg" alt="iPod classic" />
初衷是不想用position来做,毕竟 大量的图片显示浏览器在渲染的时候会消耗 较多的资源。

缺点是 输出了 无意义的nbsp;, 而且font-size和font-indentd的计算公式不是很简单(所以以上的数字都是凑的^_^).

后来小马见了这个思路，用了点时间升级了代码,用:after输出代替了无趣nbsp ,代码见下。

CSS:

 .tb-p-c{
  display: block;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  *font-size:123px;
}
.tb-p-c img{
  vertical-align:middle;
}
.tb-p-c:after {
  content: ".";
  visibility: hidden;
  font-size: 12px;
  margin-left: -5px;
} 
HTML:

<a class="tb-p-c"><img src="jishi070912_2.jpg" /></a> 
这样子，恼人的nbsp消失了。大家对vertical-align:middle的渲染方式有了更进一步的了解了。还让很多同志发现了after这个伪类还可以用来hack.

结果圆心又给CSS升了次级：

CSS:

 .tb-p-c{
  display: table-cell;
  vertical-align:middle;
  width:140px;
  height:140px;
  text-align:center;
  *display: block;
  *font-size: 122px;
  background:red;
}
.tb-p-c img {
  vertical-align:middle;
} 
这是第三次的升级，由于时间关系，没有测试上面的代码，原因是利用了display来渲染，感觉上还是会让浏览器多次渲染，所以偶没测试 。
这次探讨给了我们很多很多的收获，相信如果有大家的参与，会有更多方式和我们没发现的观点。大伙别小气，多发表回复，一起提高。

最新评论