CSS样式–被忽略的前端基础（二）

CSS样式–被忽略的前端基础（二）

---

前言

写css的时候有没有觉得属性值千奇百怪，有数值，有带单位的数值，有百分百，有函数，有颜色（red，#fff，rgba(255,255,255,0)）

CSS属性值种类

1、数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。

• 绝对单位px（像素）、mm（毫米）、cm（厘米）、in（英寸）、pt（点）、pc（12点活字？）
• 相对单位em（一个大写字母M的宽度，默认（相对浏览器默认字体大小）为16px）、ex（小写x的高度）、ch（数字0的高度）、rem、vw（视口宽度的1/100）、vh（视口高度的1/100）
• 无单位值，让元素完全去除外边框（margin: 0），行高（line-height：1.5），动画数值（animation-iteration-count: 5–动画执行的次数）
  2、百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。

p {
    font-size: 200%; //等同于16px*200% = 32px = 2em(16px是父容器的字体大小)
}

3、颜色: 用于指定背景颜色，字体颜色等。

• 关键词，如：color: red;
• 16进制，如：background-color: #ff0000;
• RGB，如： background-color: rgb(0,0,255);（rgb是一个函数，参数表示红、绿、蓝）
• HSL（没用过），如：background-color: hsl(0,100%,50%);（参数含义：色调，饱和度，明度）

• RGBA和HSLA，如：background-color: rgba(255,0,0,0.5);background-color: hsla(0,100%,50%,0.5)（跟grb和hsl一样，只是第四位增加了透明度，0是完全透明，1是完全不透明）
  4、坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。
  5、函数: 例如，用于指定背景图片或背景图片渐变。（CSS也是有函数（如：url、rgb、hsl）的，不要以为只有编程语言才有）

  注意rgba的透明度和opacity的区别，opacity的透明度表示整个元素（包括元素里字体等子元素）而rgba的透明度表示背景。

总结

知识体系很重要，如果只是一知半解的话，困惑也会随之而来。