自己学习收集的CSS使用技巧

CSS使用技巧

我刚学习了简单的css，但是不知道怎么使用和组合，下面就是我学习收集的css的使用技巧，如果你有觉得有用的技巧，无妨可以点个关注。如果哪里有错可以私信我，谢谢大家😁

1. 左右固定，中间自适应展开

2. 继承父的长宽

3. 水平和垂直居中对齐

	display:flex;
	align-item:center;	//垂直上的位置
	justify-content:center;	//水平上的位置

4. 子元素要圆角效果(但不能在子元素设置)，在父元素设置圆角属性，需额外添加overflow:hidden

5. 背景模糊

backdrop-filter 可用于实现以下视觉效果：

模糊（blur）：使背景内容变得模糊，常用于创建毛玻璃效果。

亮度调整（brightness）：增加或减少背景的亮度。

对比度调整（contrast）：改变背景内容的对比度。

灰度（grayscale）：将背景转换为灰度图像。

色相旋转（hue-rotate）：改变背景的色相。

反色（invert）：反转背景的颜色。

透明度（opacity）：调整背景的透明度。

饱和度（saturate）：改变背景颜色的饱和度。

深褐色（sepia）：将背景转换为深褐色调。

投影（drop-shadow）：为背景添加阴影效果。

总结一下就是改变背景的视觉效果

	backdrop-filter: blur(10px);	//blur是变模糊，数值越大越模糊

6. 渐变背景(双色渐变，多色渐变)

渐变背景我直接看大佬的博客(有为什么不借鉴😏)

css渐变颜色的使用

这里我自己审美颜色不行，我一般在配色网站找好看的颜色😜(下面给了一个举例子，如果不适合可以在网上搜一下)
180个渐变背景颜色

配色网站

7. flex布局时最后一行少元素时不能按列对齐

我自己学习css不久，最擅长借鉴🤭
grid网格布局

8. 自适应大小

9. 定位的元素有普通盒子的位置效果

可以理解为用一个空盒子的位置和浮动元素的位置相同

10. 去掉行高(只有字体的高度)

	line-height: 1em;