阅读者最好有一点css基础,才能更好深入了解
css中常见长度单位
- em
相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:该div继承的父级字体大小*1.5。(根据他爸) - rem
r即root,始终相对于根节点html的font-size进行缩放。(根据祖先html) - vh
vh指当前屏幕可见高度的1%,即 height:100vh == height:100%;
区别:当元素没有内容时候,若设置height:100%该元素高度不会被撑开。但设置height:100vh,该元素会被撑开和屏幕高度一致。 - vm
Viewport width 视窗宽度。1vw = 视窗宽度的1%,1vw就是当前屏幕宽度的1% - 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隐藏元素
- display隐藏
display:none 元素隐藏
隐藏的元素不会占用空间。 - visible 隐藏
visible默认元素可见
visible: hidden 元素隐藏,不会被读屏软件读取 - opicaty 属性设置元素隐藏
opicaty: 0 可以让该元素透明度为0,通过透明度让元素隐藏,但是该元素还在页面中占用位置,可能影响用户交互。