css ( cascading style sheets )

_mapping

已于 2025-02-07 19:31:55 修改

阅读量659

点赞数 10

分类专栏： # css 文章标签： css 前端

于 2024-12-30 22:37:38 首次发布

本文链接：https://blog.csdn.net/qq_37757277/article/details/144835745

版权

css 专栏收录该内容

6 篇文章

订阅专栏

css

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档的呈现样式的语言。它的主要作用是为Web文档的内容添加美观的样式，使网页更加用户友好和吸引人。以下是对CSS的几个关键点的简要介绍：

CSS 的基本概念

选择器:
选择器用于指定需要应用样式的HTML元素。常见的选择器包括类型选择器、类选择器、ID选择器、属性选择器等。
1. 元素选择器：如 p, div, span
2. 类选择器：如 .class-name
3. ID 选择器：如 #id-name
4. 属性选择器：如 [attribute=“value”]
5. 伪类和伪元素：如 :hover, ::before ¹ 。
  
  伪类和伪元素是CSS中的两种特殊选择器，用于为特定的元素状态或选择元素的部分应用样式。伪类针对“状态”，伪元素针对“部分”。：
  1. 伪类（Pseudo-class）
    伪类用于选择元素的特定状态，例如鼠标悬停、选中等。它通过:符号表示，例如：
    - :hover：鼠标悬停状态
    - :nth-child()：选择特定子元素
    - :focus：元素获得焦点
  2. 伪元素（Pseudo-element）
    伪元素用于样式化元素的一部分内容，例如首字母、子内容等。它通过::符号表示（CSS2中部分伪元素也可用:），例如：
    - ::before：在元素内容前生成内容
    - ::after：在元素内容后生成内容
    - ::first-letter：选择第一字符
属性和属性值:
CSS由许多属性组成，这些属性定义了将应用于某个元素的具体样式。每个属性都有一个相对应的属性值，例如 color: red; 将文本的颜色设置为红色。
- Commonly used CSS properties
  - width-(宽度)，unit:px(像素)
  - height -(高度)
  - color-(前景色，也就是文字的颜色)
  - background-color-(背景色)
  - font-size-(字体的大小)
层叠性和优先级:
CSS的“层叠性”允许在多个样式规则之间进行选择。优先级规则帮助决定当多个规则应用于同一元素时，哪些规则会生效。通常，特异性（specificity）、源顺序和重要性（通过!important）影响优先级 ¹。

CSS 的用途

排版: 控制文本的字体、大小、颜色、行高、字间距等。
布局: 定义元素的位置、浮动、定位、显示等属性来创建复杂的布局结构。
背景: 设置背景颜色、图像、渐变等。
边框和轮廓：样式、颜色、宽度等
响应式设计: 使用媒体查询来适应不同设备屏幕的宽度，从而使页面在移动设备和桌面设备上都能友好的展示。
- 媒体查询：根据设备特性应用不同的样式
- 弹性盒子（Flexbox）和网格（Grid）布局
动画和过渡: 创建复杂的动画效果和元素状态过渡。通过过渡、动画、关键帧等功能，CSS可以实现复杂的视觉特效，不涉及JavaScript。
预处理器：
- Sass, Less, Stylus 等，提供更强大的 CSS 编写功能。Sass, Less, Stylus 等，扩展了CSS的功能，支持变量、嵌套、运算等。
类库和框架: 如Bootstrap、Tailwind CSS，提供预定义的风格和组件，加速开发过程。

引入 CSS

CSS可以通过多种方式引入到HTML文档中：

行内样式（Inline Styles）:
直接在HTML元素中使用 style 属性定义样式，例如：
```
<p style="color:blue;">This is a blue text.</p>
```
嵌入样式（Embedded Styles）:
使用 <style> 标签直接在HTML文档的 <head> 部分书写样式，例如：
```
<style>
  p { color: blue; }
</style>
```
外部样式表（External Stylesheets）:
将样式写在一个独立的CSS文件中，然后通过 <link> 标签引用，比如：
```
<link rel="stylesheet" href="styles.css">
```

CSS通过提供与HTML结构清晰分离的样式层级，使开发者能够更灵活、高效地控制Web页面的设计和布局。CSS与HTML、JavaScript一起构成前端开发的三大支柱，掌握CSS对于创建现代、响应式的Web界面至关重要。

