根底款式
原文链接：https://note.noxussj.top/?sou...
定位相干
绝对定位
.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: 10px 20px; /* 上、左右、下 */ margin: 10px 20px 10px; /* 上、右、下、左 */ margin: 10px 20px 10px 20px; /* 上 */ 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(#000 25%, #f00 50%, #ff0 100%);}背景图片
.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: left bottom;}盒子边框
.my-content { /* 宽度、实线、蓝色 */ border: 5px solid blue; /* 右边边框色彩 */ border-left-color: #f00; /* 右边边框宽度 */ border-left-width: 2px; /* 右边边框线条 */ border-left-style: dotted;}盒子圆角
.my-content { /* 像素值 */ border-radius: 6px; /* 百分比，圆形 */ border-radius: 50%;}盒子暗影
.my-content { /* 程度偏移值、垂直偏移值、含糊水平、暗影大小、暗影色彩 */ box-shadow: 0 0 8px 8px #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: 5px 5px 5px #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);}动画 & 过渡
/* 创立动画 */@keyframes myMove { /* 动画0%时候的状态 */ 0% { transform: translateX(0); } /* 动画100%时候的状态 */ 100% { transform: translateX(300px); }}.my-content { /* 设置动画：动画名称、动画实现工夫（也叫过渡工夫 5S）、挪动曲线速度（线性）、提早执行、动画反复次数（有限次）、是否沿路返回（是） */ animation: myMove 5s linear 0s infinite alternate;}其余
多媒体查问
/* 浏览器窗口小于1000px时，设置背景为蓝色 */@media screen and (max-width: 1000px) { .my-content { background: blue; }}内容溢出
.my-content { /* 内容溢出，呈现x、y轴滚动条 */ overflow: auto; /* 内容溢出，暗藏溢出元素 */ overflow: hidden; /* 内容溢出，呈现x轴滚动条 */ overflow-x: auto; /* 内容溢出，呈现y轴滚动条 */ overflow-y: auto;}最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?sou...