CSS基础

预计阅读时间：10 分钟

预备

元素选择器直接以元素开头

css h4 { color: red }

类选择器以.好开头

css .class { xxx }

id选择器以#号开头

```css

id {

xxx } ```

一、颜色

可直接描述颜色，例如red，blue
可使用rgb数值，例如rgb(135,72,255)

如果使用rgba，则多一个透明度参数rgba(135,70,255,0.5)
可使用16进制描述，例如#eb46e0

除此之外，还有background-color,border-color

二、盒子

1、块级盒子

盒子从外到内依次是margin,border,padding,本体

首先使用width和height整体定义该盒子的大小。

但是二者默认定义的是内容区的大小，所以一般会设置标签参数box-sizing: border-box; 。这样就保证该盒子的尺寸是由width和height定义。而因为几乎所有标签都需要，所以一般会把它加入全局CSS定义内。

margin & padding

分别代表以border线为界的外部和内部的空间

存在margin-四个方向: 6px 参数，可分别调整四个方向
也可margin: 6px 12px 6px 12px ,从上开始顺时针代表四个方向。如果某个方向没有写，则会默认使用对面方向的数值
border

线的样式

值	效果	使用场景
`solid`	实线	最常用，干净利落
`dashed`	虚线	表示可操作区域、分割线
`dotted`	点状线	点缀或下划线替代
`double`	双实线	强调装饰
`ridge` / `groove`	3D 凸起/凹槽	复古风或模拟浮雕效果

线的颜色（直接使用color）
线的圆角radius

css .box { border-radius: 8px; /* 四角统一 8px 圆角 */ border-radius: 50%; /* 圆形（配合宽高相等） */ border-radius: 10px 20px; /* 左上/右下 10px，右上/左下 20px */ border-radius: 10px 20px 30px 40px; /*从左上开始顺时针*/ }

2、行级盒子

行内盒子

不会独占一行
宽高（width，height）会被忽略
外边距（margin）只有水平方向上会生效
尺寸只由content内容决定

三、布局

布局分为

block(块级),inline(内联),inline-block(内联块级),none(隐藏),flex(灵活),grid(网格)

1、`block`

div,p,h标签默认是块级
块级会独占一行
也可手动设置display: block

2、`inline`

span,a默认是内联，不会独占一行
也可手动设置display: inline

3、`none`

如果把display设置为none,那么该元素会在界面上隐藏

4、`inline-block`

解决了希望一个元素既能像inline元素一样不换行，又能像块级一样设置宽高和内外边距。

5、`flex`

flex布局内部的直系block和inline子元素会失去原有的布局性质，变为flex布局

以下是容器参数

flex的主轴默认是从左到右，可以设置flex-derection参数调整主轴
- 从右到左，上到下等

junstify-content参数定义了flex项目如何沿主轴排列

值	说明	备注
`flex-start`	沿主轴的起始处	默认
`flex-end`	沿主轴的终点处
`center`	沿主轴居中
`space-evenly`	元素沿主轴平均间隔排列
`space-between`	两端对齐
`space-around`	两侧等距
- `align-items`参数定义了交叉轴的排列，值和`junstify-content` 类似
- `gap`参数可以创造间距
- `flex-wrap`参数有两个值：
1. `wrap`：会让元素在空间不足时自动换行

换行后，前两个参数设置的居中属性将出现问题

为此，需要`align-content: center`

no-wrap：会让元素在空间不足时压缩

以下是项目参数

flex-shrink ，默认值是1，代表空间不足时允许元素收缩。设置为0后，空间不足时元素大小不会变化
flex-grow，模式值是0，代表空间变大时元素不会变大。设置为1后，空间变大时元素会一起变大填充空间
以上两个可以结合max-width，min-width等限制最值的参数使用

6、`grid` 网格布局

gap参数定义了网格元素之间的间距

一个值则同时代表横竖

两个值则分别代表横竖
grid-template-columns 定义了网格列的样式

在grid-template-columns 后写入x个长度数值，就会产生x列，并且每列的宽度由该数值定义

可用px定义绝对宽度。fr定义相对比例（相对父容器）宽度。二者可混合使用。

使用repeat(m,n)函数

第一个参数m代表列数。n代表每列的宽度数值

grid-template-rows 同理
一个元素占据多个grid网格
1. 使用grid-row: m/n;grid-cloumn: x/y; 定义该项目占据m-n行的网格，x-y列的网格。并且可以实现卡片的重叠
2. 使用grid-row: span 2; 代表该项目从当前格开始，占据2个行跨度。cloumn同理
也可使用grid-template-areas 更直观的布局：

css .grid{ display: grid; margin: 0 10%; grid-template-columns: 4fr 1fr; grid-template-rows: 1fr 10fr 2fr; grid-template-areas: "header header" "aside main" "footer footer"; }

