你需要知道的CSS基础样式知识

原文链接：https://note.noxussj.top/?source=helloworld

定位相关

相对定位

1.my-content {
2	position: relative;
3}

绝对定位

1.my-content {
2	position: absolute;
3	left: 0;
4    top: 0;
5}

固定定位

1.my-content {
2    position: fixed;
3    left: 0;
4    top: 0;
5}

定位元素层级

注意

z-index 设置 -2 以下则在页面中不会显示

1.my-content {
2    z-index: -1;
3}

盒子相关

盒子尺寸

1.my-content {
2    width: 100px;
3    height: 100px;
4}

盒子间距

外边距

1.my-content {
2    /* 上、右、下、左 */
3    margin: 10px;
4
5    /* 上下、左右 */
6    margin: 10px 20px;
7
8    /* 上、左右、下 */
9    margin: 10px 20px 10px;
10
11    /* 上、右、下、左 */
12    margin: 10px 20px 10px 20px;
13
14    /* 上 */
15    margin-top: 10px;
16
17    /* 右 */
18    margin-right: 20px;
19
20    /* 下 */
21    margin-bottom: 10px;
22
23    /* 左 */
24    margin-left: 20px;
25}

内边距（写法与 margin 相同）

1.my-content {
2    padding: 10px;
3}

盒子背景

背景颜色

1.my-content {
2    /* 写法1 */
3    background-color: #fff;
4
5    /* 写法2 */
6    background: #fff;
7}

渐变背景

