CSS基础知识03

1.overflow（溢出）

定义

当内容超出其容器的边界时，overflow属性决定如何处理这些内容

属性值：

visible（默认值）：内容不会被剪裁，会超出元素框显示。

hidden：内容会被剪裁，超出部分不可见。

scroll：内容会被剪裁，并显示滚动条，无论是否需要。

auto：如果内容被剪裁，则浏览器会自动显示滚动条。

示例：

css 复制代码

.container {
  width: 200px;
  height: 100px;
  overflow: auto; /* 当内容超出时显示滚动条 */
}

高级使用

多轴溢出

‌多轴溢出‌：处理同时存在的水平和垂直溢出，可以结合overflow-x和overflow-y属性。

css 复制代码

.container {
  overflow-x: auto; /* 水平方向自动溢出滚动 */
  overflow-y: hidden; /* 垂直方向隐藏溢出 */
}

滚动条样式

滚动条样式‌：使用伪元素::-webkit-scrollbar等自定义滚动条的样式（注意，这并非所有浏览器都支持）。 ‌

css 复制代码

/* 自定义滚动条样式（注意：仅部分浏览器支持） */
::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* 滚动条滑块颜色 */
  border-radius: 6px; /* 圆角 */
}

视口单位

视口单位‌：结合视口单位（如vw、vh）实现响应式设计中的溢出处理。

css 复制代码

.responsive-box {
  width: 80vw; /* 使用视口宽度单位 */
  height: 50vh; /* 使用视口高度单位 */
  overflow: auto; /* 处理溢出 */
}

2.transition（过渡）

定义：

transition属性用于指定css属性变化时的持续时间、速度曲线等

语法：

transition：属性持续时间速度曲线;

属性值：

transition-property：指定应用过渡效果的CSS属性，如all、background-color等。

transition-duration：指定过渡效果持续的时间，如0.5s、2s等。

transition-timing-function：指定过渡效果的速度曲线，如linear、ease、ease-in、ease-out等。

transition-delay：指定过渡效果何时开始，如0s、1s等。

示例：

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s, height 1s ease-in-out;
}
.box:hover {
  width: 200px;
  height: 150px;
}

高级使用

过渡事件

监听transitionstart、transitionend等事件，实现过渡过程中的交互逻辑。

javascript 复制代码

document.querySelector('.box').addEventListener('transitionstart', function() {
  console.log('Transition started!');
});

document.querySelector('.box').addEventListener('transitionend', function() {
  console.log('Transition ended!');
});

3.导航条

定义：

导航条通常是网站顶部的水平或垂直菜单，包含链接到网站不同部分的按钮或链接。

创建：

使用HTML（如<ul>和<li>标签）和CSS（如float、display: flex;或display: grid;）来创建。

示例：

less 复制代码

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

css 复制代码

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}
nav ul li {
  margin-right: 20px;
}
nav ul li a {
  text-decoration: none;
  color: black;
}

4.hover（悬停）

定义：

:hover伪类用于定义鼠标悬停在元素上时的样式

示例：

css 复制代码

button:hover {
  background-color: green;
  color: white;
}

高级使用

延时触发

css 复制代码

.delayed-hover {
  transition: color 0.5s ease-in-out 0.3s; /* 延迟 0.3 秒后触发颜色变化 */
}

.delayed-hover:hover {
  color: blue;
}

复杂选择器

css 复制代码

/* 使用 ~ 选择器实现兄弟元素间的 hover 效果 */
.sibling1:hover ~ .sibling2 {
  background-color: yellow;
}

5.z-index

定义：

z-index属性控制元素在页面上的堆叠顺序。

注意：z-index仅对定位元素（如position: relative;、position: absolute;或position: fixed;）有效。

属性值：

数字值：指定元素的堆叠顺序。数字越大，元素越靠上。

auto：默认值，堆叠顺序与父元素相同

示例：

css 复制代码

.box1 {
  position: absolute;
  z-index: 1;
}
.box2 {
  position: absolute;
  z-index: 2; /* 会在box1之上 */
}

6.文本换行

定义：

word-wrap（已废弃，建议使用overflow-wrap）和white-space属性控制文本的换行行为。

属性及其值：

word-wrap/overflow-wrap：break-word 允许单词在必要时拆分换行。

overflow-wrap: break-word;：长单词或URL会被换行。

white-space: nowrap;：禁止文本换行。

white-space: pre-wrap;：保留空白符序列，但是正常地进行换行。

white-space: pre-line;：合并空白符序列，但是保留换行符。

示例：

arduino 复制代码

