2024-11-21CSS样式整理

针对 CSS学习过程中核心的知识进行总结，内容可能不全，当前只是为了知识扫盲！

1-针对CSS中的选择器给出具体的知识案例

CSS 选择器详解及案例

CSS 选择器用于选择你想要样式化的 HTML 元素。选择器是 CSS 规则的一部分，它指定了你要应用样式的元素。以下是一些常见的 CSS 选择器及其具体案例：

1. 元素选择器

用于选择特定类型的 HTML 元素。

案例：

<style>
p {
    color: blue;
}
</style>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

解释： 所有 <p> 元素的文本颜色将被设置为蓝色。

2. 类选择器

用于选择具有特定 class 属性的元素。

案例：

<style>
.highlight {
    background-color: yellow;
}
</style>

<p class="highlight">这是一个高亮的段落。</p>
<p>这是另一个段落。</p>

解释： 具有 highlight 类的段落背景颜色将被设置为黄色。

3. ID 选择器

用于选择具有特定 id 属性的元素。

案例：

<style>
#unique {
    font-weight: bold;
}
</style>

<p id="unique">这是一个唯一标识的段落。</p>
<p>这是另一个段落。</p>

解释： 具有 unique ID 的段落文本将加粗显示。

4. 属性选择器

用于选择具有特定属性的元素。

案例：

<style>
input[type="text"] {
    border: 2px solid green;
}
</style>

<input type="text" placeholder="输入文本">
<input type="password" placeholder="输入密码">

解释： 所有 type="text" 的输入框将具有绿色边框。

5. 伪类选择器

用于选择处于特定状态的元素，如悬停、点击等。

案例：

<style>
a:hover {
    text-decoration: underline;
}
</style>

<a href="#">这是一个链接</a>

解释： 当鼠标悬停在链接上时，链接将显示下划线。

6. 伪元素选择器

用于选择元素的特定部分，如第一行、第一个字母等。

案例：

<style>
p::first-letter {
    font-size: 2em;
}
</style>

<p>这是一个段落。</p>

解释： 段落中的第一个字母将放大显示。

7. 组合选择器

用于通过组合不同的选择器来选择元素。

案例：

<style>
div p {
    color: red;
}
</style>

<div>
    <p>这是一个在 div 中的段落。</p>
</div>
<p>这是一个不在 div 中的段落。</p>

解释： 所有位于 <div> 内的 <p> 元素的文本颜色将被设置为红色。

8. 子选择器

用于选择直接子元素。

案例：

<style>
ul > li {
    list-style-type: square;
}
</style>

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

解释： 所有直接位于 <ul> 内的 <li> 元素将以方形项目符号显示。

9. 相邻兄弟选择器

用于选择紧接在另一个元素后的元素。

案例：

<style>
h2 + p {
    font-style: italic;
}
</style>

<h2>标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

解释： 直接位于 <h2> 元素后的第一个 <p> 元素将显示为斜体。

10. 通用选择器

用于选择所有元素。

案例：

<style>
* {
    margin: 0;
    padding: 0;
}
</style>

<!-- 页面内容 -->

解释： 所有元素的 margin 和 padding 将被重置为 0。

这些选择器可以单独使用，也可以组合使用，以实现更复杂和精确的样式控制。理解并熟练使用这些选择器是掌握 CSS 的关键。

2-针对CSS中的颜色给出具体的知识案例

CSS 颜色详解及案例

在 CSS 中，颜色可以通过多种方式指定，包括颜色名称、十六进制值、RGB 值、RGBA 值、HSL 值和 HSLA 值。以下是一些具体的知识案例，展示了如何在 CSS 中使用这些颜色表示法。

1. 颜色名称

CSS 支持许多预定义的颜色名称。

案例：

<style>
p {
    color: red;
}
</style>

<p>这是红色的文本。</p>

解释： 文本颜色将被设置为红色。

2. 十六进制颜色值 (Hexadecimal)

十六进制颜色值是最常见的颜色表示法之一，由 # 符号和六位十六进制数组成。

案例：

<style>
p {
    color: #00FF00;
}
</style>

<p>这是绿色的文本。</p>

解释： 文本颜色将被设置为绿色（RGB 值为 0, 255, 0）。

3. 简写的十六进制颜色值