1.my-content {
2    /* 线性渐变 */
3    background: linear-gradient(90deg, #000, #f00);
4
5    /* 径向渐变 */
6    background: radial-gradient(#000 25%, #f00 50%, #ff0 100%);
7}

背景图片

1.my-content {
2    /* 写法1 */
3    background: url('./images/head.png');
4
5    /* 写法2 */
6    background-image: url('./images/head.png');
7
8    /* 背景图片填充模式 */
9    background-repeat: no-repeat;
10
11    /* 背景图片缩放尺寸 */
12    background-size: 100% 100%;
13
14    /* 背景图片位置 */
15    background-position: left bottom;
16}

盒子边框

1.my-content {
2    /* 宽度、实线、蓝色 */
3    border: 5px solid blue;
4
5    /* 左边边框颜色 */
6    border-left-color: #f00;
7
8    /* 左边边框宽度 */
9    border-left-width: 2px;
10
11    /* 左边边框线条 */
12    border-left-style: dotted;
13}

盒子圆角

1.my-content {
2    /* 像素值 */
3    border-radius: 6px;
4
5    /* 百分比，圆形 */
6    border-radius: 50%;
7}

盒子阴影

1.my-content {
2    /* 水平偏移值、垂直偏移值、模糊程度、阴影大小、阴影颜色 */
3    box-shadow: 0 0 8px 8px #000;
4}

盒子展示方式

1.my-content {
2    /* 内联元素（不受宽度高度影响，宽度占位根据内容决定） */
3    display: inline;
4
5    /* 块级元素（受高度宽度影响，宽度占位一整行） */
6    display: block;
7
8    /* 块级元素（新的布局方式，受高度宽度影响，宽度占位一整行） */
9    display: flex;
10
11    /* 行内块级元素（受高度宽度影响，宽度占位根据内容决定） */
12    display: inline-block;
13
14    /* 行内块级元素（新的布局方式，受高度宽度影响，宽度占位根据内容决定） */
15    display: inline-flex;
16
17    /* 隐藏盒子 */
18    display: none;
19}

盒子透明度

1.my-content {
2    /* 盒子透明度为 50% */
3    opacity: 0.5;
4}

盒子模型

1.my-content {
2    /* 默认、标准盒模型（W3C盒模型） */
3    box-sizing: content-box;
4
5    /* 推荐使用、怪异盒模型（IE盒模型） */
6    box-sizing: border-box;
7}

字体相关

字体颜色

1.my-content {
2    color: #f00;
3}

字体大小

1.my-content {
2    font-size: 14px;
3}

字体加粗

1.my-content {
2    /* 写法1 */
3    font-weight: 500;
4
5    /* 写法2，推荐 */
6    font-weight: bold;
7}

字体类型

1.my-content {
2    font-family: Arial, Helvetica, sans-serif;
3}
4
5/* 自定义字体类型 */
6@font-face {
7    font-family: myFirstFont;
8    src: url(sansation_light.woff);
9}
10
11.my-content2 {
12    font-family: myFirstFont;
13}

行高

1.my-content {
2    line-height: 30px;
3}

文字水平间距

1.my-content {
2    letter-spacing: 2px;
3}

文本阴影

1.my-content {
2    /* 左右偏移、上下偏移、阴影模糊程度、阴影颜色 */
3    text-shadow: 5px 5px 5px #ff0000;
4    text-overflow: clip;
5}

对齐相关

水平对齐方式

1.my-content {
2    /* 居左 */
3    text-align: left;
4
5    /* 居中 */
6    text-align: center;
7
8    /* 居右 */
9    text-align: right;
10}

垂直对齐方式

1.my-content {
2    /* 元素放置在父元素的基线上 */
3    vertical-align: baseline;
4
5    /* 垂直对齐文本的下标 */
6    vertical-align: sub;
7
8    /* 垂直对齐文本的上标 */
9    vertical-align: super;
10
11    /* 把元素的顶端与行中最高元素的顶端对齐 */
12    vertical-align: top;
13
14    /* 把元素的顶端与父元素字体的顶端对齐 */
15    vertical-align: text-top;
16
17    /* 把此元素放置在父元素的中部 */
18    vertical-align: middle;
19
20    /* 使元素及其后代元素的底部与整行的底部对齐 */
21    vertical-align: bottom;
22
23    /* 把元素的底端与父元素字体的底端对齐 */
24    vertical-align: text-bottom;
25}

动画相关

2D 转换

1.my-content {
2    /* 往右边偏移100px */
3    transform: translateX(100px);
4
5    /* 往下边偏移100px */
6    transform: translateY(100px);
7
8    /* 整体放大1.5倍 */
9    transform: scale(1.5);
10
11    /* 整体顺时针旋转45度 */
12    transform: rotate(45deg);
13
14    /* 水平方向，整体顺逆时针倾斜45度 */
15    transform: skewX(45deg);
16
17    /* 垂直方向，整体顺时针倾斜45度 */
18    transform: skewY(45deg);
19}

3D 转换

1.my-content {
2    /* 创建3D场景 */
3    transform-style: preserve-3d;
4
5    /* 沿着X、Y、Z轴顺时针旋转40度 */
6    transform: rotateX(40deg) rotateY(40deg) rotateZ(40deg);
7
8    /* 沿着X、Y、Z轴偏移100px */
9    transform: translateX(100px) translateY(100px) translateZ(100px);
10}

动画 & 过渡

1/* 创建动画 */
2@keyframes myMove {
3    /* 动画0%时候的状态 */
4    0% {
5        transform: translateX(0);
6    }
7
8    /* 动画100%时候的状态 */
9    100% {
10        transform: translateX(300px);
11    }
12}
13
14.my-content {
15    /* 设置动画：动画名称、动画完成时间（也叫过渡时间 5S）、移动曲线速度（线性）、延迟执行、动画重复次数（无限次）、是否沿路返回（是） */
16    animation: myMove 5s linear 0s infinite alternate;
17}

其他

多媒体查询

1/* 浏览器窗口小于1000px时，设置背景为蓝色 */
2@media screen and (max-width: 1000px) {
3    .my-content {
4        background: blue;
5    }
6}

内容溢出

1.my-content {
2    /* 内容溢出，出现x、y轴滚动条 */
3    overflow: auto;
4
5    /* 内容溢出，隐藏溢出元素 */
6    overflow: hidden;
7
8    /* 内容溢出，出现x轴滚动条 */
9    overflow-x: auto;
10
11    /* 内容溢出，出现y轴滚动条 */
12    overflow-y: auto;
13}