CSS三大特性、显示模式、背景与书写顺序

目录

一、CSS 三大特性

1. 继承性（Inheritance）

​​​​​1. 自动继承的属性（Inherited Properties）

2. 可显式继承的属性（Can Be Inherited via inherit）

3. 使用建议

2. 层叠性（Cascading）

3. 优先级（Specificity）

二、显示模式

1. 块级元素（Block-level Elements）

2. 行内元素（Inline Elements）

3. 行内块元素（Inline-block Elements）

4. 注意事项

5. 显示模式转换

6. 其他显示模式

三、背景属性

1. 核心属性

2. 简写属性

3. 渐变背景

四、Emmet 语法

1. HTML 缩写

2. CSS 缩写

五、书写顺序

1.推荐书写顺序

2.示例代码

3.书写顺序的重要性

4.常见问题与解决方案

 示例：

一、CSS 三大特性

1. 继承性（Inheritance）

​​​​​​​​​​​​1. 自动继承的属性（Inherited Properties）

子元素会自动继承父元素的以下属性（无需显式声明）：

文本相关

• color：文字颜色

• font-family：字体类型

• font-size：字体大小

• font-weight：字体粗细（如 bold）

• font-style：字体样式（如 italic）

• line-height：行高

• text-align：文本对齐方式（如 left, center）

• text-indent：首行缩进

• text-transform：文本转换（如 uppercase）

• letter-spacing：字符间距

• word-spacing：单词间距

• direction：文字方向（如 rtl）

• white-space：空白处理方式（如 nowrap）

列表相关

• list-style-type：列表项标记类型（如 circle）

• list-style-position：列表项标记位置（如 inside）

可见性

• visibility：元素可见性（如 hidden）

其他

• cursor：鼠标指针样式（如 pointer）

• quotes：引用符号样式

2. 可显式继承的属性（Can Be Inherited via inherit）

以下属性默认不会自动继承，但可以通过 inherit 关键字强制继承：

.child {
  width: inherit; /* 显式继承父元素的宽度 */
}

• 盒模型相关：

  • width、height（需谨慎使用）

  • margin、padding、border

  • box-sizing

• 定位与布局：

  • position（如 absolute）

  • display

  • float、clear

  • z-index

• 背景与边框：

  • background-color、background-image

  • border-radius、border-style

• 其他：

  • opacity

  • overflow

3. 使用建议

1. 利用自动继承：
   文本类样式（如 font-family、color）通常自动继承，可直接在父元素设置。

2. 显式继承场景：
   当需要子元素与父元素保持一致的布局或背景时，使用 inherit：

   .child {
     background-color: inherit; /* 继承父元素背景色 */
   }

3. 重置默认继承：
   若不想继承父元素样式，可手动覆盖：

   .child {
     color: red; /* 覆盖父元素的 color */
   }

4. 注意表单元素：
   部分表单元素（如 <input>、<button>）默认不继承字体相关样式，需手动设置：

   input, button {
     font-family: inherit; /* 强制继承父元素字体 */
   }

2. 层叠性（Cascading）

定义：多个样式源（作者、用户、浏览器默认）按优先级叠加。

• 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
• 不同的属性会叠加：不同的CSS属性都生效

层叠规则：

1. 重要性（!important） > 来源（作者样式 > 用户代理样式） > 优先级（权重） > 书写顺序。
2. 无冲突时合并样式，冲突时按优先级覆盖。

3. 优先级（Specificity）

• 权重计算：

  选择器类型	权重值（a, b, c, d）
  行内样式（style=""）	1, 0, 0, 0
  ID 选择器（#id）	0, 1, 0, 0
  类/伪类/属性选择器	0, 0, 1, 0
  标签/伪元素选择器	0, 0, 0, 1

• 比较规则：从左到右逐级比较，数值大者优先级高。

  #header .nav li.active {}  /* 权重：(0,1,2,1) */
  div#main ul li:hover {}    /* 权重：(0,1,1,3) */

二、显示模式

1. 块级元素（Block-level Elements）

• 特点：

  • 独占一行，默认宽度为父元素的 100%。

  • 可设置宽度、高度、内外边距。

  • 可包含其他块级或行内元素。

  • 默认 display 值为 block、table、list-item 或语义化容器（如 section）。

• 常见标签及解释：

  • 基础容器：

    • <div>：通用容器，无语义。

    • <p>：段落。

    • <pre>：保留文本格式（如代码）。

  • 标题：

    • <h1> 到 <h6>：标题层级。

  • 列表：

    • <ul>, <ol>：无序/有序列表。

    • <li>：列表项。

    • <dl>, <dt>, <dd>：定义列表。

  • 语义化标签（HTML5）：

    • <header>, <footer>：页眉/页脚。

    • <section>, <article>：内容区块/独立文章。

    • <nav>：导航栏。

    • <aside>：侧边内容。

  • 表单与表格：

    • <form>：表单容器。

    • <table>：表格。

    • <tr>, <td>, <th>：表格行、单元格、表头。

  • 其他：

    • <hr>：水平分隔线。

    • <blockquote>：长引用。

    • <figure>, <figcaption>：媒体与说明。

2. 行内元素（Inline Elements）

• 特点：

  • 不换行，按文本流水平排列。

  • 宽高由内容决定，不可直接设置。

  • 只能包含文本或其他行内元素。

  • 默认 display 值为 inline。

