走进css——01

阅读者最好有一点css基础，才能更好深入了解

css中常见长度单位

1. em
   相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸）
2. rem
   r即root，始终相对于根节点html的font-size进行缩放。（根据祖先html）
3. vh
   vh指当前屏幕可见高度的1%，即 height:100vh == height:100%;
   区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。但设置height:100vh，该元素会被撑开和屏幕高度一致。
4. vm
   Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%
5. px
   绝对长度单位，用于展示分辨率的大小，构成影像的最小单位。

操作滚动条样式

当内容超出当前盒子的大小会出现滚动轴
比如div内的p标签内容超出div的宽或者高，div就会出现滚动条
::-webkit-scrollbar {
	/* 滚动整体样式 */
} 			
::-webkit-scrollbar-thumb {
	/* 滚动滑块样式 */
}
::-webkit-scrollbar-track {
	/* 滚动轨道样式 */
}

关键字currentColor 和 inherit

大多数人都知道inherit，inherit可以用在任何的css属性中。inherit可以指定任何子元素继承父元素莫一属性。
inherit可以把当前字体，颜色，背景颜色设置为页面的其他部分相同，不需要重复指定。

currentColor本身就是很多css颜色属性的初始值。他会自动与文本或者body里的颜色保持一致。

css的继承性和权重

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） 文字类的*

标题标签不会继承父元素的文字大小
a标签不会继承父元素的文字颜色

签选择器 < 类选择器 < id选择器 < 行内样式 < !important
0,0,0,1 < 0,0,1,0 < 0,1,0,0 < 1,0,0,0 < 无穷大

注意：权重会叠加，继承的权重为0

css隐藏元素

1. display隐藏
   display:none 元素隐藏
   隐藏的元素不会占用空间。
2. visible 隐藏
   visible默认元素可见
   visible: hidden 元素隐藏，不会被读屏软件读取
3. opicaty 属性设置元素隐藏
   opicaty: 0 可以让该元素透明度为0，通过透明度让元素隐藏，但是该元素还在页面中占用位置，可能影响用户交互。