【前端知识】常用CSS样式举例

文章目录

- 一、Flex盒子布局
- - 1. Flexbox 的基本概念
  - 2. Flex 容器的属性
  - - 2.1 `display`
    - 2.2 `flex-direction`
    - 2.3 `flex-wrap`
    - 2.4 `justify-content`
    - 2.5 `align-items`
    - 2.6 `align-content`
  - 3. Flex 项目的属性
  - - 3.1 `order`
    - 3.2 `flex-grow`
    - 3.3 `flex-shrink`
    - 3.4 `flex-basis`
    - 3.5 `flex`
    - 3.6 `align-self`
  - 4. 示例
  - 5. 总结
- 二、Position位置
- - 1. `static`（默认值）
  - 2. `relative`
  - 3. `absolute`
  - 4. `fixed`
  - 5. `sticky`
  - 总结
  - 注意事项
- 三、Padding和Margin空白
- 1. **`padding`（内边距）**
- - 属性值
  - 单独设置某个方向的内边距
  - 示例
- 2. **`margin`（外边距）**
- - 属性值
  - 单独设置某个方向的外边距
  - 特殊值
  - 示例
- 3. **`padding` 和 `margin` 的区别**
- 4. **盒子模型（Box Model）**
- - 示例
- 5. **注意事项**
- 四、文字样式
- 1. **字体相关属性**
- - 1.1 `font-family`
  - 1.2 `font-size`
  - 1.3 `font-weight`
  - 1.4 `font-style`
  - 1.5 `font-variant`
  - 1.6 `font`（简写属性）
- 2. **文字颜色**
- - 2.1 `color`
- 3. **文字对齐与装饰**
- - 3.1 `text-align`
  - 3.2 `text-decoration`
  - 3.3 `text-transform`
- 4. **文字间距**
- - 4.1 `letter-spacing`
  - 4.2 `word-spacing`
  - 4.3 `line-height`
- 5. **其他文字样式**
- - 5.1 `text-shadow`
  - 5.2 `white-space`
- 五、伪类和伪元素
- - 一、伪类（Pseudo-classes）
  - - 常见的伪类包括：
  - 二、伪元素（Pseudo-elements）
  - - 常见的伪元素包括：
  - 三、伪类与伪元素的区别
- 六、动画相关样式
- - 一、`transition`属性
  - 二、`transform`属性
  - 三、`@keyframes`规则
  - 四、`animation`属性
- 七、待补充

一、Flex盒子布局

CSS Flexbox（弹性盒子布局）是一种用于页面布局的一维布局模型，旨在更高效地分配容器内的空间和对齐项目。它特别适合处理不同屏幕尺寸和设备上的布局问题。

1. Flexbox 的基本概念

Flexbox 布局涉及两个主要概念：

Flex 容器（Flex Container）：应用 display: flex 或 display: inline-flex 的元素，其子元素成为 Flex 项目。
Flex 项目（Flex Items）：Flex 容器的直接子元素。

2. Flex 容器的属性

2.1 `display`

定义容器为 Flex 容器：

.container {
  display: flex; /* 或 inline-flex */
}

2.2 `flex-direction`

定义主轴方向（即项目的排列方向）：

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：水平排列，从左到右。
row-reverse：水平排列，从右到左。
column：垂直排列，从上到下。
column-reverse：垂直排列，从下到上。

2.3 `flex-wrap`

定义项目是否换行：

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

2.4 `justify-content`

定义项目在主轴上的对齐方式：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默认）：左对齐。
flex-end：右对齐。
center：居中对齐。
space-between：两端对齐，项目之间的间隔相等。
space-around：每个项目两侧的间隔相等。
space-evenly：项目之间的间隔相等。

2.5 `align-items`

定义项目在交叉轴上的对齐方式：

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：顶部对齐。
flex-end：底部对齐。
center：居中对齐。
baseline：基线对齐。
stretch（默认）：拉伸以填充容器。

2.6 `align-content`

定义多根轴线的对齐方式（适用于多行 Flex 容器）：

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：顶部对齐。
flex-end：底部对齐。
center：居中对齐。
space-between：两端对齐，轴线之间的间隔相等。
space-around：每根轴线两侧的间隔相等。
stretch（默认）：轴线拉伸以填充容器。

3. Flex 项目的属性

3.1 `order`

定义项目的排列顺序：

.item {
  order: <integer>; /* 默认值为 0 */
}

数值越小，排列越靠前。

3.2 `flex-grow`