.text {
  overflow-wrap: break-word; /* 长单词或URL会被换行 */
  white-space: nowrap; /* 禁止文本换行 */
}

高级使用

连字符处理

arduino 复制代码

.hyphenated-text {
  hyphens: auto; /* 自动处理连字符 */
}

7.鼠标样式

定义：

cursor属性设置鼠标悬停在元素上时的鼠标指针样式。

属性值：

default：默认光标。
pointer：小手形状，表示可点击。
text：文本光标。
其他值如move、not-allowed等。

示例：

css 复制代码

.pointer {
  cursor: pointer; /* 手指形状，表示可点击 */
}

高级使用：

自定义光标

arduino 复制代码

.custom-cursor {
  cursor: url('cursor.png'), auto; /* 使用自定义光标图像 */
}

8.固定背景

定义：

background-attachment: fixed;使背景图像在滚动页面时保持固定。

属性值：

scroll：默认值，背景图像随页面滚动。
fixed：背景图像固定不动。
local：背景图像随元素的内容滚动。

示例：

css 复制代码

body {
  background-image: url('background.jpg');
  background-attachment: fixed; /* 背景图像固定 */
}

高级使用多背景

css 复制代码

.multi-background {
  background: url('bg1.png') no-repeat left top, url('bg2.png') no-repeat right bottom;
  background-size: cover, cover; /* 调整背景图像大小 */
}

背景定位

css 复制代码

.fixed-background {
  background-image: url('bg.png');
  background-position: center center; /* 精确定位背景图像 */
  background-attachment: fixed; /* 固定背景图像 */
}

性能优化 ‌：对于大型背景图像，使用 CSS 的 `will-change` 属性或其他技术优化渲染性能，这里不展开具体示例

9.透明度

定义：

opacity属性设置元素的不透明度。

属性值：

0（完全透明）到1（完全不透明）之间的值。

示例：

css 复制代码

.semi-transparent {
  opacity: 0.5; /* 50%的不透明度 */
}

高级使用

渐变透明度

css 复制代码

.gradient-opacity {
  background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
 /* 渐变透明度 */
}

层叠效果

css 复制代码

.stacked-elements {
  position: relative;
}

.stacked-elements .layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba

10.元素隐藏

定义：

使用display: none;或visibility: hidden;来隐藏元素。

属性值：

display：none 隐藏元素且不占据空间。

visibility：hidden 隐藏元素但占据空间。

示例：

css 复制代码

.hidden-display {
  display: none; /* 元素完全隐藏，不占据空间 */
}
.hidden-visibility {
  visibility: hidden; /* 元素隐藏，但占据空间 */
}

高级使用‌： ‌

条件隐藏‌：

结合JavaScript和CSS实现条件性的元素隐藏，如根据用户权限或状态隐藏特定内容。

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件隐藏示例</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>

<div id="protectedContent" class="hidden">
  这是受保护的内容，仅登录用户可见。
</div>

<script>
  // 假设这是一个检查用户登录状态的函数
  function isUserLoggedIn() {
    // 这里应该是实际的登录检查逻辑，例如检查cookie或服务器响应
    // 为了演示，我们直接返回true或false
    return false; // 假设用户未登录
  }

  // 根据登录状态显示或隐藏内容
  if (isUserLoggedIn()) {
    document.getElementById('protectedContent').classList.remove('hidden');
  }
</script>

</body>
</html>

‌平滑过渡‌：

使用CSS过渡或动画实现元素隐藏时的平滑过渡效果。 ‌

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑过渡示例</title>
<style>
  #fadeOut {
    transition: opacity 1s ease-out;
    opacity: 1;
  }
  #fadeOut.hidden {
    opacity: 0;
  }
</style>
</head>
<body>

<div id="fadeOut">
  这个元素将平滑地消失。
</div>
<button onclick="hideElement()">隐藏元素</button>

<script>
  function hideElement() {
    var element = document.getElementById('fadeOut');
    element.classList.add('hidden');
  }
</script>

</body>
</html>

无障碍设计‌：

确保隐藏的元素不会干扰屏幕阅读器等辅助技术的使用。

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无障碍设计示例</title>
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    padding: 0;
    white-space: nowrap;
    aria-hidden: true; /* 明确指示元素是隐藏的 */
  }
</style>
</head>
<body>

<div id="hiddenContent" class="visually-hidden">
  这个内容对视觉用户是隐藏的，但对屏幕阅读器是可见的（如果不使用aria-hidden的话）。但我们使用了aria-hidden，所以它对屏幕阅读器也是隐藏的。
</div>

</body>
</html>

11.滤镜

定义：

