引言
参见 https://mp.weixin.qq.com/s/qMHY7GkaEmXPqZpTAxo2sQ
文本属性
文本属性控制文本的外观，包括字体、大小、颜色、对齐方式等。
字体属性
.text {
/* 字体系列 */
font-family: Arial, Helvetica, sans-serif;
/* 字体大小 */
font-size: 16px;
/* 字体粗细 */
font-weight: bold; /* 或 normal, 100-900 */
/* 字体样式 */
font-style: italic; /* 或 normal, oblique */
/* 字体变体 */
font-variant: small-caps; /* 或 normal */
/* 字体行高 */
line-height: 1.5;
/* 简写属性 */
font: italic bold 16px/1.5 Arial, sans-serif;
}
文本格式属性
.text {
/* 文本颜色 */
color: #333;
/* 文本对齐 */
text-align: center; /* 或 left, right, justify */
/* 文本装饰 */
text-decoration: underline; /* 或 none, overline, line-through */
text-decoration-color: red;
text-decoration-style: wavy; /* 或 solid, double, dotted, dashed */
text-decoration-thickness: 2px;
/* 文本转换 */
text-transform: uppercase; /* 或 none, lowercase, capitalize */
/* 文本缩进 */
text-indent: 2em;
/* 字母间距 */
letter-spacing: 1px;
/* 单词间距 */
word-spacing: 2px;
/* 文本阴影 */
text-shadow: 2px2px4pxrgba(0, 0, 0, 0.5);
/* 空白处理 */
white-space: nowrap; /* 或 normal, pre, pre-line, pre-wrap */
/* 文本溢出 */
text-overflow: ellipsis; /* 或 clip */
overflow: hidden;
/* 文本方向 */
direction: ltr; /* 或 rtl */
/* 垂直对齐 */
vertical-align: middle; /* 或 top, bottom, baseline, sub, super */
}
现代文本属性
.text {
/* 文本换行 */
word-break: break-all; /* 或 normal, keep-all, break-word */
overflow-wrap: break-word; /* 或 normal */
/* 文本书写模式 */
writing-mode: vertical-rl; /* 或 horizontal-tb, vertical-lr */
/* 文本强调 */
text-emphasis: filled red; /* 组合了style和color */
/* 文本对齐最后一行 */
text-align-last: justify; /* 或 auto, left, right, center */
/* 文本描边 */
-webkit-text-stroke: 1px black; /* 非标准但广泛支持 */
}
背景属性
背景属性控制元素的背景外观，包括颜色、图像、位置等。
基本背景属性
.element {
/* 背景颜色 */
background-color: #f0f0f0;
/* 背景图像 */
background-image: url('image.jpg');
/* 背景重复 */
background-repeat: no-repeat; /* 或 repeat, repeat-x, repeat-y */
/* 背景位置 */
background-position: center center; /* 或 top left, 50% 25%, 20px 30px 等 */
/* 背景尺寸 */
background-size: cover; /* 或 contain, auto, 100% 100%, 200px 100px 等 */
/* 背景附着 */
background-attachment: fixed; /* 或 scroll, local */
/* 背景原点 */
background-origin: padding-box; /* 或 border-box, content-box */
/* 背景裁剪 */
background-clip: padding-box; /* 或 border-box, content-box, text */
/* 简写属性 */
background: #f0f0f0url('image.jpg') no-repeat center/cover fixed;
}
多重背景
.element {
/* 多重背景，先列出的在上层 */
background:
url('overlay.png') no-repeat center/100%,
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') no-repeat center/cover;
}
渐变背景
.element {
/* 线性渐变 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/* 径向渐变 */
background-image: radial-gradient(circle at center, white, blue);
/* 重复渐变 */
background-image: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f010px, #e0e0e010px, #e0e0e020px);
/* 圆锥渐变 */
background-image: conic-gradient(from 0deg, red, yellow, green, blue, purple, red);
}
边框属性
边框属性定义元素的边框样式、宽度和颜色。
基本边框属性
.element {
/* 边框宽度 */
border-width: 2px;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
/* 边框样式 */
border-style: solid;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: groove;
/* 其他样式: none, hidden, ridge, inset, outset */
/* 边框颜色 */
border-color: #333;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
/* 简写属性 */
border: 2px solid #333;
border-top: 1px dotted red;
border-right: 2px dashed green;
border-bottom: 3px double blue;
border-left: 4px groove yellow;
}
圆角边框
.element {
/* 所有角相同 */
border-radius: 10px;
/* 分别指定四个角 (左上, 右上, 右下, 左下) */
border-radius: 10px20px30px40px;
/* 分别指定水平和垂直半径 */
border-radius: 10px / 20px;
/* 单独设置某个角 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
/* 创建圆形或椭圆 */
border-radius: 50%;
}
图像边框
.element {
/* 边框图像源 */
border-image-source: url('border.png');
/* 边框图像切片 */
border-image-slice: 27;
/* 边框图像宽度 */
border-image-width: 27px;
/* 边框图像重复方式 */
border-image-repeat: repeat; /* 或 stretch, round, space */
/* 边框图像向外延伸 */
border-image-outset: 10px;
/* 简写属性 */
border-image: url('border.png') 27 / 27px / 10px repeat;
}
轮廓属性
轮廓与边框类似，但不占用空间，不影响布局。
.element {
/* 轮廓宽度 */
outline-width: 2px;
/* 轮廓样式 */
outline-style: solid; /* 与border-style相同的值 */
/* 轮廓颜色 */
outline-color: red;
/* 轮廓偏移 */
outline-offset: 5px;
/* 简写属性 */
outline: 2px solid red;
}
尺寸属性
尺寸属性控制元素的宽度、高度和相关约束。
.element {
/* 宽度和高度 */
width: 300px;
height: 200px;
/* 最小/最大宽度和高度 */
min-width: 100px;
max-width: 500px;
min-height: 100px;
max-height: 500px;
/* 内边距 */
padding: 20px; /* 所有边相同 */
padding: 10px20px30px40px; /* 上 右 下 左 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/* 外边距 */
margin: 20px; /* 所有边相同 */
margin: 10px20px30px40px; /* 上 右 下 左 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
margin: 0 auto; /* 水平居中 */
/* 盒模型行为 */
box-sizing: border-box; /* 或 content-box */
}
定位属性
定位属性控制元素在页面中的位置和层叠顺序。
.element {
/* 定位方式 */
position: relative; /* 或 static, absolute, fixed, sticky */
/* 位置偏移 */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
/* 层叠顺序 */
z-index: 10;
/* 浮动 */
float: left; /* 或 right, none */
/* 清除浮动 */
clear: both; /* 或 left, right, none */
}
现代定位属性
.parent {
/* 定位上下文 */
perspective: 1000px;
transform-style: preserve-3d;
}
.element {
/* 变换原点 */
transform-origin: center center;
/* 2D变换 */
transform: translate(50px, 100px) rotate(45deg) scale(1.5) skew(10deg, 20deg);
/* 3D变换 */
transform: rotateX(45deg) rotateY(45deg) translateZ(100px);
/* 回退变换 */
transform: none;
}
显示属性
显示属性控制元素的显示方式、可见性和溢出行为。
.element {
/* 显示方式 */
display: block; /* 或 inline, inline-block, flex, grid, none 等 */
/* 可见性 */
visibility: visible; /* 或 hidden, collapse */
opacity: 0.5; /* 0到1之间的值 */
/* 溢出处理 */
overflow: auto; /* 或 visible, hidden, scroll */
overflow-x: hidden;
overflow-y: scroll;
/* 裁剪 */
clip: rect(0, 50px, 50px, 0); /* 已弃用 */
clip-path: circle(50%); /* 现代替代方案 */
/* 调整大小 */
resize: both; /* 或 none, horizontal, vertical */
/* 光标 */
cursor: pointer; /* 或 default, text, move, not-allowed 等 */
/* 用户选择 */
user-select: none; /* 或 auto, text, all */
/* 对象适应 */
object-fit: cover; /* 或 fill, contain, none, scale-down */
object-position: center center;
}
弹性盒布局属性
弹性盒(Flexbox)是一种强大的布局模型，用于创建灵活的响应式布局。
容器属性
.flex-container {
/* 启用弹性盒布局 */
display: flex; /* 或 inline-flex */
/* 主轴方向 */
flex-direction: row; /* 或 row-reverse, column, column-reverse */
/* 换行行为 */
flex-wrap: wrap; /* 或 nowrap, wrap-reverse */
/* 简写属性 */
flex-flow: row wrap;
/* 主轴对齐 */
justify-content: space-between; /* 或 flex-start, flex-end, center, space-around, space-evenly */
/* 交叉轴对齐 */
align-items: center; /* 或 flex-start, flex-end, stretch, baseline */
/* 多行对齐 */
align-content: space-between; /* 或 flex-start, flex-end, center, stretch, space-around */
/* 间隙 */
gap: 20px;
row-gap: 10px;
column-gap: 20px;
}
项目属性
.flex-item {
/* 顺序 */
order: 2;
/* 放大比例 */
flex-grow: 1;
/* 缩小比例 */
flex-shrink: 1;
/* 基础尺寸 */
flex-basis: 200px;
/* 简写属性 */
flex: 11200px; /* grow shrink basis */
flex: auto; /* 1 1 auto */
flex: none; /* 0 0 auto */
/* 自身对齐 */
align-self: flex-end; /* 或 auto, flex-start, center, stretch, baseline */
}
网格布局属性
网格布局(Grid)是一种二维布局系统，适用于复杂的页面布局。
容器属性
.grid-container {
/* 启用网格布局 */
display: grid; /* 或 inline-grid */
/* 定义列 */
grid-template-columns: 1fr 2fr 1fr; /* 三列布局 */
grid-template-columns: repeat(3, 1fr); /* 三等分列 */
grid-template-columns: minmax(100px, 1fr) 2fr 1fr; /* 最小宽度限制 */
/* 定义行 */
grid-template-rows: 100px auto 100px; /* 固定头尾，中间自适应 */
grid-template-rows: repeat(3, minmax(100px, auto)); /* 最小高度限制 */
/* 定义区域 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
/* 间隙 */
grid-gap: 20px; /* 旧语法 */
gap: 20px; /* 新语法 */
row-gap: 10px;
column-gap: 20px;
/* 自动生成的网格轨道 */
grid-auto-rows: 100px;
grid-auto-columns: 1fr;
grid-auto-flow: row; /* 或 column, dense */
/* 对齐网格项 */
justify-items: center; /* 或 start, end, stretch */
align-items: center; /* 或 start, end, stretch */
/* 对齐网格轨道 */
justify-content: space-between; /* 或 start, end, center, space-around, space-evenly */
align-content: space-between; /* 或 start, end, center, stretch, space-around, space-evenly */
}
项目属性
.grid-item {
/* 指定位置 */
grid-column: 1 / 3; /* 从第1条网格线到第3条网格线 */
grid-column-start: 1;
grid-column-end: 3; /* 或 span 2 */
grid-row: 1 / 3;
grid-row-start: 1;
grid-row-end: 3; /* 或 span 2 */
/* 简写属性 */
grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
grid-area: header; /* 使用模板区域名称 */
/* 自身对齐 */
justify-self: center; /* 或 start, end, stretch */
align-self: center; /* 或 start, end, stretch */
}
过渡与动画属性
过渡和动画属性用于创建平滑的状态变化和动态效果。
过渡属性
.element {
/* 过渡属性 */
transition-property: all; /* 或 特定属性如 width, color 等 */
/* 过渡持续时间 */
transition-duration: 0.3s;
/* 过渡延迟 */
transition-delay: 0.1s;
/* 过渡时间函数 */
transition-timing-function: ease; /* 或 linear, ease-in, ease-out, ease-in-out, cubic-bezier() */
/* 简写属性 */
transition: all 0.3s ease 0.1s;
/* 多个过渡 */
transition: width 0.3s ease, height 0.5s ease-out, color 1s linear;
}
动画属性
/* 定义关键帧 */
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.element {
/* 动画名称 */
animation-name: slide-in;
/* 动画持续时间 */
animation-duration: 1s;
/* 动画延迟 */
animation-delay: 0.5s;
/* 动画时间函数 */
animation-timing-function: ease-out;
/* 动画迭代次数 */
animation-iteration-count: 3; /* 或 infinite */
/* 动画方向 */
animation-direction: alternate; /* 或 normal, reverse, alternate-reverse */
/* 动画填充模式 */
animation-fill-mode: forwards; /* 或 none, backwards, both */
/* 动画播放状态 */
animation-play-state: running; /* 或 paused */
/* 简写属性 */
animation: slide-in 1s ease-out 0.5s3 alternate forwards;
/* 多个动画 */
animation: slide-in 1s ease-out, fade-in 2s linear;
}
其他重要属性
列表属性
ul, ol {
/* 列表样式类型 */
list-style-type: square; /* 或 disc, circle, decimal, lower-alpha 等 */
/* 列表样式位置 */
list-style-position: inside; /* 或 outside */
/* 列表样式图像 */
list-style-image: url('bullet.png');
/* 简写属性 */
list-style: square inside url('bullet.png');
}
表格属性
table {
/* 表格布局 */
table-layout: fixed; /* 或 auto */
/* 边框合并 */
border-collapse: collapse; /* 或 separate */
/* 边框间距 */
border-spacing: 5px;
/* 空单元格显示 */
empty-cells: hide; /* 或 show */
/* 标题位置 */
caption-side: bottom; /* 或 top */
}
打印属性
@media print {
.element {
/* 分页行为 */
page-break-before: always; /* 或 auto, avoid, left, right */
page-break-after: avoid;
page-break-inside: avoid;
/* 现代替代方案 */
break-before: page;
break-after: avoid;
break-inside: avoid;
/* 孤儿和遗孀控制 */
orphans: 3;
widows: 3;
}
}
滤镜和混合模式
.element {
/* 滤镜效果 */
filter: blur(5px) brightness(1.2) contrast(1.4) grayscale(0.5) hue-rotate(90deg) invert(0.8) opacity(0.8) saturate(2) sepia(0.5) drop-shadow(5px 5px 10px black);
/* 混合模式 */
mix-blend-mode: multiply; /* 或 screen, overlay, darken, lighten 等 */
background-blend-mode: soft-light;
}
书写模式和逻辑属性
.element {
/* 书写模式 */
writing-mode: vertical-rl; /* 或 horizontal-tb, vertical-lr */
direction: rtl; /* 或 ltr */
text-orientation: upright; /* 或 mixed, sideways */
/* 逻辑属性 */
margin-block-start: 1em; /* 替代 margin-top */
margin-inline-end: 1em; /* 替代 margin-right (LTR) 或 margin-left (RTL) */
padding-block-end: 1em; /* 替代 padding-bottom */
border-inline-start: 1px solid; /* 替代 border-left (LTR) 或 border-right (RTL) */
/* 逻辑尺寸 */
inline-size: 200px; /* 替代 width */
block-size: 100px; /* 替代 height */
}
性能优化属性
.element {
/* 硬件加速 */
transform: translateZ(0);
/* 提示浏览器即将变化的属性 */
will-change: transform, opacity;
/* 内容可见性 */
content-visibility: auto;
contain-intrinsic-size: 0500px;
/* 内容包含 */
contain: content; /* 或 strict, layout, paint, size */
}