后续子元素设置参数grid-area: xxx 挂载
justify-xxx和align-xxx
1. justify-items参数控制所有网格项目在水平方向对齐，align-items参数控制竖直方向上的对齐。
  
  它们的默认值是stretch（填充满网格）
  
  也可设置为strat，end，center
2. justify-content和align-content类似
  
  !image.png
3. 也可以在某一个项目内设置justify-self和align-self参数，单独定义该项目的对齐

四、定位

relative

让元素相对于原本的位置位移。有top，left等方向
fixed

把元素固定在页面的某个地方不动。

此时top等方向定义了该元素距离整个屏幕边缘的距离

定位元素会浮在普通文档流之上，叠放顺序由 z-index 控制（数值越大越靠上）
sticky

当该元素到达设定的距离时，则会定在屏幕上
absolute

让该元素相对于一个最近的设置了定位（非默认的static）父元素来定位。为此一般为希望作为锚点的父元素设置为relative

五、字体

.text {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;  /* 字体族（字体栈） */
  font-size: 16px;           /* 字号 */
  font-weight: 700;          /* 字重（粗细） */
  font-style: normal;        /* 样式（正常/斜体） */
  line-height: 1.6;          /* 行高（行间距） */
  color: #333;               /* 文字颜色（虽然不属于 font 属性，但一起记） */
}

六、卡片

呈现卡片感最重要的参数是box-shadow

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色] [inset可选];

例如：`box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);`

| **值** | **含义** | **你的值** |
| --- | --- | --- |
| **水平偏移** | 阴影向左（负）或向右（正）移动 | `0` → 不左右偏 |
| **垂直偏移** | 阴影向上（负）或向下（正）移动 | `4px` → 阴影在元素**下方**4像素 |
| **模糊半径** | 阴影的扩散程度，越大越模糊 | `8px` → 比较柔和 |
| **扩展半径** | 阴影的大小，正数使阴影变大，负数缩小 | `0` → 不额外扩大 |
| **颜色** | 阴影颜色，通常用半透明黑色 | `rgba(0,0,0,0.2)` → 20% 不透明度的黑色 |

再来个背景颜色background: [color]
还需要定义hover加入反馈：

css .card:hover { transform: translateY(-6px); /* 悬停时向上浮 */ box-shadow: 0 12px 30px rgba(0,0,0,0.2); /* 同时加深阴影，立体感更强 */ }

七、过渡

某个标签的hover属性可以定义若干鼠标悬浮时该标签的变化，但默认是瞬间变化。所以引入transition实现过渡动画效果。

对于某个标签，有4个参数需要定义

transistion-property （需要参与过渡的参数）

其中transform有以下常见参数
1. translateX() 和translateY() 分别是水平移动和竖直移动。传入距离
2. scale() 缩放，传入缩放倍数。scale(1) 是原始大小，scale(0) 会消失
3. scaleX() / scaleY() 单独缩放
4. rotate() — 旋转。传入旋转角度。rotate(45deg) 。
5. rotate的XYZ轴。X是从左到右，Y是从下到上，Z是垂直屏幕向外
6. transistion-duration （过渡动画持续时间）
7. transistion-timing-function （过度的策略，方法）

默认是ease,这也是最常用的

transistion-delay （触发和结束过渡的延时）

以上四个参数可以简写为

transition: [property] [duration] [timing-function] [delay]

八、动画

参数	作用	常见值
`animation-name`	指定要执行的关键帧名字	`bounce`, `fadeIn`
`animation-duration`	一个周期跑完需要的时间	`2s`（秒）, `500ms`（毫秒）
`animation-timing-function`	速度变化函数	`ease`, `linear`
`animation-delay`	延迟播放	`0s`, `1s`, `-2s`（负值表示立即跳到中间）
`animation-iteration-count`	播放次数	`1`, `3`, `infinite`（无限）
`animation-direction`	是否正反交替播放	`normal`, `reverse`, `alternate`
`animation-fill-mode`	动画开始前/结束后停留在哪	`none`, `forwards`, `backwards`, `both`
`animation-play-state`	控制暂停或播放	`running`, `paused`

简写：animaton: [name] [duration] [timing-function] [delay] [count] [direction] [fill-mode]

过渡（transition）需要人为触发（如 hover），只有开始和结束两种状态；动画（animation）无需触发，可以自动播放，且通过 @keyframes 定义多个关键帧状态。”

本文由 tazume-sans 原创，转载请注明出处。

CSS基础

预备

id {

一、颜色

二、盒子

1、块级盒子

2、行级盒子

三、布局

1、block

2、inline

3、none

4、inline-block

5、flex

6、grid 网格布局