css核心知识点

CSS的核心内容主要包括以下几个方面：

    一、 选择器：

    CSS通过选择器来指定样式应用到哪些HTML元素上。例如：

    CSS的选择器种类众多，以下是一些常见的和较高级的选择器的举例说明：
   

**基本选择器：**

    1. **元素（标签）选择器**：

       p {

         clr: red; /* 所有的段落文本颜色为红色 */

       }

    2. **ID选择器**：

       #header {

         backgrund-clr: blue; /* id为header的元素背景色为蓝色 */

       }

    3. **类选择器**：

       .highlight {

         fnt-weight: bld; /* 类名为highlight的元素字体加粗 */

       }

    4. **属性选择器**：

       a[target="_blank"] {

         clr: green; /* 所有目标为_blank的链接颜色为绿色 */

       }

    5. **伪类选择器**：

       a:hver {

         text-decratin: underline; /* 鼠标悬停时链接下划线 */

       }

    **组合选择器：**

    6. **后代选择器**：

       div p {

         fnt-size: 16px; /* div内的所有段落字体大小为16像素 */

       }

    7. **子元素选择器**：

       ul > li {

         list-style-type: nne; /* ul直接子元素li去除列表样式 */

       }

    8. **相邻兄弟选择器**：

       h2 + p {

         margin-tp: 0; /* h2后面紧跟的第一个p元素顶部无间距 */

       }

   

    9. **一般兄弟选择器（CSS3）**：

       p ~ ul {

         margin-tp: 2em; /* 所有跟在p元素之后的ul元素上边距为2em */

       }

    **伪类与伪元素选择器：**

    10. **伪类**：

        a:visited {

          clr: purple; /* 已访问过的链接变为紫色 */

        }

    11. **伪元素**：

        p::first-letter {

          fnt-size: larger; /* 每个段落首字母放大 */

        }

    12. **否定选择器（CSS4）**：

        input:nt([type="submit"]) {

          brder: 1px slid gray; /* 所有非提交类型的input框添加灰色边框 */

        }

二、盒模型：

    所有HTML元素都可以看作是一个“盒子”，具有边框、填充和边界（Margin），以及实际内容区域（Cntent）。例如：

    div {

      width: 300px;

      padding: 10px;

      brder: 2px slid black;

      margin: 20px;

    }

    这段代码定义了一个div元素的宽度、内外间距及边框样式。

    三、 布局方式：

        浮动（Flats）：旧有的布局方式，用来实现元素并排或图文混排。

        .flat-left {

        flat: left;

        width: 50%;

    }

    定位（Psitining）：包括static、relative、abslute、fixed等定位模式，用于精确定位元素在页面上的位置。

    Flexbx（弹性布局）与Grid（网格布局）：现代布局方式，用于更灵活和响应式的布局设计。
   

 **弹性布局（Flexbx）举例：**

    .cntainer {

      display: flex; /* 定义父容器为弹性布局 */

    }

    .item {

      flex: 1; /* 子元素按比例分配空间，均分宽度 */

    }

    /* 或者具体指定子项宽度 */

    .item:nth-child(1) {

      flex-basis: 200px;

    }

    /* 改变主轴对齐方式 */

    .cntainer {

      justify-cntent: space-arund; /* 均匀分布子元素，两侧留有间隔 */

    }

    /* 改变交叉轴对齐方式 */

    .cntainer {

      align-items: center; /* 子元素沿垂直方向居中对齐 */

    }

    **网格布局（Grid）举例：**

    .grid-cntainer {

      display: grid;

      grid-template-clumns: repeat(3, 1fr); /* 创建三列等宽网格 */

      grid-gap: 10px; /* 设置行与列之间的间距 */

    }

    .grid-item {

      backgrund-clr: lightblue;

    }


    /* 明确指定某个项目的位置 */

    .item-a {

      grid-clumn: 1 / 3; /* 占据第1到第3列 */

      grid-rw: 2; /* 在第二行 */

    }

   

四、  属性继承与层叠：

    CSS具有继承特性，子元素可以继承父元素的一些样式属性。

    层叠原则决定了当多个规则应用于同一个元素时，如何决定最终生效的样式。

五、  响应式设计：

    使用媒体查询（Media Queries）实现不同设备和屏幕尺寸下的自适应布局。

    @media screen and (max-width: 600px) {

      bdy {

        backgrund-clr: lightblue;

      }

}

六、 动画与过渡效果：

    CSS3引入了动画 (@keyframes) 和过渡 (transitin) 特性，可以创建丰富的动态效果。 

  **CSS3动画举例：**

    @keyframes fadeIn {

      0% { pacity: 0; }

      100% { pacity: 1; }

    }

    .my-element {

      animatin: fadeIn 2s ease-in-ut infinite; /* 应用名为fadeIn的动画，持续2秒，平滑过渡，无限循环 */

    }

