第4章 值和单位
通读完这一章,感觉才有了整体认识.以前只知道个CSS属性值,哪里晓得还可以细分成这么多类别哦.这样才全面,清晰,系统嘛.
4.1 关键字,字符串和其他文本值
4.1.1 关键字
值用一个词表示的时候,就叫关键字.none就是最常见的关键字.
全局关键字
inherit继承initial初始值unset要么继承,要么初始值
all属性
- 除
direction和unicode-bidi外的所有属性 - 只接受这3个关键字
这几个东西的兼容性都不好,连chorme都不完全支持,所以就不详细做笔记了
4.1.2 字符串
类似于js中的字符串,同样支持单双引号,也支持转义字符
content: '我说:"你是谁啊?".'
4.1.3 URL
- 格式
url(protocol://server/pathname) - 在CSS中,相对URL相对于所在的样式表
- url和开始括号之间不能有空格
background: url (...) // => 报错
4.1.4 图像 <image>
可以取3种值
<url>外部链接<image-set>系列图像<gradient>渐变图像
4.1.5 标识符 <identifier>
书上没有示例,表示没看懂
4.2 数字和百分数
4.2.1 整数 <integer>
可以为正,也可以为负
font-size: 1rem;
4.2.2 数字 <number
就是可以带小数点而已
width: 2.5rem;
4.2.3 百分数 <percentage>
height: 22%;
4.2.4 弹性值 <number>fr
表示没有听说过
4.3 距离
4.3.1 绝对长度单位
这个在实际代码中基本用不上,就不做笔记了.不过有一段经典的话得抄下来.不知道这句话是作者写的,还是翻译加上去的.
在全世界几乎都使用米制系统的今天,规范中居然还有这个单位,真是有趣.由此也能看出美国对互联网的影响有多大,不过还是不介入社会问题了.
4.3.2 分辨率单位
dpi点每英寸 dot per inch: 即每英寸上显示多少个点- 这个点是屏幕上的物理像素点
dpcm点每厘米 dot per centmeterdppx点每像素单位 dot per px: 每个px单位显示的点数- 1dppx相当于96dpi
这些单位目前只能在媒体查询中使用
4.3.3 相对长度单位
em:小写字母m的宽度
- 1em等于当前元素的
font-size属性值 - 如果是
font-size,则相对于父元素
ex: 小写字母x的高度
- 其他表现和
em一致
rem
- 始终相对于根元素计算
- 其他和
em一致
ch: 等于所用字体中0的进距
- 进距指一个字形的起点到下一个字形的起点之间的距离
- 一般情况下,这段距离等于字形本身的宽度加上侧边的间距
这个感觉用不上啊,不同字体0的宽度不一样,并且在
ie11中还还有毛病
vw: 根据视区宽度计算 － 会根据浏览器容器缩放而缩放
vh: 根据视区高度计
vmin: 根据视区宽高小的那个计算
vmax: 根据视区宽高大的那个计算
4.4 计算值
calc(): calculate,支持PMDAS,括号,指数,乘,除,加,减.有一些限制
+和-号两边的值必须一样
5 + 2.7 => 7.7
5em + 2.7 => 报错
5em + 10px => 有效,因为都是长度单位
*两边必须有一个是<number>
2.5em * 2 => 5em
2.5em * 2.5em => 不对,结果是平方了
2.5em * 2.5cm => 报错
/右边那个必须是<number>
30em / 10 => 3em
30 / 10em => 报错
- 不能除以0
- 运算符两边要有空白
- 最多使用20个算子
4.5 属性值
attr: 取html属性值
本来还以为发现了一个神器,结果所有浏览器都不支持,2019/08/13
4.6 颜色
4.6.1 具名颜色
就是平时经常用的red,black这些
- 根据
X11 RGB标准值扩展 CSS Color Module Level 4定义了148个
4.6.2 RGB和RGBa颜色
函数式RGB颜色
- 可以使用百分比和数字
rgb(100%, 100%, 100%) => 等价于 rgb(255, 255, 255)
- 超出范围将会被裁剪
rgb(200%, -10, 100) => 等价于 rgb(255, 0, 100)
RGBa颜色
- 多了一个alpha通道,用于控制透明度
16进制RGB值: #RRGGBB
- 如果两个数字相等可以用简短写法
#000 => 等于 #000000 等于 rgb(0, 0, 0)
以前一直误解是16进制颜色......原来实际只是RGB的别名而已
16进制RGBa颜色
- 第7,8个就是alpah通道
之前在用蓝湖时,不小心把哪给点到了,一直出来8个数的16进制颜色...原来是它!!!!
4.6.3 HSL和HSLa颜色
从来没用过,且16进制和rgb已经完全能满足了,这个就不记笔记了
4.6.4 颜色关键字
transparent: 完全透明
- 等同于
rgba(0, 0, 0, 0)
currentColor: 当前元素color属性
以前从来没听说过呀,并且除了IE8,其他都支持也
4.7 角度<angle>
在<number>后面跟如下单位:
deg: 度数,完全的圆周是360度
grad: 百分度,完整的圆周是400百分度
rad: 弧度,完整的圆周是2pai
turn: 圈数,完整的圆周是1圈
- 旋转动画中最常用
4.8 时间 <time>和频率 <frequency>
时间:后面跟s或者ms
- 在过渡和动画中使用
频率: 视听CSS中使用, 单位hz
4.9 位置<position>
用于指定图像在背景中的位置
- 1个值的时候
- 如left/25%,第2个值默认为center
50% => 上下左右居中对齐
left => 横向居左垂直居中对齐
- 2个值的时候
- 前一个值始终是横向值
- 后一个值始终是纵向值
left bottom => 横向居左垂直居下对齐
top bottom => 报错
left right => 报错
- 3个值的时候
- 处理方式和4个值的时候一样
- 最后一个偏移量默认为0
right 10px bottom => 向下偏移10px
- 4个值的时候
- 必须有两个长度和百分数
- 前面两个是关键字
- 后面两个是偏移量
right 10px bottom 30px => 向左偏移10px,向上偏移30px
4.10 自定义值
类似于预处理器里面的变量
- 使用
var()调用 - 区分大小写
- 块级作用域
html {
--base-color: #333;
}
h1 {
color: var(--base-color);
}
IE和国产浏览器没法搞,暂时用不了了....19-08-14
