笔记:CSS的常用值和单位

在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值:

  • 数值: 长度值,用于指定例如元素宽度、边框(border)宽度或字体大小。

  • 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度,或默认的字体大小。

  • 颜色: 用于指定背景颜色,字体颜色等。

  • 坐标位置: 例如,以屏幕的左上角为坐标原点定位元素的位置。

  • 函数: 例如,用于指定背景图片或背景图片渐变。

数值

绝对单位

  • px:像素

一般来说,不会使用px以外的其他单位。

相对单位

相对于当前元素的字号( font-size )或者视口(viewport)尺寸

  • em:1em与当前元素的字体大小相同(更具体地说,一个大写字母M的宽度)。CSS样式被应用之前,浏览器给网页设置的默认基础字体大小是16像素,这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小,所以如果在父元素上设置了不同的字体大小,em的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位

  • rem: REM(root em)和em以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用,所以这听起来像一个比em更好的选择,虽然在旧版本的IE上不被支持。

  • vw, vh: 分别是视口宽度的1/100和视口高度的1/100,其次,它不像rem那样被广泛支持。

emrem现在常被用作移动端网页的开发制作。

同时,有些属性中使用负值(例如:margin:-100%;)完成一些布局效果

百分比

使用百分比值指定可以通过特定数值指定的大部分内容。 使用em或者百分比可以完成流动布局和固定宽布局。

颜色

CSS中指定颜色的方法主要通过十六进制值、RGB、HSL,其中RGB和HSL都有相应的模式——RGBAHSLA——不仅允许您设置想要显示的颜色,还有此颜色的透明度(a即为alpha通道。0是完全透明,1是完全不透明)。此外,此前已有的opacity属性,可以在动画中展现不同效果。

函数

一些函数作为属性值存在于CSS中。

例举些比较有趣的函数:

calc():四则运算来决定一个CSS属性的值。针对盒模型,它可以不用通过改变box-sizing,而是通过计算,来实现content-boxborder-box在外貌上的相似。也可以简单的设置一些边距,例如:width: calc(100% - 80px);

参考:MDN:CSS的值和单位

MDN:calc

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容