如果每两位数字相同，可以简写为三位数字。

案例：

<style>
p {
    color: #F00;
}
</style>

<p>这是红色的文本。</p>

解释： 文本颜色将被设置为红色（RGB 值为 255, 0, 0）。

4. RGB 颜色值

RGB 颜色值由红、绿、蓝三个分量组成，每个分量的值范围是 0 到 255。

案例：

<style>
p {
    color: rgb(0, 0, 255);
}
</style>

<p>这是蓝色的文本。</p>

解释： 文本颜色将被设置为蓝色（RGB 值为 0, 0, 255）。

5. RGBA 颜色值

RGBA 颜色值在 RGB 的基础上增加了一个透明度（Alpha）分量，范围是 0 到 1。

案例：

<style>
p {
    color: rgba(255, 0, 0, 0.5);
}
</style>

<p>这是半透明的红色文本。</p>

解释： 文本颜色将被设置为半透明的红色（RGB 值为 255, 0, 0，透明度为 0.5）。

6. HSL 颜色值

HSL 颜色值由色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个分量组成。

案例：

<style>
p {
    color: hsl(120, 100%, 50%);
}
</style>

<p>这是绿色的文本。</p>

解释： 文本颜色将被设置为绿色（色相为 120，饱和度为 100%，亮度为 50%）。

7. HSLA 颜色值

HSLA 颜色值在 HSL 的基础上增加了一个透明度（Alpha）分量，范围是 0 到 1。

案例：

<style>
p {
    color: hsla(240, 100%, 50%, 0.3);
}
</style>

<p>这是半透明的蓝色文本。</p>

解释： 文本颜色将被设置为半透明的蓝色（色相为 240，饱和度为 100%，亮度为 50%，透明度为 0.3）。

8. 背景颜色

除了文本颜色，还可以设置元素的背景颜色。

案例：

<style>
div {
    background-color: #FFA500;
}
</style>

<div>这是一个橙色背景的元素。</div>

解释： 元素的背景颜色将被设置为橙色（十六进制值为 #FFA500）。

9. 边框颜色

可以为元素的边框设置颜色。

案例：

<style>
div {
    border: 2px solid green;
}
</style>

<div>这是一个绿色边框的元素。</div>

解释： 元素的边框将被设置为绿色（颜色名称为 green）。

10. 渐变背景

可以使用 CSS 渐变功能来创建复杂的背景颜色效果。

案例：

<style>
div {
    background: linear-gradient(to right, red, yellow);
}
</style>

<div>这是一个红色到黄色渐变的背景。</div>

解释： 元素的背景将从左到右由红色渐变为黄色。

这些颜色表示法可以根据具体需求灵活使用，帮助你实现丰富的视觉效果。

3-针对CSS中的文本给出具体的知识案例

CSS 文本样式详解及案例

在 CSS 中，文本样式可以通过多种属性进行控制，包括字体、颜色、对齐方式、装饰、缩进、行高等。以下是一些具体的知识案例，展示了如何在 CSS 中应用这些文本样式。

1. 字体 (Font Family)

使用 font-family 属性可以设置文本的字体。

案例：

<style>
p {
    font-family: "Arial", sans-serif;
}
</style>

<p>这是一个使用 Arial 字体的段落。</p>

解释： 文本将使用 Arial 字体，如果 Arial 不可用，将使用系统默认的 sans-serif 字体。

2. 字体大小 (Font Size)

使用 font-size 属性可以设置文本的字体大小。

案例：

<style>
p {
    font-size: 16px;
}
</style>

<p>这是一个字体大小为 16px 的段落。</p>

解释： 文本的字体大小将被设置为 16 像素。

3. 字体粗细 (Font Weight)

使用 font-weight 属性可以设置文本的字体粗细。

案例：

<style>
p {
    font-weight: bold;
}
</style>

<p>这是一个加粗的段落。</p>

解释： 文本将加粗显示。

4. 字体样式 (Font Style)

使用 font-style 属性可以设置文本的字体样式，如斜体。

案例：

<style>
p {
    font-style: italic;
}
</style>

<p>这是一个斜体的段落。</p>

解释： 文本将以斜体显示。

5. 文本颜色 (Color)

使用 color 属性可以设置文本的颜色。

案例：

<style>
p {
    color: blue;
}
</style>

