原文链接：https://note.noxussj.top/?source=aliyun
定位相关
相对定位
.my-content { position: relative; }
绝对定位
.my-content { position: absolute; left: 0; top: 0; }
固定定位
.my-content { position: fixed; left: 0; top: 0; }
定位元素层级
注意
z-index 设置 -2 以下则在页面中不会显示
.my-content { z-index: -1; }
盒子相关
盒子尺寸
.my-content { width: 100px; height: 100px; }
盒子间距
外边距
.my-content { /* 上、右、下、左 */margin: 10px; /* 上下、左右 */margin: 10px20px; /* 上、左右、下 */margin: 10px20px10px; /* 上、右、下、左 */margin: 10px20px10px20px; /* 上 */margin-top: 10px; /* 右 */margin-right: 20px; /* 下 */margin-bottom: 10px; /* 左 */margin-left: 20px; }
内边距（写法与 margin 相同）
.my-content { padding: 10px; }
盒子背景
背景颜色
.my-content { /* 写法1 */background-color: #fff; /* 写法2 */background: #fff; }
渐变背景
.my-content { /* 线性渐变 */background: linear-gradient(90deg, #000, #f00); /* 径向渐变 */background: radial-gradient(#00025%, #f0050%, #ff0100%); }
背景图片
.my-content { /* 写法1 */background: url('./images/head.png'); /* 写法2 */background-image: url('./images/head.png'); /* 背景图片填充模式 */background-repeat: no-repeat; /* 背景图片缩放尺寸 */background-size: 100%100%; /* 背景图片位置 */background-position: leftbottom; }
盒子边框
.my-content { /* 宽度、实线、蓝色 */border: 5pxsolidblue; /* 左边边框颜色 */border-left-color: #f00; /* 左边边框宽度 */border-left-width: 2px; /* 左边边框线条 */border-left-style: dotted; }
盒子圆角
.my-content { /* 像素值 */border-radius: 6px; /* 百分比，圆形 */border-radius: 50%; }
盒子阴影
.my-content { /* 水平偏移值、垂直偏移值、模糊程度、阴影大小、阴影颜色 */box-shadow: 008px8px#000; }
盒子展示方式
.my-content { /* 内联元素（不受宽度高度影响，宽度占位根据内容决定） */display: inline; /* 块级元素（受高度宽度影响，宽度占位一整行） */display: block; /* 块级元素（新的布局方式，受高度宽度影响，宽度占位一整行） */display: flex; /* 行内块级元素（受高度宽度影响，宽度占位根据内容决定） */display: inline-block; /* 行内块级元素（新的布局方式，受高度宽度影响，宽度占位根据内容决定） */display: inline-flex; /* 隐藏盒子 */display: none; }
盒子透明度
.my-content { /* 盒子透明度为 50% */opacity: 0.5; }
盒子模型
.my-content { /* 默认、标准盒模型（W3C盒模型） */box-sizing: content-box; /* 推荐使用、怪异盒模型（IE盒模型） */box-sizing: border-box; }
字体相关
字体颜色
.my-content { color: #f00; }
字体大小
.my-content { font-size: 14px; }
字体加粗
.my-content { /* 写法1 */font-weight: 500; /* 写法2，推荐 */font-weight: bold; }
字体类型
.my-content { font-family: Arial, Helvetica, sans-serif; } /* 自定义字体类型 */@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } .my-content2 { font-family: myFirstFont; }
行高
.my-content { line-height: 30px; }
文字水平间距
.my-content { letter-spacing: 2px; }
文本阴影
.my-content { /* 左右偏移、上下偏移、阴影模糊程度、阴影颜色 */text-shadow: 5px5px5px#ff0000; text-overflow: clip; }
对齐相关
水平对齐方式
.my-content { /* 居左 */text-align: left; /* 居中 */text-align: center; /* 居右 */text-align: right; }
垂直对齐方式
.my-content { /* 元素放置在父元素的基线上 */vertical-align: baseline; /* 垂直对齐文本的下标 */vertical-align: sub; /* 垂直对齐文本的上标 */vertical-align: super; /* 把元素的顶端与行中最高元素的顶端对齐 */vertical-align: top; /* 把元素的顶端与父元素字体的顶端对齐 */vertical-align: text-top; /* 把此元素放置在父元素的中部 */vertical-align: middle; /* 使元素及其后代元素的底部与整行的底部对齐 */vertical-align: bottom; /* 把元素的底端与父元素字体的底端对齐 */vertical-align: text-bottom; }
动画相关
2D 转换
.my-content { /* 往右边偏移100px */transform: translateX(100px); /* 往下边偏移100px */transform: translateY(100px); /* 整体放大1.5倍 */transform: scale(1.5); /* 整体顺时针旋转45度 */transform: rotate(45deg); /* 水平方向，整体顺逆时针倾斜45度 */transform: skewX(45deg); /* 垂直方向，整体顺时针倾斜45度 */transform: skewY(45deg); }
3D 转换
.my-content { /* 创建3D场景 */transform-style: preserve-3d; /* 沿着X、Y、Z轴顺时针旋转40度 */transform: rotateX(40deg) rotateY(40deg) rotateZ(40deg); /* 沿着X、Y、Z轴偏移100px */transform: translateX(100px) translateY(100px) translateZ(100px); }
动画 & 过渡
/* 创建动画 */@keyframesmyMove { /* 动画0%时候的状态 */0% { transform: translateX(0); } /* 动画100%时候的状态 */100% { transform: translateX(300px); } } .my-content { /* 设置动画：动画名称、动画完成时间（也叫过渡时间 5S）、移动曲线速度（线性）、延迟执行、动画重复次数（无限次）、是否沿路返回（是） */animation: myMove5slinear0sinfinitealternate; }
其他
多媒体查询
/* 浏览器窗口小于1000px时，设置背景为蓝色 */@mediascreenand (max-width: 1000px) { .my-content { background: blue; } }
内容溢出
.my-content { /* 内容溢出，出现x、y轴滚动条 */overflow: auto; /* 内容溢出，隐藏溢出元素 */overflow: hidden; /* 内容溢出，出现x轴滚动条 */overflow-x: auto; /* 内容溢出，出现y轴滚动条 */overflow-y: auto; }