• 常见标签及解释：

  • 文本修饰：

    • <span>：通用行内容器。

    • <strong>, <em>：强调文本（粗体/斜体）。

    • <b>, <i>, <u>, <s>：粗体、斜体、下划线、删除线。

    • <sup>, <sub>：上标/下标。

  • 链接与交互：

    • <a>：超链接。

    • <label>：表单标签。

  • 代码与引用：

    • <code>：代码片段。

    • <abbr>：缩写。

    • <cite>, <q>：引用来源/短引用。

  • 特殊符号：

    • <br>：换行符。

  • 替换元素（可设宽高）：

    • <img>：图像（默认 inline，但可设置宽高）。

    • <input type="text">：文本输入框（部分类型为 inline-block）。

3. 行内块元素（Inline-block Elements）

• 特点：

  • 按行内元素排列，但可设置宽高。

  • 默认 display 值为 inline-block。

• 常见标签及解释：

  • 表单控件：

    • <input>：输入框（如 type="text", type="checkbox"）。

    • <button>：按钮。

    • <textarea>：多行文本输入。

    • <select>：下拉选择框。

  • 媒体与进度：

    • <progress>：进度条。

    • <meter>：度量值（如磁盘用量）。

  • 其他：

    • <canvas>：绘图画布（需手动设置 inline-block）。

4. 注意事项

• CSS 覆盖：可通过 display: block/inline/inline-block 改变默认行为。

• 替换元素：如 <img>、<input> 即使为 inline，也可设置宽高（由浏览器处理）。

• HTML5 新增：语义化标签（如 <article>）默认均为块级元素。

5. 显示模式转换

span { 
  display: block;  /* 转为块级元素 */
}
div {
  display: inline;  /* 转为行内元素 */
}

6. 其他显示模式

• display: flex：弹性布局容器。

• display: grid：网格布局容器。

• display: none：隐藏元素（不占空间）。

三、背景属性

1. 核心属性

• background-color：背景颜色（#hex、rgb()、transparent）。

• background-image：背景图片（url("image.jpg")、渐变）。

• background-repeat：平铺方式（repeat、no-repeat、repeat-x）。

• background-position：位置（center、10px 20px）。

• background-size：尺寸（cover、contain、100% 50%）。

• background-attachment：滚动方式（scroll、fixed）。

2. 简写属性

.box {
  background: #f0f0f0 url("bg.png") no-repeat center/cover fixed;
}

3. 渐变背景

.gradient {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

四、Emmet 语法

Emmet 是一种快速生成 HTML/CSS 代码的缩写工具。

1. HTML 缩写

• 元素生成：div → <div></div>。

• 嵌套结构：ul>li*3 →

  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

• 属性与类：a[href="#"]{Link} → <a href="#">Link</a>。

2. CSS 缩写

• 属性简写：m10 → margin: 10px;。

• 多值生成：p10-20 → padding: 10px 20px;。

• 单位处理：w50p → width: 50%;。

五、书写顺序

CSS 书写顺序不仅影响代码的可读性和维护性，还可能影响渲染性能。以下是推荐的 CSS 书写顺序及其背后的逻辑：

1.推荐书写顺序

1. 布局属性
   影响元素位置和大小的属性。

   • display

   • position

   • float

   • clear

   • flex / grid 相关属性

   • width / height

   • margin / padding

   • overflow

2. 盒模型属性
   影响元素内部和外部空间的属性。

   • border

   • box-sizing

   • box-shadow

3. 文本与字体属性
   影响文本样式和字体的属性。

   • font

   • color

   • text-align

   • line-height

   • text-decoration

   • white-space

4. 视觉效果属性
   影响元素视觉效果的属性。

   • background

   • opacity

   • transform

   • transition

   • animation

5. 其他属性
   不属于上述分类的属性。

   • cursor

   • z-index

   • visibility

2.示例代码

.button {
  /* 布局属性 */
  display: inline-block;
  position: relative;
  width: 120px;
  height: 40px;
  margin: 10px;
  padding: 8px 16px;
  overflow: hidden;

  /* 盒模型属性 */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 文本与字体属性 */
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 1.5;

  /* 视觉效果属性 */
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;

  /* 其他属性 */
  cursor: pointer;
  z-index: 10;
}

3.书写顺序的重要性

1. 优化渲染性能

   • 浏览器渲染时，布局属性优先计算，视觉效果属性稍后处理。

   • 按顺序书写可减少浏览器的重绘和回流。

2. 便于团队协作

   • 统一的书写顺序有助于团队成员快速理解代码。

   • 减少代码冲突和重复。

4.常见问题与解决方案

1. 重复属性

   • 问题：同一属性分散在不同位置。

   • 解决：合并相同属性，按顺序排列。

2. 过度嵌套

   • 问题：选择器嵌套过深，影响性能。

   • 解决：减少嵌套，使用 BEM 命名规范。

 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        
        .bg {
            height: 500px;
            background-color: #f3f3f3;
            background-image: url(./bk.png);
            background-position: left bottom;
            background-repeat: no-repeat;
            text-align: right;
        }

        .bg h2 {
            font-size: 36px;
            font-weight: normal;
            color: #333333;
            line-height: 100px;
            margin-right: 20px;
        }

        .bg p {
            font-size: 20px;
        }

        .bg a {
            width: 125px;
            height: 40px;
            background-color: #f751bd;
            text-decoration: none;
            display: inline-block;

            line-height: 40px;
            text-align: center;
            color: #fff;
        }

    </style>
</head>
<body>

    <div class="bg">
        <h2>让创造产生价值</h2>
        <p>我们希望小游戏平台能提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
        <a href="#">我要报名</a>
    </div>


</body>
</html>