css - 使用技巧收集
Float 浮动
于此相关 会形成BFC的情况
-
浮动元素，float 除 none以外的值
-
绝对定位元素，position为absolute/fixed。
-
display为以下其中之一的值inline-blocks，table，table-cell，table-caption。
-
overflow除了visible以外的值（hidden，auto，scroll）。
-
fieldset元素
display: flow-root;
在浮动元素父级display属性设置为 flow-root。
还是会受到定位属性的影响。
// 清理浮动
.parent {
overflow: scroll; // hidden;
clear: both;
}
// 浮动兼容性处理
.wrapper{
display: flow-root;
}
@supports not (display:flow-root) {
.wrapper::after {
content: '';
display: table;
clear:both;
}
}
display不常用属性
- flow-root
It always establishes a new block formatting context for its contents. 官方解释display设置为这个属性会得到一个BFC空间，空间内类似一个Block块。- table-caption
作为表格的标题显示，不常见比较常用， 可以和 caption-side: bottom 定义特殊性的排版！。
- contents
样式规则使div元素不产生任何边界框
标签背景、padding、margin、border部分都不会渲染，字体和颜色属性会继承！
inline-block 会出现间隙的问题
产生原因
inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间
解决办法大概有5中：
- 父级font-size设置为0
- float浮动
- margin 设置负值 -.3333em
- 标签书写方式不分行
- letter-spacing: 设置负值 -.3333em;
颜色取值函数
颜色取值方式：#FFF(16进制)，rgb() rgba()，hsl() hsla() 3类。
基本色，红 绿 蓝 三色。数值小表示深色，数值大表示浅色。
函数rgba() ： red, green, blue, Alpha 其中 alpha 是色彩空间也是透明度，和opacity取值范围一样。
函数hsla() ：hue, saturation, lightness, alpha 这种颜色值设置不常见，但在用户体验要求很高的情况可用。
hue，表示色相，取值范围是0-360，演示如图。
saturation，饱和度，0-100%，饱和度越高颜色越鲜艳，为0时没有色相。
lightness，亮度，0-100%取值范围，数值小接近黑色，数值大接近白色。
混合模式
blend-mode是CSS的一种值类型。它用于选择当元素重叠时使用哪种颜色展示。可以用于background-blend-mode和mix-blend-mode这两个属性。
因此css中多了想PhotoShop一样的前景色和背景色，混合模式就是将两张叠加的背景图进行像素值进行一些模式的运算，得出新的背景图。
工作稳定后继续补充细节。