七、  CSS预处理器：

    虽然不是CSS标准部分，但如Sass、Less等预处理器已经成为许多项目中的核心工具，提供变量、嵌套规则、混合宏等高级功能，提高了CSS的可维护性和复用性。

八、 CSS模块化:

**CSS模块化的主要方式包括：**

1. **BEM（Block Element Modifier）命名规范**

   BEM是一种流行的CSS命名约定，通过为块（Block）、元素（Element）和修饰符（Modifier）设置明确的类名规则来实现模块化。例如：

   

   <div class="button button--primary">点击</div>

   

   其中，`.button` 是一个块级模块，`.button--primary` 是这个模块的一个特定修饰状态。

2. **CSS预处理器**

   - **Sass/SCSS** 提供变量、嵌套规则和模块导入等功能，使得CSS具有更强的逻辑性和模块化能力。

     

     // _button.scss

     .button {

       display: inline-block;

       padding: 0.5em 1em;

       

       &--primary {

         background-color: $primary-color;

       }

     }

     // main.scss

     @import 'button';

     

   - **Less** 和 **Stylus** 同样提供了类似的特性，帮助开发者更好地组织CSS代码。

3. **CSS Modules**

   CSS Modules是一种在构建过程中将类名本地化处理的技术，通过编译工具将类名转换为唯一哈希值，确保每个模块的样式只影响其对应组件，避免全局污染。

   

   // App.js (React example)

   import styles from './styles.module.css';

   function App() {

     return (

       <button className={styles.button}>Click me</button>

     );

   }

   // styles.module.css

   .button {

     color: white;

     background-color: blue;

   }

   

   

4. **CSS-in-JS**

   使用JavaScript编写CSS，如styled-components、Emotion等库允许在JS中定义样式，并将它们直接绑定到组件上，从而实现样式与组件的一对一关联，达到模块化的目的。

   

   import styled from 'styled-components';

   const Button = styled.button`

     background-color: ${props => props.primary ? 'blue' : 'grey'};

     color: white;

     padding: 0.5em 1em;

   `;

   function App() {

     return <Button primary>Click me</Button>;

   }

   

九、css沙箱

局部作用域CSS解决方案：

• 在一些现代前端框架或库中，如CSS Modules、CSS-in-JS等技术也可以被视为一种“沙箱”机制，它们通过模块化将CSS样式作用范围限制在特定组件内，避免全局命名冲突

// CSS Modules 示例 (React)
// styles.module.css
.container {
  padding: 1rem;
  background-color: #f0f0f0;
}

// App.js
import React from 'react';
import styles from './styles.module.css';

function App() {
  return (
    <div className={styles.container}>
      这是一个使用CSS Modules的沙箱区域
    </div>
  );
}

Shadow DOM（影子DOM）：

• Shadow DOM 提供了一种真正的CSS隔离机制，在Web Components中实现样式封装。每个Shadow DOM都有自己的样式上下文，外部样式不能影响内部元素，反之亦然

<!-- Shadow DOM 示例 -->
<div id="my-component">
  <template shadowroot="open">
    <style>
      .content {
        background-color: lightblue;
      }
    </style>
    <div class="content">这是 Shadow DOM 中的内容</div>
  </template>
</div>

 十、自定义属性 

定义全局主题颜色、字体大小等，可以在整个项目中引用和更新这些变量值

:root {
    --primary-color: #007bff;
    --font-size-base: 16px;
  }
  
  h1, h2, h3 {
    font-size: var(--font-size-base);
  }
  
  .button {
    background-color: var(--primary-color);
  }

十一、css优化问题

CSS优化是为了提升网页性能、加载速度和可维护性而采取的一些策略和方法。以下是一些常见的CSS优化措施，以及简要的举例说明：

1. **合并与压缩CSS文件**：

   - 合并多个CSS文件为一个或少数几个文件，减少HTTP请求的数量。

   <!-- 不优化 -->

   <link rel="stylesheet" href="styles1.css">

   <link rel="stylesheet" href="styles2.css">

   

   <!-- 优化 -->

   <link rel="stylesheet" href="combined_styles.css">

   

   使用构建工具（如Webpack, Gulp等）可以自动完成这个过程，并且在合并后进行CSS文件压缩以减小文件大小。

2. **使用CSS预处理器**：

   - Sass, Less等CSS预处理器能够帮助编写更简洁、易于维护的代码，并通过变量、嵌套规则、混合宏等功能提高代码复用率。

   // Sass示例

   $primary-color: #06c;

   .button {

     background-color: $primary-color;

     color: white;

     &:hover {

       background-color: darken($primary-color, 10%);

     }

   }

   

