CSS样式基础

呀啊~~

已于 2025-02-06 19:46:06 修改

阅读量1.2k

点赞数 28

分类专栏：【前端基础】文章标签： vue.js css 前端学习

于 2025-02-06 15:01:34 首次发布

本文链接：https://blog.youkuaiyun.com/ZT_LJ/article/details/145473709

版权

【前端基础】专栏收录该内容

6 篇文章

订阅专栏

1. 基础样式

CSS的基础样式包括对文本、背景、边框、字体等常见元素的样式控制。掌握这些基本样式是前端开发的基础。

1.1 颜色

color: 设置文本的颜色。
```
p {
  color: red;
}
```
background-color: 设置背景色。
```
div {
  background-color: #f0f0f0;
}
```

background-image: 设置背景图像。

div {
  background-image: url('background.jpg');
}

1.2 字体样式

font-family: 设置字体类型。

body {
  font-family: Arial, sans-serif;
}

font-size: 设置字体大小。
```
p {
  font-size: 16px;
}
```
font-weight: 设置字体粗细。
```
h1 {
  font-weight: bold;
}
```
font-style: 设置字体样式（如斜体）。
```
em {
  font-style: italic;
}
```

1.3 文本样式

text-align: 设置文本对齐方式。
```
p {
  text-align: center;
}
```
line-height: 设置行高。
```
p {
  line-height: 1.5;
}
```
text-transform: 设置文本转换，如大写、小写等。
```
h2 {
  text-transform: uppercase;
}
```

1.4 其他常见属性

letter-spacing: 设置字符之间的间距。
word-spacing: 设置单词之间的间距。
text-decoration: 设置文本的装饰（如下划线）。
```
a {
  text-decoration: none;
}
```

2. BFC（块级格式化上下文）

BFC是CSS中的一种布局模式，它决定了元素如何参与文档的布局，以及它如何与其他元素进行交互。

2.1 BFC的触发条件

根元素（<html>）。
浮动元素（float 不为 none）。
position 为 absolute 或 fixed。
display 为 inline-block、table-cell、flex 等布局值。
overflow 设置为 hidden、auto 或 scroll。

2.2 BFC的特性

外边距合并（Margin Collapse）: 垂直方向的相邻块级元素的外边距会合并为一个（较大的那个值）。
浮动元素的清除: BFC 会清除浮动元素的影响，阻止它们溢出。
容器包含浮动: 如果父元素开启了BFC，则它能够包含浮动的子元素。

.container {
  overflow: hidden;  /* 启动BFC */
}

3. 选择器

CSS 选择器是我们在样式表中选择 HTML 元素的方式，常见的选择器包括：

3.1 基本选择器

元素选择器：直接通过标签名称选择元素。
```
p {
  color: blue;
}
```
类选择器：通过类名选择元素。
```
.container {
  padding: 20px;
}
```
ID选择器：通过元素的 ID 选择元素。
```
#header {
  background-color: gray;
}
```

3.2 组合选择器

后代选择器：选择某元素内部的子元素。
```
div p {
  color: red;
}
```
子元素选择器：只选择直接子元素。
```
div > p {
  color: green;
}
```
相邻兄弟选择器：选择紧接在另一个元素后的元素。
```
h2 + p { 
  margin-top: 10px; 
}
```
通用兄弟选择器：选择与指定元素有相同父元素的所有元素。
```
h2 ~ p { 
  color: blue; 
}
```

3.3 伪类选择器

:hover: 鼠标悬停时触发。
```
a:hover {
  color: red;
}
```
:first-child: 选择第一个子元素。
```
p:first-child {
  font-weight: bold;
}
```

:nth-child(n): 根据位置选择元素。

li:nth-child(odd) {
  background-color: #f2f2f2;
}

3.4 伪元素选择器

::before: 在元素的内容之前插入内容。

p::before {
  content: 'Note: ';
  font-weight: bold;
}

::after: 在元素的内容之后插入内容。
```
p::after { 
    content: ' End.'; 
}
```

4. 盒模型

CSS的盒模型是页面布局的核心概念，它决定了每个元素的尺寸计算方式。盒模型包括了以下几个部分：

4.1 盒模型的组成

content: 元素的实际内容区域。
padding: 内容与边框之间的空白区域。
border: 元素的边框。
margin: 元素的外边距，决定了元素之间的距离。

div {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

4.2 盒模型的计算

默认情况下，盒模型的计算是 content-box（即宽度和高度仅指内容区域），可以通过 box-sizing 属性来改变：

box-sizing: content-box（默认值）：宽高只计算内容区域，不包括内边距和边框。
box-sizing: border-box：宽高包括内容区域、内边距和边框。

div {
  box-sizing: border-box;
  width: 300px; /* 宽度将包括padding和border */
}

5. 页面布局

页面布局是CSS中的重要部分，涉及到如何摆放页面元素。

5.1 常见布局方法

流式布局：元素按文档流自然排布，常用于简单的页面结构。

Flexbox布局：用于一维布局（行或列），可以很方便地对齐元素。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

Grid布局：用于二维布局（行和列），非常适合复杂的页面布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

绝对定位与固定定位：在元素上使用 position 属性来控制位置。
```
.fixed {
  position: fixed;
  top: 10px;
  right: 20px;
}
```

5.2 响应式设计

使用 媒体查询（@media）根据设备的宽度或其他特性来调整页面布局，以适应不同屏幕大小：

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

6. 定位与浮动

6.1 定位

static: 默认定位方式，元素按照文档流排列。
relative: 相对定位，元素相对于其正常位置进行偏移。
```
div {
  position: relative;
  top: 10px;
}
```
absolute: 绝对定位，元素相对于最近的定位父元素定位。
```
div {
  position: absolute;
  top: 50px;
  left: 100px;
}
```
fixed: 固定定位，元素相对于浏览器窗口定位，滚动页面时位置不变。
```
div { 
    position: fixed; 
    bottom: 10px; 
    right: 10px; 
}
```

6.2 浮动

float: 用于让元素脱离正常文档流，向左或向右浮动，通常用于文本环绕图像的效果。
```
img {
  float: left;
  margin-right: 10px;
}
```
clear: 用来控制浮动元素的清除，避免浮动元素影响后续内容。
```
div {
  clear: both;
}
```