css syntax

css selectors

box model

every element on a page is a rectangular box.

这是一个使用 CSS Box Model 的简单例子，演示如何设置元素的内容、内边距、边框和外边距，以及它们对元素整体大小的影响。

HTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="box">This is a box model example.</div>

</body>
</html>

CSS 示例

.box {
    width: 200px;                  /* 内容宽度 */
    height: 100px;                 /* 内容高度 */
    
    padding: 20px;                 /* 内边距 */
    
    border: 5px solid #000;        /* 边框 */
    
    margin: 15px;                  /* 外边距 */
    
    background-color: lightblue;   /* 背景颜色 */
    color: #333;                   /* 文本颜色 */
    box-sizing: content-box;       /* 默认盒模型 */
}

解析

内容（Content）: 这是元素显示文本的区域，宽度为 200px，高度为 100px。
内边距（Padding）: 在内容和边框之间有 20px 的空白区域。这使得元素的“视觉”内容区域看起来更宽更高，但内容宽高属性仍然是 200x100px。Padding（内边距）围绕内容，是透明的，用于增加元素内容和其边框之间的距离。
边框（Border）: 边框宽度为 5px，围绕着内边距，使元素看起来更有立体感。设置边框颜色为黑色。
外边距（Margin）: 元素周围有 15px 的外边距，确保该元素与其他元素之间有一定的空白区域。
背景颜色: 整个元素的背景颜色为淡蓝色。
文本颜色: 设置文本颜色为深灰色。
标准盒模型 vs IE盒模型
1. 标准盒模型（Content-Box）:
  - 元素的实际宽度 = width + padding + border
  - width 和 height 只应用于内容区域
2. IE盒模型（Border-Box）:
  - 元素的实际宽度 = width（包含了padding和border）
  - width 和 height 包括内容区域、内边距和边框

结果

在这里插入图片描述

当浏览器渲染这段代码时，.box 元素的总宽度和高度可以通过以下公式计算：

总宽度: 200px (内容宽度) + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px
总高度: 100px (内容高度) + 20px (上内边距) + 20px (下内边距) + 5px (上边框) + 5px (下边框) = 150px

外边距没有包含在总宽度和高度的计算中，但会影响元素在页面上的定位。

CSS Box Model 是 CSS 设计和布局的基础概念之一。它定义了一个包含元素内容、内边距、边框和外边距的矩形盒子。每个 HTML 元素在浏览器中被渲染为盒子，通过理解 Box Model，你可以更好地控制页面元素之间的空间和布局。以下是对盒模型构成的详细解释：

CSS Box Model 组件

Content（内容）:
- 元素的实际内容，例如文本、图像、视频等，内容区的大小由 width 和 height 属性控制。
Padding（内边距）:
- 围绕内容的空间，透明的，用于增加元素内容和其边框之间的距离。可单独设置 padding-top, padding-right, padding-bottom, 和 padding-left。
Border（边框）:
- 围绕内边距（如果有）的边界，可以设置其宽度、样式和颜色。每边的边框可分别设置，比如 border-width、border-style 和 border-color。
Margin（外边距）:
- 在元素边框外的透明区域，用于在该元素与其他元素之间创建空间。类似于内边距，可单独设置 margin-top, margin-right, margin-bottom, 和 margin-left。

Box Model 的计算

盒模型的总宽度和高度是通过以下公式计算的：

总宽度: width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
总高度: height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

Box Sizing 模式

通过 box-sizing 属性，开发者可以更改元素的盒子模型计算方式：

content-box (默认): width 和 height 只包含内容区，不包括内边距和边框。
border-box: width 和 height 包含内容区、内边距和边框。不包括外边距。

使用 border-box 可以让样式和布局更易于控制和计算，避免内边距和边框大小影响到盒子的总大小。

理解和正确应用 CSS Box Model 是创造精确、可控的 Web 布局的重要基础。通过合理设置每个组件的尺寸，开发者可以创建出具有良好视觉效果和用户体验的网站。

position

z-index 是 CSS 中用于控制元素在 Z 轴上（即垂直于页面的轴线上）的堆叠顺序的属性。它决定了元素在网页上是位于更前面还是更后面，适用于定位元素（即使用 position 属性设置为 absolute、relative、fixed 或 sticky 的元素 ¹ ）。

在这里插入图片描述