定义项目的放大比例：

.item {
  flex-grow: <number>; /* 默认值为 0 */
}

如果所有项目的 flex-grow 都为 1，它们将等分剩余空间。如果一个项目的 flex-grow 为 2，它将占据更多空间。

3.3 `flex-shrink`

定义项目的缩小比例：

.item {
  flex-shrink: <number>; /* 默认值为 1 */
}

如果空间不足，项目将缩小。值为 0 时，项目不缩小。

3.4 `flex-basis`

定义项目在分配多余空间之前的主轴尺寸：

.item {
  flex-basis: <length> | auto; /* 默认值为 auto */
}

可以设置为固定长度（如 200px）或 auto。

3.5 `flex`

flex-grow、flex-shrink 和 flex-basis 的简写：

.item {
  flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

默认值为 0 1 auto。

3.6 `align-self`

定义单个项目在交叉轴上的对齐方式，覆盖 align-items：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

auto（默认）：继承容器的 align-items。
其他值与 align-items 相同。

4. 示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  border: 1px solid #000;
}

.item {
  flex: 1;
  margin: 10px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

5. 总结

Flexbox 提供了一种灵活的方式来布局和对齐项目，特别适合响应式设计。通过掌握 Flex 容器和 Flex 项目的属性，可以轻松实现复杂的布局需求。

二、Position位置

CSS 中的 position 属性用于控制元素的定位方式。它有五个主要值：static、relative、absolute、fixed 和 sticky。每个值决定了元素在文档中的定位行为。

1. `static`（默认值）

描述：元素按照正常的文档流进行排列，top、right、bottom、left 和 z-index 属性无效。
示例：
```
div {
  position: static;
}
```

2. `relative`

描述：元素相对于其正常位置进行定位。可以使用 top、right、bottom 和 left 属性调整位置，但不会影响其他元素的布局。

示例：

div {
  position: relative;
  top: 10px;
  left: 20px;
}

3. `absolute`

描述：元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素）。元素会脱离文档流，不占据空间。

示例：

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

4. `fixed`

描述：元素相对于视口进行定位，即使页面滚动，元素也会固定在指定位置。常用于创建固定导航栏或页脚。

示例：

div {
  position: fixed;
  bottom: 0;
  right: 0;
}

5. `sticky`

描述：元素根据用户的滚动行为在 relative 和 fixed 之间切换。当元素在视口中时，表现为 relative；当元素滚动到指定位置时，表现为 fixed。
示例：
```
div {
  position: sticky;
  top: 0;
}
```

总结

static：默认定位，元素按正常文档流排列。
relative：相对自身正常位置定位。
absolute：相对最近的已定位祖先元素定位。
fixed：相对视口定位，固定不动。
sticky：根据滚动行为在 relative 和 fixed 之间切换。

注意事项

使用 absolute 或 fixed 定位时，元素会脱离文档流，可能影响其他元素的布局。
sticky 定位需要指定 top、right、bottom 或 left 中的一个或多个值，否则行为与 relative 相同。

通过合理使用 position 属性，可以实现复杂的布局效果。

三、Padding和Margin空白

padding 和 margin 是 CSS 中用于控制元素内外边距的两个重要属性。它们分别用于调整元素内容与边框之间的距离（padding）以及元素与其他元素之间的距离（margin）。

1. `padding`（内边距）

padding 是元素内容与边框之间的空间。它位于元素的内容区域和边框之间，背景颜色或背景图片会覆盖 padding 区域。

属性值

单个值：设置所有四个方向的内边距。
```
padding: 10px; /* 上下左右均为 10px */
```
两个值：第一个值设置上下内边距，第二个值设置左右内边距。
```
padding: 10px 20px; /* 上下 10px，左右 20px */
```
三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距。
```
padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
```

四个值：分别设置上、右、下、左的内边距（顺时针方向）。

padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

单独设置某个方向的内边距

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

示例

div {
  padding: 20px 30px; /* 上下 20px，左右 30px */
  background-color: lightblue;
}

2. `margin`（外边距）

margin 是元素与其他元素之间的空间。它位于元素边框之外，背景颜色或背景图片不会覆盖 margin 区域。

属性值

单个值：设置所有四个方向的外边距。
```
margin: 10px; /* 上下左右均为 10px */
```
两个值：第一个值设置上下外边距，第二个值设置左右外边距。
```
margin: 10px 20px; /* 上下 10px，左右 20px */
```
三个值：第一个值设置上外边距，第二个值设置左右外边距，第三个值设置下外边距。
```
margin: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
```
四个值：分别设置上、右、下、左的外边距（顺时针方向）。
```
margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
```

单独设置某个方向的外边距

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距

特殊值

auto：常用于水平居中。

margin: 0 auto; /* 上下 0，左右自动（水平居中） */

0：取消外边距。

负值：允许元素与其他元素重叠。

margin-top: -10px; /* 向上移动 10px */

示例

div {
  margin: 20px 30px; /* 上下 20px，左右 30px */
  background-color: lightgreen;
}

3. `padding` 和 `margin` 的区别

特性	`padding`（内边距）	`margin`（外边距）
位置	内容与边框之间	边框与其他元素之间
背景覆盖	背景颜色或图片会覆盖 `padding` 区域	背景颜色或图片不会覆盖 `margin` 区域
影响尺寸	增加 `padding` 会增加元素的实际尺寸	`margin` 不会影响元素的实际尺寸
负值	不支持负值	支持负值
默认值	通常为 `0`	通常为 `0`，但某些元素有默认外边距

4. 盒子模型（Box Model）

padding 和 margin 是盒子模型的重要组成部分。盒子模型包括：

内容区域（Content）：元素的实际内容。
内边距（Padding）：内容与边框之间的空间。
边框（Border）：围绕内容和内边距的边框。
外边距（Margin）：边框与其他元素之间的空间。

示例

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

元素的总宽度 = width + padding + border + margin = 200px + 40px (20px*2) + 10px (5px*2) + 60px (30px*2) = 310px。

5. 注意事项

外边距折叠（Margin Collapse）：当两个垂直相邻的元素都有外边距时，它们的外边距会合并为一个较大的外边距。
box-sizing 属性：默认情况下，padding 和 border 会增加元素的总尺寸。可以通过 box-sizing: border-box 让 padding 和 border 包含在元素尺寸内。
```
div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px; /* 不会增加元素的总宽度 */
}
```

通过合理使用 padding 和 margin，可以更好地控制元素的布局和间距，提升页面的视觉效果和用户体验。

四、文字样式

CSS 提供了丰富的属性来控制文字的样式，包括字体、大小、颜色、对齐方式、间距等。以下是常用的文字相关样式及其详细说明：

1. 字体相关属性

1.1 `font-family`

作用：设置文字的字体。

语法：

font-family: "字体名称", 备用字体, 通用字体;

示例：
```
p {
  font-family: "Arial", "Helvetica", sans-serif;
}
```
- 如果用户设备上没有 Arial 字体，则会尝试使用 Helvetica，最后使用通用的 sans-serif 字体。

1.2 `font-size`

作用：设置文字的大小。
语法：
```
font-size: 值;
```
常用单位：
- px：像素（绝对单位）。
- em：相对于父元素字体大小的倍数。
- rem：相对于根元素（<html>）字体大小的倍数。
- %：相对于父元素字体大小的百分比。
示例：
```
p {
  font-size: 16px;
}
```

1.3 `font-weight`

作用：设置文字的粗细。
语法：
```
font-weight: 值;
```
常用值：
- normal：正常（默认值）。
- bold：加粗。
- bolder：更粗。
- lighter：更细。
- 数字值：100 到 900（400 相当于 normal，700 相当于 bold）。
示例：
```
p {
  font-weight: bold;
}
```

1.4 `font-style`

作用：设置文字的样式。
语法：
```
font-style: 值;
```
常用值：
- normal：正常（默认值）。
- italic：斜体。
- oblique：倾斜（类似于斜体）。
示例：
```
p {
  font-style: italic;
}
```

1.5 `font-variant`

作用：设置小型大写字母。
语法：
```
font-variant: 值;
```
常用值：
- normal：正常（默认值）。
- small-caps：小型大写字母。
示例：
```
p {
  font-variant: small-caps;
}
```

1.6 `font`（简写属性）

作用：简写形式设置字体样式。

语法：

font: font-style font-variant font-weight font-size/line-height font-family;

示例：

p {
  font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

2. 文字颜色

2.1 `color`

作用：设置文字的颜色。
语法：
```
color: 颜色值;
```
颜色值：
- 颜色名称：如 red、blue。
- 十六进制值：如 #ff0000。
- RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)。
- HSL/HSLA：如 hsl(0, 100%, 50%) 或 hsla(0, 100%, 50%, 0.5)。
示例：
```
p {
  color: #333;
}
```

3. 文字对齐与装饰

3.1 `text-align`

作用：设置文字的水平对齐方式。
语法：
```
text-align: 值;
```
常用值：
- left：左对齐（默认值）。
- right：右对齐。
- center：居中对齐。
- justify：两端对齐。
示例：
```
p {
  text-align: center;
}
```

3.2 `text-decoration`

作用：设置文字的装饰线。
语法：
```
text-decoration: 值;
```
常用值：
- none：无装饰（默认值）。
- underline：下划线。
- overline：上划线。
- line-through：删除线。
- underline overline：组合使用。
示例：
```
p {
  text-decoration: underline;
}
```

3.3 `text-transform`

作用：设置文字的大小写转换。
语法：
```
text-transform: 值;
```
常用值：
- none：无转换（默认值）。
- uppercase：全部大写。
- lowercase：全部小写。
- capitalize：首字母大写。
示例：
```
p {
  text-transform: uppercase;
}
```

4. 文字间距

4.1 `letter-spacing`

作用：设置字符之间的间距。
语法：
```
letter-spacing: 值;
```
常用单位：px、em。
示例：
```
p {
  letter-spacing: 2px;
}
```

4.2 `word-spacing`

作用：设置单词之间的间距。
语法：
```
word-spacing: 值;
```
常用单位：px、em。
示例：
```
p {
  word-spacing: 5px;
}
```

4.3 `line-height`

作用：设置行高（行间距）。
语法：
```
line-height: 值;
```
常用值：
- 无单位数字：相对于当前字体大小的倍数。
- 固定值：如 20px。
示例：
```
p {
  line-height: 1.5;
}
```

5. 其他文字样式

5.1 `text-shadow`

作用：为文字添加阴影效果。

语法：

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

示例：

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

5.2 `white-space`

作用：控制空白符的处理方式。
语法：
```
white-space: 值;
```
常用值：
- normal：合并空白符，自动换行（默认值）。
- nowrap：合并空白符，不换行。
- pre：保留空白符，不换行。
- pre-wrap：保留空白符，自动换行。
- pre-line：合并空白符，自动换行。
示例：
```
p {
  white-space: nowrap;
}
```

通过合理使用这些文字样式属性，可以轻松实现丰富的文字效果，提升页面的可读性和美观性。

五、伪类和伪元素

CSS中的伪类和伪元素是两种用于选择特定元素或元素部分并为其应用样式的重要机制。以下是关于CSS伪类和伪元素的详细说明：

一、伪类（Pseudo-classes）

伪类用于选择文档的特定状态或位置的元素。它们以冒号（:）开头，后面跟伪类名称。伪类不对应于任何实际的DOM元素，而是基于元素的当前状态或位置来选择元素。

常见的伪类包括：

用户交互伪类：
- :hover：当用户将鼠标悬停在元素上时应用样式。
- :active：当元素被激活时（如被点击）应用样式。
- :focus：当元素获得焦点时应用样式。
结构性伪类：
- :first-child：选择属于其父元素的第一个子元素的每个元素。
- :last-child：选择属于其父元素的最后一个子元素的每个元素。
- :nth-child(n)：选择属于其父元素的第n个子元素的每个元素，n可以是数字、关键字（even、odd）或表达式（如2n+1）。
- :only-child：选择属于其父元素的唯一子元素的每个元素。
- :empty：选择没有子元素（包括文本节点）的元素。
- :root：选择文档的根元素，通常是<html>元素。
否定伪类：
- :not(selector)：选择不匹配给定选择器的元素。
表单伪类：
- :checked：匹配每个当前被选中的<input>元素。
- :disabled：匹配每个当前被禁用的<input>元素。
- :enabled：匹配每个当前被启用的<input>元素。
- :indeterminate：匹配每个处于不确定状态的<input>元素。
- :valid 和 :invalid：分别匹配有效和无效的表单元素。
其他伪类：
- :link 和 :visited：分别匹配未访问和已访问的链接。
- :target：匹配当前URL片段标识符的目标元素。
- :scope：匹配当前样式作用域内的元素。
- :dir(ltr|rtl)：选择具有特定书写方向的元素。

二、伪元素（Pseudo-elements）

伪元素用于选择元素的一部分内容，并为这部分内容设置样式。伪元素在文档树中并不真正存在，但可以被样式化。在CSS3中，伪元素使用双冒号（::）语法来区分它们与伪类。

常见的伪元素包括：

::before：在元素内容的前面插入生成的内容。通常与content属性一起使用来指定要插入的内容。
::after：在元素内容的后面插入生成的内容。同样与content属性一起使用。
::first-line：用于选择块级元素的首行文本，并为它设置样式。
::first-letter：用于选择块级元素的首字母，并为它设置样式。
::selection：用于匹配用户高亮（选中）的部分，并为它设置样式。需要注意的是，::selection伪元素只能用于设置一些有限的CSS属性，如color、background等。
::placeholder：用于匹配<input>或<textarea>元素的占位符文本，并为它设置样式。

三、伪类与伪元素的区别

作用对象：伪类用于选择元素的特定状态或位置，而伪元素用于选择元素的一部分内容。
语法：伪类以单冒号（:）开头，而伪元素在CSS3中以双冒号（::）开头（尽管在CSS2.1及更早版本中，伪元素也使用单冒号）。
功能：伪类基于元素的当前状态或位置来选择元素，而伪元素则插入或选择元素的一部分内容来进行样式化。

综上所述，CSS伪类和伪元素提供了强大的选择机制，使得开发者能够为文档的特定部分或状态应用样式，从而实现更丰富的视觉效果和用户体验。

六、动画相关样式

CSS动画相关样式主要包括transition属性、transform属性、@keyframes规则以及animation属性。以下是对这些动画相关样式的详细说明：

一、`transition`属性

transition属性用于实现元素的渐变动画，它允许元素在某些CSS属性发生变化时，以平滑过渡的方式展现这些变化。

语法：transition: property duration timing-function delay;
参数：
- property：指定需要进行过渡的CSS属性，如width、height、background-color等。
- duration：过渡动画的持续时间，即动画从开始到结束所需的时间。
- timing-function：缓动函数，用于指定动画的速度曲线。常见的值有ease、ease-in、ease-out、ease-in-out、linear等。
- delay：动画开始前的延迟时间。

二、`transform`属性

transform属性用于对元素进行2D或3D转换，包括旋转、缩放、倾斜和移动等操作。

旋转（rotate）：transform: rotate(angle);。其中angle为旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
缩放（scale）：transform: scale(x, y);。其中x和y分别为水平和垂直方向的缩放比例。如果只指定一个值，则两个方向使用相同的缩放比例。
倾斜（skew）：transform: skew(x-angle, y-angle);。其中x-angle和y-angle分别为水平和垂直方向的倾斜角度。
移动（translate）：transform: translate(x, y);。其中x和y分别为水平和垂直方向的移动距离。也可以使用百分比形式，相对于元素自身的宽高进行平移。

此外，transform属性还支持3D转换，如rotateX、rotateY、rotateZ进行3D旋转，以及scale3d、translate3d进行3D缩放和移动。

三、`@keyframes`规则

@keyframes规则用于定义动画序列中的关键帧样式。通过指定动画开始、结束以及中间点的样式，可以创建复杂的动画效果。

语法：@keyframes animation-name { keyframe-selector { css-styles; } }
参数：
- animation-name：关键帧列表的名字，要保证全局且唯一。
- keyframe-selector：关键帧选择器，用于选择触发关键帧的时间点。通常使用百分比来指定，如0%表示动画开始时，100%表示动画结束时。也可以使用from和to来分别代替0%和100%。
- css-styles：关键帧改变的样式。

四、`animation`属性

animation属性用于将关键帧动画应用到元素上，并指定动画的一些行为和细节。

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
参数：
- name：指定由@keyframes描述的关键帧名称。
- duration：设置动画一个周期的时长。
- timing-function：缓动函数，用于指定动画在关键帧之间的速度曲线。
- delay：设置动画开始前的延迟时间。
- iteration-count：动画播放的次数，可以使用infinite表示无限次循环。
- direction：动画播放的方向。常见的值有normal（正常播放）、reverse（反向播放）、alternate（正反交替播放）和alternate-reverse（反正交替播放）。
- fill-mode：指定动画执行前后如何为目标元素应用样式。常见的值有none（默认值，动画前后不应用关键帧样式）、forwards（动画结束后保留最后一帧的样式）、backwards（动画开始前应用第一帧的样式）和both（同时具有forwards和backwards的特点）。
- play-state：动画播放的状态，可以是paused（暂停）或running（播放）。

综上所述，CSS动画相关样式提供了丰富的功能，允许开发者创建各种复杂的动画效果。通过合理使用这些样式，可以为网页增添生动的视觉效果，提升用户体验。