<p>这是一个蓝色的段落。</p>

解释： 文本颜色将被设置为蓝色。

6. 文本对齐 (Text Align)

使用 text-align 属性可以设置文本的对齐方式。

案例：

<style>
p {
    text-align: center;
}
</style>

<p>这是一个居中对齐的段落。</p>

解释： 文本将居中对齐。

7. 文本装饰 (Text Decoration)

使用 text-decoration 属性可以为文本添加装饰，如下划线、删除线等。

案例：

<style>
a {
    text-decoration: none;
}
</style>

<a href="#">这是一个没有下划线的链接。</a>

解释： 链接文本将没有下划线。

8. 文本缩进 (Text Indent)

使用 text-indent 属性可以设置段落的首行缩进。

案例：

<style>
p {
    text-indent: 20px;
}
</style>

<p>这是一个首行缩进 20px 的段落。这是一个首行缩进 20px 的段落。这是一个首行缩进 20px 的段落。</p>

解释： 段落的首行将缩进 20 像素。

9. 行高 (Line Height)

使用 line-height 属性可以设置行高。

案例：

<style>
p {
    line-height: 1.5;
}
</style>

<p>这是一个行高为 1.5 的段落。这是一个行高为 1.5 的段落。这是一个行高为 1.5 的段落。</p>

解释： 行高将被设置为字体大小的 1.5 倍。

10. 字母间距 (Letter Spacing)

使用 letter-spacing 属性可以设置字母之间的间距。

案例：

<style>
p {
    letter-spacing: 2px;
}
</style>

<p>这是一个字母间距为 2px 的段落。</p>

解释： 字母之间的间距将被设置为 2 像素。

11. 文本转换 (Text Transform)

使用 text-transform 属性可以改变文本的大小写。

案例：

<style>
p {
    text-transform: uppercase;
}
</style>

<p>这是一个全部大写的段落。</p>

解释： 文本将全部转换为大写。

12. 文本阴影 (Text Shadow)

使用 text-shadow 属性可以为文本添加阴影效果。

案例：

<style>
p {
    text-shadow: 2px 2px 4px #000000;
}
</style>

<p>这是一个带有阴影的段落。</p>

解释： 文本将有一个 2 像素的水平和垂直偏移，4 像素的模糊半径，黑色阴影。

这些文本样式属性可以根据具体需求灵活使用，帮助你实现丰富多样的文本效果。

4-针对CSS中的盒子模型给出具体的知识案例

CSS 盒子模型详解及案例

CSS 盒子模型是理解和控制网页布局的基础。每个 HTML 元素都被视为一个矩形盒子，这个盒子由四个部分组成：内容区域、内边距（padding）、边框（border）和外边距（margin）。以下是一些具体的知识案例，展示了如何在 CSS 中应用盒子模型。

1. 内容区域 (Content Area)

内容区域是盒子模型的核心，包含了实际的文本、图像或其他内容。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}
</style>

<div>这是一个内容区域。</div>

解释： 这个 div 元素的内容区域大小为 200px 宽、100px 高，背景颜色为浅蓝色。

2. 内边距 (Padding)

内边距是内容区域与边框之间的空间，可以通过 padding 属性设置。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
}
</style>

<div>这是一个带有内边距的盒子。</div>

解释： 这个 div 元素的内容区域周围有 20px 的内边距，背景颜色为浅蓝色。

3. 边框 (Border)

边框是环绕内容区域和内边距的线条，可以通过 border 属性设置。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
    border: 2px solid black;
}
</style>

<div>这是一个带有边框和内边距的盒子。</div>

解释： 这个 div 元素的内容区域周围有 2px 宽的黑色实线边框，内部还有 20px 的内边距。

4. 外边距 (Margin)

外边距是边框与其他元素之间的空间，可以通过 margin 属性设置。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}
</style>

<div>这是一个带有边框、内边距和外边距的盒子。</div>

解释： 这个 div 元素的内容区域周围有 2px 宽的黑色实线边框，内部还有 20px 的内边距，外部还有 30px 的外边距。

5. 盒子模型的总宽度与高度

盒子模型的总宽度与高度包括内容区域、内边距、边框和外边距。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}
</style>

<div>这是一个盒子模型。</div>

解释：

