CSS中属性的值和单位

CSS中值的单位

1.颜色值

被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。

百分比表示

color: rgb(100%, 100%, 100%);

这个声明将红、蓝、绿 3 种原色都设置为最大值,结果组合显示为白色。相反,可以设置rgb(0%, 0%, 0%)为黑色。3 个百分值相等将显示灰色,同理哪个百分值大就偏向哪个原色。

数值

color: rgb(255, 255, 255);

数字范围从 0~255,3 个数值相等将显示灰色,同理哪个数值大哪个原色的比重就会加大。

十六进制颜色

color: #ffffff;

从 0~255,实际上十进制的 255 正好等于十六进制的 FF,一个十六进制的颜色值等于 3 组这样的十六进制的值,它们按顺序连接在一起就等于红、蓝、绿3种原色。

2.绝对单位

相对单位与绝对单位相比显示大小不是固定的,它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。

1) em

em 单位表示元素的字体高度,它能够根据字体的 font-size 属性值来确定单位的大小。

2) ex

ex 单位根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中,浏览器将通过 em 的值除以 2 得到 ex 的值。

3) px

px 单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。

实际设计中,建议网页设计师多使用相对长度单位 em,且在某一类型的单位上使用统一的单位。如设置字体大小,根据个人使用习惯,在一个网站中,可以统一使用 px 或 em。

3.百分比

百分比也是一个相对单位值。百分比值总是通过另一个值来计算,一般参考父对象中相同属性的值。例如,如果父元素宽度为 500px,子元素的宽度为 50%,则子元素的实际宽度为 250px。

百分比可以取负值,但在使用中受到很多限制。

猜你喜欢

转载自www.cnblogs.com/flyingcarp/p/10016929.html