css-居中

line-height

单行文本: 行高等于高度
旁边有img 或者其他行内块元素
vertical-align: middle;

水平居中

text-lign: center; /* 行内元素/行内块 */
width: fit-content; /* 宽度适应子元素 */
margin: auto; /* 用得做多的居中方法, 要求有宽度 */
margin: 0 auto; 
margin: 0 auto 0;

水平垂直居中 常用 三方法: 弹性盒 定位 栅格

div{
	display: flex;
	align-items: center;
	justify-content: center;
}

div{
	position: absolute; /* 脱离文档流 会改变元素类型, 变为行内块 */
	top: 50%;
	left: 50%;
	transfrom: translate(-50%,-50%); /* 用margin的话, 需要写具体的值, 百分比有问题 */
}
div{
	postion: grid;
	place-items: center;
}

margin

1. 他用 百分比单位, 实际用的都是父盒子的宽度. 而translate用的是自身的宽高.
2. margin-left: auto; 可以让使用了弹性盒的最后一个子元素靠右对齐.

calc

calc(50% - 50px) /* rem 转换? vw?

css 变量 var

::after 伪元素为什么默认是inline?

outline

button a input textarea 
1. outline不占空间. 不能只设置一边.
2. outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。