使用场景

在网页设计中，多个元素可能在视觉上互相重叠。z-index 允许开发者指定哪个元素应该显示在顶部。例如，模态窗口、浮动菜单、工具提示等都可以通过调整 z-index 来正确定位。

语法

.element {
    position: relative;  /* 确保元素被定位 */
    z-index: 10;         /* 设置堆叠顺序 */
}

属性值说明

整数值: 可以是正整数、负整数或零。例如，z-index: 10; 表示此元素会比 z-index: 5; 的元素显示得更加靠前。
- 较大的 z-index 值表示该元素会显示在叠放顺序的上层。
- 较小的 z-index 值表示该元素会显示在下层。
自动计算: 默认情况下，所有元素的 z-index 为 auto （默认值，元素按照其在 HTML 中出现的顺序堆叠）。

注意事项

定位元素: z-index 只对定位元素有效（即 position 属性不是 static 的元素）。
父子关系: 如果元素的父级元素有 z-index 设置，子元素的 z-index 相对父元素定义的上下文计算。
堆叠上下文: 创建新的堆叠上下文的元素会限制其子元素的 z-index 作用范围。例如，如果父元素具有 z-index 值，子元素的 z-index 值是相对于这个父元素的，而不是整个文档。
负值: z-index 可以为负值，这意味着它将被渲染在默认文档流元素之后。
堆叠上下文：
- z-index 创建了一个堆叠上下文。
- 元素的 z-index 只在其父堆叠上下文中有效。
继承：
子元素默认继承父元素的堆叠层级，但可以通过设置自己的 z-index 来改变。
auto 值：
当 z-index 为 auto 时，元素不会创建新的堆叠上下文。
负值：
负值的 z-index 会使元素显示在默认堆叠顺序之下。
无单位：
z-index 值不需要单位。

示例

假设我们有两个重叠的盒子：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1;
}

.box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    left: 50px; /* 将其定位以便稍微重叠 */
    z-index: 2;
}

在这个例子中，box2 会显示在 box1 上，因为 box2 的 z-index 为 2，而 box1 的 z-index 为 1。通过调整 z-index 值，开发者可以控制哪些元素应该显示在更上层。

flexbox

如何使用弹性盒子, 直接使用吗

弹性盒子（Flexbox）是一个 CSS3 布局模型，用于更有效地排列和对齐容器中的子项，即使它们的大小是动态的，也可以相对均等地分布在容器中。Flexbox 布局试图提供一种更有效的方式来布局，对齐和分布空间，尤其适合需要自适应布局以及复杂布局的场合。这种布局是为了解决不同屏幕尺寸和设备显示内容时的布局问题。

使用弹性盒子（Flexbox）来布局是一个简洁而强大的方式，可以直接通过CSS属性来实现。通过简单而强大的方式来使容器中的元素具有弹性。解决不同屏幕尺寸和设备显示内容时的布局问题。以下是如何使用弹性盒子的基本步骤：

基本概念

容器（Container）：具有 display: flex 或 display: inline-flex 的元素，它们的直接子元素将成为弹性项目（items）。
项目（Items）：容器内的子元素，它们会根据容器的属性进行排列和布局。

基本步骤

定义Flex容器：
- 将HTML元素的 display 属性设置为 flex（块级）或 inline-flex（行内级），这将使该元素成为Flex容器。
```
.container {  
    display: flex;  
}
```

设置Flex属性：

根据需要，可以为Flex容器设置各种布局属性，如 flex-direction、justify-content、align-items 等。

.container {  
    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  
}

配置Flex项目：
- Flex容器中的直接子元素是Flex项目（items），你可以控制它们的行为和排列方式，如 flex-grow、flex-shrink、order 等。
```
.item {  
    flex: 1; /* 默认1相同大小 */  
}  

.item-special {  
    flex: 2; /* 占两倍空间 */  
}
```

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            flex-direction: row; /* 项目从左到右排列 */
            justify-content: space-between; /* 项目均匀分布在行中 */
            align-items: center; /* 项目在竖直方向居中对齐 */
            height: 200px; /* 容器高度 */
            border: 1px solid #ccc;
            padding: 10px;
        }

        .flex-item {
            background-color: lightgray;
            padding: 20px;
            margin: 5px;
            flex-grow: 1; /* 每个项目将会平分可用空间 */
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>