总宽度 = 内容宽度 (200px) + 左右内边距 (20px * 2) + 左右边框 (2px * 2) + 左右外边距 (30px * 2) = 200 + 40 + 4 + 60 = 304px
总高度 = 内容高度 (100px) + 上下内边距 (20px * 2) + 上下边框 (2px * 2) + 上下外边距 (30px * 2) = 100 + 40 + 4 + 60 = 204px

6. 盒子模型的计算 (box-sizing)

默认情况下，width 和 height 属性只包括内容区域。可以通过 box-sizing 属性改变这种行为。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
    box-sizing: border-box;
}
</style>

<div>这是一个盒子模型。</div>

解释： 使用 box-sizing: border-box; 后，width 和 height 属性将包括内容区域、内边距和边框，但不包括外边距。

7. 内边距和边框的单边设置

可以分别设置内边距和边框的四个边。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
    border-top: 1px solid red;
    border-right: 2px solid green;
    border-bottom: 3px solid blue;
    border-left: 4px solid yellow;
}
</style>

<div>这是一个带有个性化内边距和边框的盒子。</div>

解释： 内边距和边框的四个边分别设置了不同的值。

8. 外边距的重叠 (Margin Collapse)

在垂直方向上，两个相邻元素的外边距会发生重叠，取较大的一个。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin-top: 20px;
    margin-bottom: 30px;
}
</style>

<div>第一个盒子。</div>
<div>第二个盒子。</div>

解释： 两个 div 元素之间的垂直外边距为 30px（取较大的一个），而不是 20px + 30px = 50px。

这些盒子模型的属性可以根据具体需求灵活使用，帮助你更好地控制网页布局。

5-针对CSS中的布局给出具体的知识案例

CSS 布局详解及案例

CSS 布局是网页设计的核心，通过各种布局技术，可以实现不同的页面结构和视觉效果。以下是一些常见的 CSS 布局技术的具体知识案例。

1. 普通流布局 (Normal Flow Layout)

普通流布局是默认的元素排列方式，包括块级元素和行内元素。

案例：

<style>
div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
}
</style>

<div>第一个盒子</div>
<div>第二个盒子</div>

解释： 默认情况下，块级元素（如 div）会在垂直方向上依次排列。

2. 浮动布局 (Float Layout)

浮动布局通过 float 属性实现，常用于图文混排。

案例：

<style>
img {
    float: left;
    margin-right: 10px;
}
</style>

<div>
    <img src="image.jpg" alt="图片">
    这是一段包含图片的文字，图片位于左侧浮动。
</div>

解释： 图片会浮动到左侧，文字会环绕在右侧。

3. 定位布局 (Position Layout)

定位布局通过 position 属性实现，可以精确控制元素的位置。

案例：

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: absolute;
    top: 50px;
    left: 100px;
}
</style>

<div class="box">绝对定位的盒子</div>

解释： 盒子会相对于最近的已定位祖先元素（如果没有，则相对于初始包含块）偏移 50px 向下、100px 向右。

4. 弹性盒子布局 (Flexbox Layout)

弹性盒子布局通过 display: flex 实现，适用于一维布局（水平或垂直）。

案例：

<style>
.container {
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
    padding: 10px;
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 5px;
}
</style>

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

解释： 容器中的子元素会水平排列，并在容器中均匀分布。

5. 网格布局 (Grid Layout)

网格布局通过 display: grid 实现，适用于二维布局。

案例：

<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item">盒子1</div>
    <div class="item">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释： 容器会创建一个 3 列 2 行的网格布局，子元素会依次填充网格单元。

6. 多列布局 (Multi-column Layout)

多列布局通过 column-count 或 column-width 属性实现，适用于内容分栏显示。

案例：

<style>
.container {
    column-count: 3;
    column-gap: 20px;
    background-color: lightgray;
    padding: 20px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    margin-bottom: 20px;
}
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
    <div class="item">内容4</div>
    <div class="item">内容5</div>
    <div class="item">内容6</div>
</div>

解释： 容器中的内容会被分成 3 列显示，每列之间有 20px 的间隔。

7. 响应式布局 (Responsive Layout)

响应式布局通过媒体查询（Media Queries）实现，使网页在不同设备上具有良好的显示效果。

案例：

