刺猬的开发笔记之css基础

刺猬在开发第一个小需求的时候，用到了scss，有一些用到的css样式，有些知其然不知其所以然，学习一下

属性名	常见值	备注说明
align-items	center, flex-start, flex-end, stretch	控制 flex 子项在交叉轴上的对齐方式
background	#FFF, linear-gradient(...), url(...)	设置元素背景样式，支持颜色/图片/渐变组合
border-radius	0, 4px, 50%, 24px	定义元素圆角大小，百分比值会创建椭圆形圆角
bottom	0, auto, 10%, 20px	绝对/固定定位元素的下边缘位置（需配合 position 使用）
box-sizing	border-box, content-box	控制元素尺寸计算方式（border-box 包含内边距和边框）
color	#FFFFFF, red, rgba(255,255,255,0.5)	定义文本颜色，支持十六进制/RGB/颜色关键字
display	flex, block, inline-block, none	设置元素显示类型（flex 启用弹性布局）
font-family	'PingFang SC', sans-serif, Arial	指定字体栈（优先使用第一个可用字体）
font-size	12px, 1rem, 34px, 100%	控制字体大小（绝对单位或相对单位）
font-variation-settings	"opsz" auto, "wght" 700	控制可变字体的参数（如字重、光学尺寸等）
font-weight	400 (normal), 600 (bold), 700	设置字体粗细（数值越大越粗）
height	auto, 100px, 50%, 100vh	定义元素高度（vh 单位基于视口高度）
justify-content	center, flex-start, space-between	控制 flex 子项在主轴上的分布方式
left	0, 50%, auto, 112px	绝对/固定定位元素的左边缘位置
letter-spacing	0px, 1px, -0.5px	设置字符间距（负值可收紧间距）
line-height	1.5, 48px, normal	定义行高（单位像素或无量纲比值）
margin	0, 10px auto, 5% 0	设置外边距（缩写顺序：上右下左）
opacity	0 (透明), 0.5, 1 (不透明)	控制元素透明度（影响所有子元素）
padding	0, 10px, 5% 10px	设置内边距（缩写规则同 margin）
pointer-events	auto, none	控制元素是否响应鼠标事件（none 可穿透点击）
position	absolute, fixed, relative, static	定位类型（fixed 相对于视口，absolute 相对于最近定位祖先）
right	0, auto, 10%	绝对/固定定位元素的右边缘位置
text-align	center, left, right, justify	文本水平对齐方式
top	0, 44px, 10%, auto	绝对/固定定位元素的上边缘位置
transform	translateX(-50%), rotate(45deg), scale(1.2)	应用 2D/3D 变换（常用于居中定位）
white-space	nowrap, normal, pre	控制空白处理（nowrap 强制不换行）
width	100px, 50%, 100vw, auto	定义元素宽度（vw 单位基于视口宽度）
z-index	0, 9999, auto	设置堆叠层级（数值越大越靠前，仅对定位元素有效）