女王控的博客

CSS

25 篇文章

CSS世界强大文本处理能力

line-height 的另外一个朋友 font-size 第 5 章介绍过 line-height 和 vertical-align 的好朋友关系,实际上,font-size 也和 line-height 是好朋友,同样也无处不在,并且纸面上 line-height 的数值属性值和百分比值属性值都是相对于 font-size 计算的,其关系可谓不言而喻。 font-size 和 vertical-align 的隐秘故事 line-height 的部分类别属性值是相对于 font-size… »

CSS世界的层叠规则

所谓“层叠规则”,指的是当网页中的元素发生层叠时的表现规则。 默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点儿类似于真实世界中“论资排辈”的感觉。 z-index 只是 CSS 层叠规则中的一部分 在 CSS 世界中,z-index 属性只有和定位元素(position 不为 static 的元素)在一起的时候才有作用,可以是正数也可以是负数。理论上说,数值越大层级越高,但实际上其规则要复杂很多。 但随着 CSS3 新世界的到来,z… »

去除冗余 – 精简您的CSS样式代码

一些常见不必要CSS样式 与默认CSS样式一致 我们有时候写的CSS样式会与浏览器默认的CSS样式一致,有时候您自己都可能没有意识到。 常见的例子有: width / height 很显然,这段样式是没有必要的,默认的任何块状元素的高度几乎都是auto。 padding 上面有关body,p等标签的样式中有个样式是无效的,与默认值一致的,这个样式就是padding:0,对于body,p,h1~6这些标签,本身的padding值就是0,所以只需要margin:0就可以了。 因为ul,ol… »

浏览器样式小数的处理

解析差异 上面一行是11.9像素大小的文字,下面一行是11.4像素大小的文字,看看各个浏览器下都表现得怎么样: IE6浏览器下(IE下与此表现一致,避免重复,IE7下图略) Firefox浏览器下 chrome浏览器下(Safari同内核,同表现) 当文字大小11.9像素时,IE6和Firefox等浏览器的表现是不一致的。IE6下显示的是11像素大小的文字效果,而Firefox等w3c标准的浏览器则12像素显示,这就是差异所在,也是本文的关键核心所在。但在12.… »

html与body的一些特性

背景色 一般情况下,我们css控制的最高节点就是body,例如设置: body作为一个根节点起作用了, 标签未被激活,body担当类似于根节点的节点,其background背景色被浏览器俘获,浏览器界面背景色为background的背景色 按照对一般标签的理解,100像素的外边距应该不含有背景色的,然而显示的结果是(Firefox下表现与此类似): 一旦设置了 节点的background… »

0%