<style>
.container {
    display: flex;
    flex-wrap: wrap;
    background-color: lightgray;
    padding: 10px;
}

.item {
    width: 100%;
    height: 100px;
    background-color: lightblue;
    margin: 5px;
}

@media (min-width: 600px) {
    .item {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .item {
        width: 33.33%;
    }
}
</style>

<div class="container">
    <div class="item">盒子1</div>
    <div class="item">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释： 在不同的屏幕宽度下，子元素的宽度会根据媒体查询的设置自动调整。手机上每行显示 1 个盒子，平板电脑上每行显示 2 个盒子，桌面设备上每行显示 3 个盒子。

这些布局技术可以根据具体需求灵活使用，帮助你实现丰富多样的页面结构和视觉效果。

6-针对CSS中的网格布局给出具体的知识案例

CSS 网格布局详解及案例

CSS 网格布局（Grid Layout）是一种强大的二维布局系统，能够灵活地控制元素在行和列中的位置。以下是一些具体的知识案例。

1. 基本网格布局

案例：

<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列，每列等宽 */
    grid-template-rows: 100px 100px; /* 2行，每行100px高 */
    gap: 10px; /* 行和列之间的间距 */
    background-color: lightgray;
    padding: 10px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item">盒子1</div>
    <div class="item">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释：

display: grid; 将 .container 设置为网格容器。
grid-template-columns: 1fr 1fr 1fr; 创建三列，每列等宽。
grid-template-rows: 100px 100px; 创建两行，每行高 100px。
gap: 10px; 设置行和列之间的间距。

2. 网格区域命名

案例：

<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-template-areas: 
        "header header header"
        "sidebar content content";
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.item1 { grid-area: header; }
.item2 { grid-area: sidebar; }
.item3 { grid-area: content; }

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item item1">Header</div>
    <div class="item item2">Sidebar</div>
    <div class="item item3">Content</div>
</div>

解释：

grid-template-areas 定义了一个网格区域布局。
.item1 { grid-area: header; } 将第一个子元素放置在命名为 header 的区域。
.item2 { grid-area: sidebar; } 将第二个子元素放置在命名为 sidebar 的区域。
.item3 { grid-area: content; } 将第三个子元素放置在命名为 content 的区域。

3. 自动填充和自动适应

案例：

<style>
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item">盒子1</div>
    <div class="item">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释：

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 创建尽可能多的列，每列最小宽度为 200px，最大宽度为 1fr。
auto-fill 自动填充尽可能多的列，minmax(200px, 1fr) 定义每列的最小和最大宽度。

4. 网格元素的放置

案例：

<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.item1 {
    grid-column: 1 / 3; /* 从第1列到第3列 */
    grid-row: 1 / 2;   /* 从第1行到第2行 */
}

.item2 {
    grid-column: 3 / 4; /* 从第3列到第4列 */
    grid-row: 1 / 3;    /* 从第1行到第3行 */
}

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item item1">盒子1</div>
    <div class="item item2">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释：

.item1 { grid-column: 1 / 3; grid-row: 1 / 2; } 将第一个子元素放置在第1列到第3列，第1行。
.item2 { grid-column: 3 / 4; grid-row: 1 / 3; } 将第二个子元素放置在第3列到第4列，第1行到第3行。

5. 响应式网格布局

案例：

<style>
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>

<div class="container">
    <div class="item">盒子1</div>
    <div class="item">盒子2</div>
    <div class="item">盒子3</div>
    <div class="item">盒子4</div>
    <div class="item">盒子5</div>
    <div class="item">盒子6</div>
</div>

解释：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 创建尽可能多的列，每列最小宽度为 200px，最大宽度为 1fr。
auto-fit 类似于 auto-fill，但在容器宽度不足以容纳所有列时，会自动调整列的宽度以适应容器。

这些案例展示了 CSS 网格布局的各种应用场景，帮助你更好地理解和使用这一强大的布局系统。

6-针对CSS中的定位给出具体的知识案例

CSS 定位详解及案例

CSS 定位（Positioning）是指如何控制 HTML 元素在页面中的位置。CSS 提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。以下是具体的知识案例。

1. 静态定位（Static Positioning）

案例：

<style>
.container {
    width: 500px;
    height: 300px;
    border: 2px solid black;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: static; /* 默认值 */
}
</style>

<div class="container">
    <div class="box">静态定位</div>
</div>

解释：

position: static; 是默认值，元素按照正常的文档流进行布局。

2. 相对定位（Relative Positioning）

案例：

<style>
.container {
    width: 500px;
    height: 300px;
    border: 2px solid black;
    position: relative;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px; /* 向下偏移50px */
    left: 50px; /* 向右偏移50px */
}
</style>

<div class="container">
    <div class="box">相对定位</div>
</div>

解释：

position: relative; 元素相对于其正常位置进行定位。
top: 50px; 向下偏移 50px，left: 50px; 向右偏移 50px。

3. 绝对定位（Absolute Positioning）

案例：

<style>
.container {
    width: 500px;
    height: 300px;
    border: 2px solid black;
    position: relative;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: absolute;
    top: 50px; /* 相对于容器顶部偏移50px */
    left: 50px; /* 相对于容器左侧偏移50px */
}
</style>

<div class="container">
    <div class="box">绝对定位</div>
</div>

解释：

position: absolute; 元素相对于最近的已定位祖先元素（非 static 定位）进行定位。
top: 50px; 相对于容器顶部偏移 50px，left: 50px; 相对于容器左侧偏移 50px。

4. 固定定位（Fixed Positioning）

案例：

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: fixed;
    top: 50px; /* 相对于视口顶部偏移50px */
    right: 50px; /* 相对于视口右侧偏移50px */
}
</style>