3. **选择器优化**：

   - 避免使用过于复杂的选择器，因为它们可能导致渲染性能降低。

   

   /* 不优化 */

   div.container > ul.nav li a:hover {

     color: red;

   }

   /* 优化 */

   .nav-link:hover {

     color: red;

   }

   

   并确保优先级合理，避免不必要的!important声明。

4. **CSS Sprites技术**：

   - 将多个小图标合并到一张图片中，然后利用CSS背景定位来显示单个图标，减少HTTP请求次数。

   

   .icon-home {

     width: 20px;

     height: 20px;

     background-image: url(sprites.png);

     background-position: 0 0;

   }

   .icon-settings {

     width: 20px;

     height: 20px;

     background-image: url(sprites.png);

     background-position: -20px 0; /* 假设设置图标在sprites.png中的位置 */

   }

   

5. **媒体查询优化**：

   - 根据实际需要精确使用媒体查询，避免不必要的下载和解析。

   

   /* 只针对窄屏幕设备加载额外样式 */

   @media screen and (max-width: 768px) {

     .mobile-only {

       display: block;

     }

   }

   

6. **避免使用@import语句**：

   - @import会阻塞页面渲染，推荐将所有CSS都放在`<link>`标签内或直接写入HTML文档中。

   

   /* 不推荐 */

   @import 'module.css';

   /* 推荐 */

   <link rel="stylesheet" href="module.css">

   

7. **移除冗余和未使用的CSS**：

   - 使用工具（如PurifyCSS, uncss等）清理项目中未被实际引用的CSS规则，减少文件体积。

8. **利用CSS3特性替代JavaScript实现动画效果**：

   - 利用CSS3 transitions和animations取代部分JavaScript动画，提高性能。

9. **响应式设计和流式布局**：

   - 使用百分比、Flexbox、Grid布局等方法创建适应不同屏幕尺寸的设计，减少针对不同设备的重复CSS。

十二、css兼容问题和解决方案

1. **盒模型差异**：
   - 问题：IE6及更低版本使用了与W3C标准不同的盒模型（Quirks Mode），它将边框和内填充计算到元素的总宽度之内。
   - 解决方案：为所有元素设置 `box-sizing: border-box;` 可以让现代浏览器遵循这种模式，或者针对IE6单独处理宽度计算。

2. **浮动与margin加倍**：
   - 问题：在IE6中，当一个元素设置了 `float` 并且在同一方向上设置了 `margin` 时，可能会出现双倍的 `margin` 问题。
   - 解决方案：可以使用 CSS hack 给IE6单独设置 `margin` 值，例如 `_margin: half_value;` 或者给浮动元素添加 `display: inline;` 属性。

3. **浏览器前缀**：
   - 问题：对于CSS3的新属性，如动画、渐变等，各浏览器需要特定的厂商前缀才能识别，如 `-webkit-`、`-moz-`、`-ms-`、`-o-` 等。
   - 解决方案：编写CSS代码时同时包含各个浏览器前缀来确保跨浏览器兼容性。

4. **透明度问题**：
   - 问题：IE8及更早版本不支持 `opacity` 属性。
   - 解决方案：使用滤镜 `filter: alpha(opacity=50);` 对IE进行兼容处理。

5. **图片超链接边框问题**：
   - 问题：在某些浏览器（尤其是旧版IE）中，当图片作为链接时会出现蓝色边框。
   - 解决方案：为图片链接设置 `border: none;` 或 `outline: none;` 来去除默认样式。

6. **CSS选择器兼容性**：
   - 问题：较老的浏览器可能不支持新的CSS3选择器，如 `:before`, `:after`, `:nth-child()` 等。
   - 解决方案：要么避免使用这些高级选择器，要么通过JavaScript或jQuery等库提供后备支持。

7. **布局差异**：
   - 问题：Flexbox和Grid布局在旧版浏览器中不被支持。
   - 解决方案：采用渐进增强策略，先保证基本布局在老旧浏览器中可用，然后通过特性检测等方式，在支持新特性的浏览器中应用高级布局方式。

8. **字体平滑/抗锯齿问题**：
   - 问题：部分浏览器在显示文本时可能存在字体渲染差异。
   - 解决方案：使用 `-webkit-font-smoothing` 和 `-moz-osx-font-smoothing` 控制字体平滑效果。

9. **清除浮动**：
   - 问题：浮动元素可能导致其后的元素布局异常，尤其在旧版IE中。
   - 解决方案：使用经典的 clearfix 技巧，或者使用更为现代的 Flexbox 或 Grid 布局技术。