1. The bump effect of div button click

  &::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;
	}
Copy the code

2. Commonly used horizontal center/vertical center

Horizontal center: left:50%; // Offset the width of the parent class50%
transform: translateX(-50%) // Offset by its own width50%

Copy the code
Vertical center: Top:50%; // The offset parent is high50%
transform: translateY(-50%) // Offset itself high50%

Copy the code

3. display: inline-block 和 display: inlineThe difference between:

  • inline-blockIt’s a box model, but in line
  • inlineNon-box model, something like thatspan 和 aSame tag, soheight.widthEqual box property, invalid for it

4. display:none 和 visibility:hidden

  • display:noneThe CSS block level will disappear, and the following elements will automatically go up, occupying the display: None element
  • visibility:hiddenThe element is hidden, but its CSS block level does not disappear, equivalent tooopacity:0

5. fill-available(For bloack rank elements)

  • You can make the changed div automatically fill up to the available space of the parent div
<div id='father'>
	<div id='son'></div>
</div>
<style>

	#son{
    	height: fill-available; // Son height automatically fills up the available space of father}</style>

Copy the code

6. fit-content

  • The block element ADAPTS to the length and width of its contents

7. background-clip

  • You can define the scope of background, for example (including padding, content, border)