filter属性应用各种视觉效果，如模糊、灰度、亮度等

属性值：

blur()：模糊效果。
brightness()：亮度效果。
contrast()：对比度效果。
其他值如grayscale()、sepia()、saturate()等。

示例：

css 复制代码

.blur {
  filter: blur(5px); /* 应用5像素的模糊效果 */
}
.grayscale {
  filter: grayscale(100%); /* 完全灰度 */
}

‌高级使用‌： ‌

组合滤镜‌：

对多个滤镜效果进行组合，实现更复杂的视觉效果。 ‌

css 复制代码

.filtered-image {
  filter: grayscale(100%) blur(5px) brightness(150%);
}

动画滤镜‌：

结合CSS动画实现滤镜效果的动态变化。 ‌

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画滤镜示例</title>
<style>
  @keyframes filterAnimation {
    0% {
      filter: grayscale(0%) brightness(100%);
    }
    50% {
      filter: grayscale(100%) brightness(150%);
    }
    100% {
      filter: grayscale(0%) brightness(100%);
    }
  }
  .animated-filter {
    animation: filterAnimation 2s infinite;
  }
</style>
</head>
<body>

![3149](your-image.jpg)

</body>
</html>

性能考虑‌：

滤镜效果可能会对渲染性能产生影响，特别是在复杂或大量使用滤镜的场景中。

12.背景渐变

定义：

使用background: linear-gradient(...);或background: radial-gradient(...);创建渐变背景

属性值：

linear-gradient(方向,颜色1,颜色2,...)：创建线性渐变。

radial-gradient(位置形状大小,开始颜色,中间颜色...,最后颜色)：创建径向渐变

示例：

css 复制代码

.linear-gradient {
  background: linear-gradient(to right, red, blue); /* 从左到右的线性渐变 */
}
.radial-gradient {
  background: radial-gradient(circle, red, yellow, green); /* 圆形径向渐变 */
}

‌高级使用‌： ‌

复杂渐变‌：

使用多个颜色停止点、渐变方向和形状实现复杂的渐变效果。 ‌

css 复制代码

.complex-gradient {
  background: linear-gradient(45deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%);
}

动画渐变‌：

结合CSS动画实现渐变效果的动态变化，如颜色渐变、形状渐变等。 ‌

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画渐变示例</title>
<style>
  @keyframes gradientAnimation {
    0% {
      background: linear-gradient(45deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%);
    }
    50% {
      background: linear-gradient(45deg, purple 0%, blue 25%, green 50%, yellow 75%, red 100%);
    }
    100% {
      background: linear-gradient(45deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%);
    }
  }
  .animated-gradient {
    animation: gradientAnimation 4s infinite;
    height: 100vh; /* 使渐变背景占据整个视口高度 */
  }
</style>
</head>
<body>

<div class="animated-gradient"></div>

</body>
</html>

跨浏览器支持‌：

确保渐变效果在不同浏览器中的一致性和兼容性。

码字不易，感谢各位友友们的点赞！！！

上述内容若有遗漏或不足之处，恳请各位大佬不吝赐教，指正并帮助美化，以期更加完善。

1.overflow（溢出）

定义

属性值：

示例：

高级使用

多轴溢出

滚动条样式

视口单位

2.transition（过渡）

定义：

语法：

属性值：

示例：

高级使用

过渡事件

3.导航条

定义：

创建：

相关属性：

示例：

4.hover（悬停）

定义：

示例：

高级使用

延时触发

复杂选择器

5.z-index

定义：

属性值：

示例：

6.文本换行

定义：

属性及其值：

示例：

高级使用

连字符处理

7.鼠标样式

定义：

属性值：

示例：

高级使用：

自定义光标

8.固定背景

定义：

属性值：

示例：

高级使用 多背景

背景定位

性能优化 ‌： 对于大型背景图像，使用 CSS 的 will-change 属性或其他技术优化渲染性能，这里不展开具体示例

9.透明度

定义：

属性值：

示例：

高级使用

渐变透明度

层叠效果

10.元素隐藏

定义：

属性值：

示例：

高级使用‌： ‌

条件隐藏‌：

‌平滑过渡‌：

无障碍设计‌：

11.滤镜

定义：

属性值：

示例：

‌高级使用‌： ‌

组合滤镜‌：

动画滤镜‌：

性能考虑‌：

12.背景渐变

定义：

属性值：

示例：

‌高级使用‌： ‌

复杂渐变‌：

动画渐变‌：

高级使用多背景

性能优化 ‌：对于大型背景图像，使用 CSS 的 `will-change` 属性或其他技术优化渲染性能，这里不展开具体示例