精通CSS：高效网页设计的技巧与窍门

前言

本文章将持续记录在工作/学习过程中针对css的使用技巧以及一些高级记录，便于后期自己查阅学习

伪类应用

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

hover相关

本章节将整理一些与hover相关的操作，便于后续进行使用！

hover控制其他元素

当我们想要实现hover一个节点元素，然后想要让另外一个节点元素也来响应对应的效果时， 👉 可以通过采用公共的父节点元素，也就是让这两个节点在同一个父节点元素下，通过对父元素选择器来实现对应的效果，比如有 👇 的结构：

<style>
  .parent:hover .one,
  .parent:hover .two{
    color: yellow;
  }
</style>
<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
</div>

🌟 这样子，当鼠标悬停在父元素上的时候，所有的子元素的样式都会发生对应的改变！！！！

hover延长元素的尺寸

这里将通过实现对一个搜索条的搜索按钮进行hover，进而控制input输入框的长度，实现当鼠标移动到搜索按钮上时，自动延长输入框的长度的效果， ⚠ 这里 🈶 一个需要注意的是，如果是想要使用css中的兄弟节点来响应的话，比如要确保兄弟节点在触发节点的下一个直接节点，才能够使用 .input-btn:hover + .input的方式来触发！

:nth-child()、:nth-last-child()、:last-child伪类实现闪动的电灯

:nth-child(): 根据元素在父元素的子元素列表中的索引来选择元素，也就是根据父元素内所有兄弟元素的位置来选择子元素；
:nth-last-child(): 与nth-child()基本类似，只不过是从结尾处开始数的；
:last-child: 代表一组兄弟元素中的最后元素

🌠 关于:nth-child()的语法规则如 👇 所示：

👉 以一个参数来描述匹配兄弟元素列表中元素索引的模式，元素索引从1开始

1
2
3

p:nth-child(<nth> of [<complex-selector-list>]?){
  /*这里是相关的css属性*/
}

关于这里的<nth>的值类型，可以 🈶 👇 几种类型：

odd: 表示元素在兄弟元素列表中的位置是奇数，比如第一个、第三个、第五个等等；
event: 表示元素在兄弟元素列表中的位置是偶数，比如第二个、第四个、第六个等等；
An+B: 表示元素在兄弟元素列表中的位置是An+B模式的元素，其中n为正整数或者0，A、B都为整数，且A不为0，A表示整数步长，B表示偏移量，n是从0开始的所有非负整数；

而这个of <selector>语法则表示通过传递一个选择器参数，我们可以选择与该选择器匹配的第n个元素，比如有下面的一个例子：

1	:nth-child(-n + 3 of li.important)

🌠 这里代表着前三个设置了class="important"的列表项！！

👇 是基于:nth-child + :last-child实现的闪动的一串灯:

布局相关

flex中的最后一个元素不按照原来的方式来展示

在日常的项目coding过程中，经常会有这么一个情况：
flex容器的主轴是横向的，然后有那么一个元素，需要居右边展示
对于这种情况，我们可以通过这个margin-left来控制最后一个元素居右边展示！

响应式编码

关于在进行响应式编码的时候，通常比较常见的是先配置小尺寸的媒体查询，再配置大尺寸的媒体查询， 👉 这是因为响应式设计的理念是从移动设备逐渐扩展到大屏幕的，因此，我们首先先确保网站在小屏幕上有良好的用户体验，然后再逐步添加适用于更大屏幕的样式和布局！！

rem布局

rem布局，通常是相对于根文素(一般是<html>元素)的字体大小来计算，是”root em”的缩写，在使用rem单位进行布局时，需要在根元素上设置一个合适的字体大小，然后网页中其他所有的元素的尺寸/间距都相对于这个基础字体大小来计算，这样子可以确保网页的布局在不同的屏幕尺寸和设备上都能够保持一致。 👉 也就是说，一切的一切，都相对于这个基准的尺寸来设定，通过相对于基准来进行布局以及设置大小/间距，可以更精确地管理rem单位的间距和尺寸，确保布局在不通的设备上都能够良好地呈现。
😕 那么，应该如何来控制这个基准的尺寸在不同的屏幕设备上的大小呢？比如一个默认的16px的字体大小可能在小的屏幕上不能够很好地展示，那么可以使用媒体查询来调整根元素的字体大小：

:root{
  font-size: 16px;
}
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
}
@media (max-width: 1200px) {
  :root{
    font-size: 18px;
  }
}

🌟 通过这样子的设置，就可以通过根据不通的屏幕尺寸提供更适合的字体大小，以改善在小屏幕设备上的可读性，同时保持在大屏幕设备上良好的显示效果！ 👉 也就是所有在项目中所使用到的px都替换为rem，然后让这个rem相对于根元素进行布局！！！

如果 🈶 那么一套尺寸相对基准框架，然后基于这套基准框架来进行编码的话，整个项目将会很好管理以及维护，减少重复的工作， 👉 在建立这套基准框架时，可以定义一些基本的间距、尺寸和颜色变量，然后在整个项目中使用这些变量来设置样式，这样酒可以确保样式的一致性，而且需要需要调整样式只需要修改/新增变量的值，就可以自动地应用到整个项目的所有元素上了！
💯 在建立一套完整的基准框架时，可以选择包含 👇 几个方面的内容：

变量：定义一些基本的变量，用于存储颜色、间距、尺寸等样式相关的数值，以便在整个项目中重复使用；
通用样式，定义一些基本的变量，用于设置基本的布局、字体、链接、按钮等等，这些样式可以帮助我们快速地搭建页面结构；
工具类：包括一些使用的工具类，用于处理文本格式、浮动消除、文本截断等常见需求，这些工具类可以简化为样式的编写，并提高代码的可维护性。

👇 是对应的一个简单的实例：

  /* 变量 */
:root {
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-text: #333;
    --color-background: #fff;
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
}
/* 通用样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
}
a {
    color: var(--color-primary);
    text-decoration: none;
}
button {
    padding: var(--spacing-small) var(--spacing-medium);
    font-size: var(--font-size-medium);
    border: none;
    cursor: pointer;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 4px;
}
/* 布局组件 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
/* 工具类 */
.text-center {
    text-align: center;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}