CSS 实用代码片段, 知识点

1 . div button 点击之后的凹凸效果

  &::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: #000;
		border: inherit;
		border-color: #000;
		border-radius: inherit;
		transform: translate(-50%, -50%);
		opacity: 0;
		content: " ";
	}
 &:active::before {
		opacity: 0.1;
	}

2. 常用水平居中 / 垂直居中

水平居中: 
left:50%; // 偏移父类宽的 50%
transform: translateX(-50%) // 偏移自身宽的 50%

垂直居中: 
top:50%; // 偏移父类高的 50%
transform: translateY(-50%) // 偏移自身高的 50%

3. display: inline-block 和 display: inline 的区别:

• inline-block 还是盒模型, 只不过是行内的
• inline 非盒模型, 类似于 span 和 a标签一样, 所以 height, width等盒属性,对其无效

4. display:none 和 visibility:hidden

• display:none 所在 css 块级会消失, 下面的元素则会自动上去,占用 display :none 的元素
• visibility:hidden 该元素隐藏, 但是其 css 块级不会消失, 相当于 oopacity:0

5. fill-available (针对 bloack 等级元素)

• 可以让 改 div 自动撑满到父 div 可用空间

<div id='father'>
	<div id='son'></div>
</div>
<style>

	#son{
    	height: fill-available; // son高度自动撑满到 father 的可用空间
    
    }

</style>

6. fit-content

• block 元素会跟着内部内容长宽自适应

7. background-clip

• 可以定义 background 的范围, 例如(是否包含 padding, content, border)