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的有效方法。

相关推荐
天天扭码7 分钟前
很全面的前端面试题——计算机网络篇(上)
前端·网络协议·面试
JSON_L10 分钟前
Vue 详情模块 3
前端·javascript·vue.js
哀木20 分钟前
关于 one drive 上传功能的前端接入(未完成)
前端
大熊学员1 小时前
HTML与JavaScript的羁绊
前端·css·html
Mike_Wuzy1 小时前
【前端】CSS基础知识及基本应用
前端·css
啃火龙果的兔子1 小时前
WebView 中控制光标
前端
流星先生!1 小时前
前端小数点处理
开发语言·前端·javascript
不是二师兄的八戒2 小时前
PDF转图片工具技术文档(命令行版本)
前端·python·pdf
拾光拾趣录2 小时前
🔥9道题穿透JS底层:堆栈/异步/执行栈连环问,第5题99%人翻车?📉
前端·面试
雪芽蓝域zzs2 小时前
uniapp 数组的用法
前端·javascript·uni-app