Open XiZev opened 2 months ago
/* 控制范围更为精细,只有元素的背景是有透明度 */
background: rgba(255, 0, 0, 0.8)
/* 元素本身以及子元素都继承了透明度,比如字体透明度 */
background: rgb(255, 0, 0)
opacity: 0.8;
rgb写法: rgb(0 0 0 / 50%):rgb的色值后面跟上 “/” + "透明度0%-100%"
16进制的写法:
00000080:前六位表示颜色,后两位表示透明度
相对单位,其相对于元素的参考系
高度百分比的设置需要父元素有实际高度时才能生效
原因是如果父元素未设置高度,则由子元素来撑开,子元素的高度又根据父元素高度设置百分比,两者相互依赖,导致无效
注意点:
对margin、border、padding设置百分比,是相对于参考系的宽度
min-height max-height min-width max-width
场景:当一个元素尺寸会自动变化时(比如尺寸百分比、图片宽高自适应图片内容)
html {
min-width: 1250px;
}
img {
max-width: 100%;
}
初始状态下每个HTML元素具有所有CSS属性,但是没有值;
首先确定声明值,没有属性冲突的值,来源于作者样式表和浏览器样式表;
然后根据层叠原则处理冲突;
- 重要级(作者样式表大于浏览器样式表);
- 优先级(考虑选择器权重)
- 次序级(考虑作者样式表书写书序)
再者,对仍然没有值的属性,可以继承的话,就继承;
最后,使用浏览器默认值
a标签伪元素的书写顺序
a:link : {
}
a:visited {
}
a:hover {
}
a:active {
}
选中第一个子元素
:first-child {}
选中最后一个子元素
:last-child {}
选中第an+b个子元素
:nth-child(an+b) {}
选中第一个指定类型的元素
:first-of-type {}
选中最后一个指定类型的元素
:last-of-type {}
选中第an+b个指定类型的元素
:nth-of-type(an+b) {}
contenteditable 标签的布尔属性,可编辑任何内容 ---富 文本 多行文本框,只能编辑纯文本
颜色的alpha通道
标识了色彩的透明度,rgba