CSS高频属性速查指南

一、盒模型相关

  1. width / height:元素宽度/高度
css 复制代码
.box { width: 100px; height: 100px; }
  1. padding:内边距(上右下左)
css 复制代码
.box { padding: 10px 5px 10px 5px; } /* 简写:padding: 上下 左右; */
  1. border:边框(宽度 样式 颜色)
css 复制代码
.box { border: 1px solid #000; }
  1. margin:外边距(上右下左)
css 复制代码
.box { margin: 0 auto; } /* 水平居中 */
  1. box-sizing:盒模型计算方式
css 复制代码
.box { box-sizing: border-box; } /* 包括padding和border在内的宽度 */

二、布局相关(Flexbox和Grid)

Flexbox
  1. display: flex:定义弹性容器
css 复制代码
.container { display: flex; }
  1. flex-direction:主轴方向(row, column)
css 复制代码
.container { flex-direction: row; }
  1. justify-content:主轴对齐方式
css 复制代码
.container { justify-content: center; }
  1. align-items:交叉轴对齐方式
css 复制代码
.container { align-items: center; }
  1. flex-wrap:是否换行
css 复制代码
.container { flex-wrap: wrap; }
  1. flex:子元素的伸缩性(flex-grow, flex-shrink, flex-basis)
css 复制代码
.item { flex: 1; } /* 等分剩余空间 */
Grid布局
  1. display: grid:定义网格容器
css 复制代码
.container { display: grid; }
  1. grid-template-columns / grid-template-rows:定义列和行
css 复制代码
.container { grid-template-columns: 100px 1fr 2fr; }
  1. gap:网格间距
css 复制代码
.container { gap: 10px; }
  1. grid-column / grid-row:项目放置位置
css 复制代码
.item { grid-column: 1 / 3; } /* 占据第1到第3列 */

三、定位

  1. position:定位方式(static, relative, absolute, fixed, sticky)
css 复制代码
.box { position: relative; }
  1. top / right / bottom / left:定位偏移
css 复制代码
.box { top: 10px; left: 20px; }
  1. z-index:堆叠顺序
css 复制代码
.box { z-index: 10; }

四、背景与颜色

  1. background-color:背景颜色
css 复制代码
.box { background-color: #fff; }
  1. background-image:背景图片
css 复制代码
.box { background-image: url('image.jpg'); }
  1. background-size:背景尺寸(cover, contain, 具体值)
css 复制代码
.box { background-size: cover; }
  1. background-position:背景位置
css 复制代码
.box { background-position: center; }
  1. background-repeat:背景重复
css 复制代码
.box { background-repeat: no-repeat; }

五、文本与字体

  1. color:文本颜色
css 复制代码
p { color: #333; }
  1. font-family:字体
css 复制代码
body { font-family: Arial, sans-serif; }
  1. font-size:字体大小
css 复制代码
p { font-size: 16px; }
  1. font-weight:字体粗细(normal, bold, 100-900)
css 复制代码
h1 { font-weight: bold; }
  1. text-align:文本对齐(left, center, right, justify)
css 复制代码
p { text-align: center; }
  1. line-height:行高
css 复制代码
p { line-height: 1.5; }
  1. text-decoration:文本装饰(none, underline, line-through)
css 复制代码
a { text-decoration: none; }

六、显示与可见性

  1. display:显示类型(block, inline, inline-block, none)
css 复制代码
.box { display: inline-block; }
  1. visibility:可见性(visible, hidden)
css 复制代码
.box { visibility: hidden; } /* 隐藏但占据空间 */
  1. opacity:透明度(0.0-1.0)
css 复制代码
.box { opacity: 0.5; }

七、变换与动画

  1. transform:变换(旋转、缩放、移动、倾斜)
css 复制代码
.box { transform: rotate(45deg) scale(1.2); }
  1. transition:过渡效果
css 复制代码
.box { transition: all 0.3s ease; }
  1. animation:动画(配合@keyframes)
css 复制代码
.box { animation: move 2s infinite; }
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

八、其他常用属性

  1. cursor:鼠标样式(pointer, default, text)
css 复制代码
button { cursor: pointer; }
  1. overflow:溢出处理(visible, hidden, scroll, auto)
css 复制代码
.box { overflow: auto; }
  1. box-shadow:盒子阴影
css 复制代码
.box { box-shadow: 2px 2px 10px rgba(0,0,0,0.2); }
  1. border-radius:边框圆角
css 复制代码
.box { border-radius: 5px; }

总结

以上40个属性是CSS中使用频率非常高的属性,掌握它们可以应对大部分布局和样式需求。当然,CSS还有很多其他属性,但先从高频属性入手,再逐步扩展,是学习CSS的有效方法。

相关推荐
练习时长一年16 分钟前
Spring代理的特点
java·前端·spring
水星记_34 分钟前
时间轴组件开发:实现灵活的时间范围选择
前端·vue
2501_930124701 小时前
Linux之Shell编程(三)流程控制
linux·前端·chrome
潘小安1 小时前
『译』React useEffect:早知道这些调试技巧就好了
前端·react.js·面试
@大迁世界2 小时前
告别 React 中丑陋的导入路径,借助 Vite 的魔法
前端·javascript·react.js·前端框架·ecmascript
EndingCoder2 小时前
Electron Fiddle:快速实验与原型开发
前端·javascript·electron·前端框架
EndingCoder2 小时前
Electron 进程模型:主进程与渲染进程详解
前端·javascript·electron·前端框架
Nicholas682 小时前
flutter滚动视图之ScrollNotificationObserve源码解析(十)
前端
@菜菜_达3 小时前
CSS scale函数详解
前端·css
想起你的日子3 小时前
Vue2+Element 初学
前端·javascript·vue.js