<div class="box">固定定位</div>

解释：

position: fixed; 元素相对于视口进行定位，即使页面滚动，元素位置也不会改变。
top: 50px; 相对于视口顶部偏移 50px，right: 50px; 相对于视口右侧偏移 50px。

5. 粘性定位（Sticky Positioning）

案例：

<style>
.container {
    width: 100%;
    height: 2000px;
    border: 2px solid black;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: sticky;
    top: 50px; /* 相对于视口顶部偏移50px */
    left: 50px; /* 相对于容器左侧偏移50px */
}
</style>

<div class="container">
    <div class="box">粘性定位</div>
</div>

解释：

position: sticky; 元素在滚动到特定位置之前是相对定位的，滚动到该位置后变为固定定位。
top: 50px; 当元素滚动到距离视口顶部 50px 时，它会“粘”在那个位置。
left: 50px; 相对于容器左侧偏移 50px。

6. 混合定位案例

案例：

<style>
.container {
    width: 500px;
    height: 300px;
    border: 2px solid black;
    position: relative;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: absolute;
    top: 0;
    left: 0;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    position: absolute;
    top: 50px;
    left: 50px;
}

.box3 {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    position: absolute;
    top: 100px;
    left: 100px;
}
</style>

<div class="container">
    <div class="box1">绝对定位1</div>
    <div class="box2">绝对定位2</div>
    <div class="box3">绝对定位3</div>
</div>

7-grid针对多个图片进行排版

为了实现根据图片数量动态调整列数的效果，可以使用CSS Grid布局。我们可以通过JavaScript来动态调整列数，并在CSS中定义不同数量的列布局。

基础要求图片大小250*250,padding=10,gap=10，然后1张图片1列展示，两张图片2列展示，其它都是3列展示

以下是一个示例代码：

HTML

<div class="grid-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <!-- 更多图片 -->
</div>

CSS

