关于CSS的一些记录(持续更新)

By | 2011/04/19

本人从来没有学习过CSS啥的,但是实际中总要使用,半路出家诸多不便,大多是看看别人的CSS,记那么几个单词,要用的时候堆砌上去就是了。比如说背景颜色怎么写就怎么也记不住,老以为是back-color,没效果再改一个backcolor,反复几次才行……这里就是记录一些与自己“想当然”的不符合的一些CSS行为。不断更新,当然这些对WEB一般了解的人就已经是基础的掉渣的东西了,自己的笔记而已~

span的宽度

例如<span style=”background:yellow;width:50px”>a</span>(为了明显,涂上颜色),我是想要出现一个宽度为50px的方块,实际上的效果:
a → span只是和里面的内容一样宽而已。。。
要这么写才行<span style=”display:inline-block;background:yellow;width:50px”>a</span>,效果是:

a → inline-block或者block属性才会使inline元素变得宽度度可控!具体一点“将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格”。

顺便记录一下IE中启用inline-block的方法(希望有朝一日不用这么写):

  • div {display:inline; zoom:1;...}
  • div {display:inline-block;...}
    div {display:inline;}

table中元素属性的继承

这是我在改这个博客的CSS的时候发现的,正文中的表格里的字大的异常,我又没有特别设置过,table里的文字不应该基础外面的font-size么?在firebug里看的时候,table的继承中是有body的属性的,可惜怎么改也没效果;然后在computed的属性里,就是完全不同的一个值……

没办法,要么专门为table写一个定义,要么用几次inherit,还是重新写一个比较好吧……

IE中的li元素

据说是IE6/IE7的一个经典BUG,ol/ul拥有layout后(如显式设置宽或高后), 列表符号消失, 若给li设置一个合适的左边距, 则列表符号又会重新出现;或者li拥有layout后(如显式设置宽或高后), 列表符号全变为1.

我碰到的问题与这些有点像又有点不同。我只是给ul设置了一个padding-left,在遨游里一看第一个li项目前面的小点没了,而且我的是IE8,但如果单纯打开IE8看,是正常的,一直以为是遨游的问题(曾经那么喜欢的浏览器,渐渐的也放弃了),后来有一次在EditPlus中查看,发现也是如此,不禁怀疑微软释放出来的接口有问题了。

正常(Chrome,纯IE8) Maxthon(IE8) 去掉padding的Maxthon
· XXX
  YYY
· ZZZ
XXX
YYY
· ZZZ
  XXX
· YYY
· ZZZ

现在是把padding-left去掉(没有现成的处理办法,也没那个精力好好研究),小圆点是出来了,可是不在第一行,算了……我也不用IE系的,别人嘛,我尽量第一项写一行好了。最后发现,去掉li的width好像就OK了(一开始没发现时因为使用的主题中CSS有两个错误,误会了N久)。

继承和覆盖

基本上内联的样式覆盖链接的样式,后定义的样式覆盖先定义的样式,这个猜猜也能想到。后来又知道了id的要高于class的,如果想保留class的话,就加上!important吧~ 一个传说中的优先级计算方法:

把css句子的单词组成定义为“数位”,像个十百位的数字一样,css中不同的单词代表不同的权重数位,分别是#id,.class,tag三个数位依次从高到低排列,组成了相当于十进制数字的百位,十位,个位。再把每个css句子中个各种单词的个数代入到刚刚划分的数位里,就可以得到一个类似于十进制数字的三位数,只是在css的优先级数位里,没有进位的概念,无数个低位单词也还是低于一个高位的单词。从而结论就是,按#id,.class,tag的数位统计了css的单词个数并代入各个数位后,只要比较两个css数字的大小(从高位到低位依次比较),就能得出两个css的优先级

哦对了,加了!important以后,即使的内联的style都不能覆盖……至少我在chrome上看到是这样的。

图片居中对齐

在做一个网上的项目的时候看到的,太神奇了,一辈子也想不到图片的对齐居然还和font-size扯上关系。

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size:175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

发表评论

您的电子邮箱地址不会被公开。