CSS补充颜色、尺寸知识

XiZev commented 2 months ago

颜色的alpha通道

标识了色彩的透明度，rgba

r：red g：green b：blue a：alpha

/* 完全透明的颜色，等同于transparent */
color: rgba(0, 0, 0, 0)
/* 完全不透明的颜色，等同于rgb */
color: rgba(0, 0, 0, 1)
/* 一个半透明的颜色 */
color: rgba(0, 0, 0, 0.5)

XiZev commented 2 months ago

rgba与opacity的区别

/* 控制范围更为精细，只有元素的背景是有透明度 */
background: rgba(255, 0, 0, 0.8)

/* 元素本身以及子元素都继承了透明度，比如字体透明度 */
background: rgb(255, 0, 0)
opacity: 0.8;

XiZev commented 2 months ago

alpha通道的其他写法

rgb写法： rgb(0 0 0 / 50%)：rgb的色值后面跟上 “/” + "透明度0%-100%"

16进制的写法：

00000080：前六位表示颜色，后两位表示透明度

XiZev commented 2 months ago

尺寸的百分比

相对单位，其相对于元素的参考系

普通元素的参考系，是父元素的内容区域content；
绝对（固定）定位元素的参考系，是父元素中第一个定位元素的padding区域

高度百分比的设置需要父元素有实际高度时才能生效

原因是如果父元素未设置高度，则由子元素来撑开，子元素的高度又根据父元素高度设置百分比，两者相互依赖，导致无效

注意点：

对margin、border、padding设置百分比，是相对于参考系的宽度

XiZev commented 2 months ago

最大最小宽高

min-height max-height min-width max-width

场景：当一个元素尺寸会自动变化时（比如尺寸百分比、图片宽高自适应图片内容）

PC端页面设置为设计稿的宽度
```
html {
min-width: 1250px;
}
```
页面中所有图片设置一个最大宽度，让其不超过容器
```
img {
max-width: 100%;
}
```

XiZev commented 2 months ago

CSS属性值的计算

初始状态下每个HTML元素具有所有CSS属性，但是没有值；

首先确定声明值，没有属性冲突的值，来源于作者样式表和浏览器样式表；
然后根据层叠原则处理冲突；

重要级（作者样式表大于浏览器样式表）；

优先级（考虑选择器权重）

次序级（考虑作者样式表书写书序）

再者，对仍然没有值的属性，可以继承的话，就继承；
最后，使用浏览器默认值

XiZev commented 2 months ago

a标签伪元素的书写顺序

a:link : {

}
a:visited {

}
a:hover {

}
a:active {

}

XiZev commented 2 months ago

选中第一个子元素 :first-child {} 选中最后一个子元素 :last-child {} 选中第an+b个子元素 :nth-child(an+b) {} 选中第一个指定类型的元素 :first-of-type {} 选中最后一个指定类型的元素 :last-of-type {} 选中第an+b个指定类型的元素 :nth-of-type(an+b) {}

XiZev commented 2 months ago

contenteditable 标签的布尔属性，可编辑任何内容 ---富文本多行文本框，只能编辑纯文本

XiZev / blog