CSS3 常用属性速查表
把 CSS3 最常用的属性和技巧整理成速查表，写样式时对照查。
返回 Web 服务选择器 Selectors 10
.class { }类选择器
#id { }ID 选择器
element { }元素选择器
parent > child直接子元素
ancestor descendant后代元素
element + sibling相邻兄弟
element ~ sibling通用兄弟
[attr] / [attr="value"]属性选择器
:hover / :focus / :active伪类
::before / ::after伪元素
盒模型 Box Model 9
width: 100px; height: 100px;宽高
margin: 10px;外边距
padding: 10px;内边距
border: 1px solid #000;边框
box-sizing: border-box;包含边框和 padding 计算宽度
display: block / inline / inline-block;显示类型
display: none;隐藏元素
visibility: hidden;隐藏但占位
opacity: 0.5;透明度
Flex 布局 Flexbox 7
display: flex;启用 Flex 布局
flex-direction: row / column;主轴方向
justify-content: flex-start / center / space-between;主轴对齐
align-items: stretch / center / flex-start;交叉轴对齐
flex-wrap: wrap;换行
flex: 1;弹性增长
gap: 10px;元素间距
Grid 布局 Grid 7
display: grid;启用 Grid 布局
grid-template-columns: 1fr 1fr 1fr;定义列
grid-template-rows: 100px auto;定义行
grid-gap: 10px;网格间距
grid-column: 1 / 3;跨列
grid-row: 1 / 3;跨行
grid-template-areas: "header" "main" "footer";命名区域
定位 Positioning 7
position: static;默认（正常流）
position: relative;相对定位（相对自身）
position: absolute;绝对定位（相对最近定位祖先）
position: fixed;固定定位（相对视口）
position: sticky;粘性定位（滚动到阈值固定）
top: 0; right: 0; bottom: 0; left: 0;定位偏移
z-index: 100;层叠顺序
背景与渐变 Background & Gradient 7
background-color: #fff;背景色
background-image: url("bg.jpg");背景图
background-size: cover / contain;背景尺寸
background-position: center;背景位置
background-repeat: no-repeat;不重复
linear-gradient(to right, #000, #fff);线性渐变
radial-gradient(circle, #000, #fff);径向渐变
动画 Animation 6
transition: all 0.3s ease;过渡
transform: translateX(10px);平移
transform: scale(1.5);缩放
transform: rotate(45deg);旋转
@keyframes name { 0% {} 100% {} }定义动画
animation: name 1s infinite;应用动画
响应式 Responsive 6
@media (max-width: 768px) { }媒体查询
max-width: 100%;最大宽度
min-width: 0;最小宽度
vw / vh / vmin / vmax视口单位
rem / em相对单位（相对根/父元素）
clamp(1rem, 2vw, 2rem);响应式值（在范围内）
💡 提示
- box-sizing: border-box 让宽高包含边框和 padding，更符合直觉。
- Flex 适合一维布局（行或列），Grid 适合二维布局（行和列同时控制）。
- 移动端优先：先写小屏样式，再用 @media (min-width) 扩展大屏。