/* 基础样式 */
.grid-container {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.grid-container img {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

/* 不同数量的列样式 */
.grid-container.one-column {
    grid-template-columns: repeat(1, 1fr);
}

.grid-container.two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.grid-container.three-columns {
    grid-template-columns: repeat(3, 1fr);
}

JavaScript

// 获取图片数量并设置相应的类
function setGridColumns() {
    const gridContainer = document.querySelector('.grid-container');
    const images = gridContainer.querySelectorAll('img');
    const imageCount = images.length;

    // 移除所有列样式类
    gridContainer.classList.remove('one-column', 'two-columns', 'three-columns');

    // 根据图片数量添加相应的列样式类
    if (imageCount === 1) {
        gridContainer.classList.add('one-column');
    } else if (imageCount === 2) {
        gridContainer.classList.add('two-columns');
    } else {
        gridContainer.classList.add('three-columns');
    }
}

// 页面加载时设置列样式
window.addEventListener('load', setGridColumns);

解释

HTML: 创建一个包含图片的容器。
CSS:
- .grid-container 使用 display: grid; 布局，并设置 gap 和 padding。
- .grid-container img 设置图片大小为 250x250，并确保图片覆盖整个区域。
- 针对不同数量的图片，定义不同的列布局类（.one-column, .two-columns, .three-columns）。
JavaScript:
- setGridColumns 函数根据图片数量动态调整列布局。
- 页面加载时调用 setGridColumns 函数，确保布局正确。

这样，当页面加载时，JavaScript 会根据图片数量自动调整列布局，从而实现根据图片数量动态排版的效果。

8-grid针对多个图片进行排版-VUE版本

参考视频：https://www.bilibili.com/video/BV1Em421g7LN

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,126评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,254评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,445评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,185评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,178评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,970评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,276评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,927评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,400评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,883评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,997评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,646评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,213评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,204评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,423评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,423评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,722评论 2赞 345

2024-11-21CSS样式整理

2024-11-21CSS样式整理

1-针对CSS中的 选择器 给出具体的知识案例

CSS 选择器详解及案例

1. 元素选择器

2. 类选择器

3. ID 选择器

4. 属性选择器

5. 伪类选择器

6. 伪元素选择器

7. 组合选择器

8. 子选择器

9. 相邻兄弟选择器

10. 通用选择器

2-针对CSS中的 颜色 给出具体的知识案例

CSS 颜色详解及案例

1. 颜色名称

2. 十六进制颜色值 (Hexadecimal)

3. 简写的十六进制颜色值

4. RGB 颜色值

5. RGBA 颜色值

6. HSL 颜色值

7. HSLA 颜色值

8. 背景颜色

9. 边框颜色

10. 渐变背景

3-针对CSS中的 文本 给出具体的知识案例

CSS 文本样式详解及案例

1. 字体 (Font Family)

2. 字体大小 (Font Size)

3. 字体粗细 (Font Weight)

4. 字体样式 (Font Style)

5. 文本颜色 (Color)

6. 文本对齐 (Text Align)

7. 文本装饰 (Text Decoration)

8. 文本缩进 (Text Indent)

9. 行高 (Line Height)

10. 字母间距 (Letter Spacing)

11. 文本转换 (Text Transform)

12. 文本阴影 (Text Shadow)

4-针对CSS中的 盒子模型 给出具体的知识案例

CSS 盒子模型详解及案例

1. 内容区域 (Content Area)

2. 内边距 (Padding)

3. 边框 (Border)

4. 外边距 (Margin)

5. 盒子模型的总宽度与高度

6. 盒子模型的计算 (box-sizing)

7. 内边距和边框的单边设置

8. 外边距的重叠 (Margin Collapse)

5-针对CSS中的 布局 给出具体的知识案例

CSS 布局详解及案例

1. 普通流布局 (Normal Flow Layout)

2. 浮动布局 (Float Layout)

3. 定位布局 (Position Layout)

4. 弹性盒子布局 (Flexbox Layout)

5. 网格布局 (Grid Layout)

6. 多列布局 (Multi-column Layout)

7. 响应式布局 (Responsive Layout)

6-针对CSS中的 网格布局 给出具体的知识案例

CSS 网格布局详解及案例

1. 基本网格布局

2. 网格区域命名

3. 自动填充和自动适应

4. 网格元素的放置

5. 响应式网格布局

6-针对CSS中的 定位 给出具体的知识案例

CSS 定位详解及案例

1. 静态定位（Static Positioning）

2. 相对定位（Relative Positioning）

3. 绝对定位（Absolute Positioning）

4. 固定定位（Fixed Positioning）

5. 粘性定位（Sticky Positioning）

6. 混合定位案例

7-grid针对多个图片进行排版

HTML

CSS

JavaScript

解释

8-grid针对多个图片进行排版-VUE版本

1-针对CSS中的选择器给出具体的知识案例

2-针对CSS中的颜色给出具体的知识案例

3-针对CSS中的文本给出具体的知识案例

4-针对CSS中的盒子模型给出具体的知识案例

5-针对CSS中的布局给出具体的知识案例

6-针对CSS中的网格布局给出具体的知识案例

6-针对CSS中的定位给出具体的知识案例