一、盒模型相关
- width / height:元素宽度/高度
css
.box { width: 100px; height: 100px; }
- padding:内边距(上右下左)
css
.box { padding: 10px 5px 10px 5px; } /* 简写:padding: 上下 左右; */
- border:边框(宽度 样式 颜色)
css
.box { border: 1px solid #000; }
- margin:外边距(上右下左)
css
.box { margin: 0 auto; } /* 水平居中 */
- box-sizing:盒模型计算方式
css
.box { box-sizing: border-box; } /* 包括padding和border在内的宽度 */
二、布局相关(Flexbox和Grid)
Flexbox
- display: flex:定义弹性容器
css
.container { display: flex; }
- flex-direction:主轴方向(row, column)
css
.container { flex-direction: row; }
- justify-content:主轴对齐方式
css
.container { justify-content: center; }
- align-items:交叉轴对齐方式
css
.container { align-items: center; }
- flex-wrap:是否换行
css
.container { flex-wrap: wrap; }
- flex:子元素的伸缩性(flex-grow, flex-shrink, flex-basis)
css
.item { flex: 1; } /* 等分剩余空间 */
Grid布局
- display: grid:定义网格容器
css
.container { display: grid; }
- grid-template-columns / grid-template-rows:定义列和行
css
.container { grid-template-columns: 100px 1fr 2fr; }
- gap:网格间距
css
.container { gap: 10px; }
- grid-column / grid-row:项目放置位置
css
.item { grid-column: 1 / 3; } /* 占据第1到第3列 */
三、定位
- position:定位方式(static, relative, absolute, fixed, sticky)
css
.box { position: relative; }
- top / right / bottom / left:定位偏移
css
.box { top: 10px; left: 20px; }
- z-index:堆叠顺序
css
.box { z-index: 10; }
四、背景与颜色
- background-color:背景颜色
css
.box { background-color: #fff; }
- background-image:背景图片
css
.box { background-image: url('image.jpg'); }
- background-size:背景尺寸(cover, contain, 具体值)
css
.box { background-size: cover; }
- background-position:背景位置
css
.box { background-position: center; }
- background-repeat:背景重复
css
.box { background-repeat: no-repeat; }
五、文本与字体
- color:文本颜色
css
p { color: #333; }
- font-family:字体
css
body { font-family: Arial, sans-serif; }
- font-size:字体大小
css
p { font-size: 16px; }
- font-weight:字体粗细(normal, bold, 100-900)
css
h1 { font-weight: bold; }
- text-align:文本对齐(left, center, right, justify)
css
p { text-align: center; }
- line-height:行高
css
p { line-height: 1.5; }
- text-decoration:文本装饰(none, underline, line-through)
css
a { text-decoration: none; }
六、显示与可见性
- display:显示类型(block, inline, inline-block, none)
css
.box { display: inline-block; }
- visibility:可见性(visible, hidden)
css
.box { visibility: hidden; } /* 隐藏但占据空间 */
- opacity:透明度(0.0-1.0)
css
.box { opacity: 0.5; }
七、变换与动画
- transform:变换(旋转、缩放、移动、倾斜)
css
.box { transform: rotate(45deg) scale(1.2); }
- transition:过渡效果
css
.box { transition: all 0.3s ease; }
- animation:动画(配合@keyframes)
css
.box { animation: move 2s infinite; }
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
八、其他常用属性
- cursor:鼠标样式(pointer, default, text)
css
button { cursor: pointer; }
- overflow:溢出处理(visible, hidden, scroll, auto)
css
.box { overflow: auto; }
- box-shadow:盒子阴影
css
.box { box-shadow: 2px 2px 10px rgba(0,0,0,0.2); }
- border-radius:边框圆角
css
.box { border-radius: 5px; }
总结
以上40个属性是CSS中使用频率非常高的属性,掌握它们可以应对大部分布局和样式需求。当然,CSS还有很多其他属性,但先从高频属性入手,再逐步扩展,是学习CSS的有效方法。