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) */

---

二、显示模式

分类	特点	常见标签示例
块级元素	独占一行，可设宽高，默认宽度 100%。	div, p, h1-h6, ul, li, header, table, form
行内元素	水平排列，不可设宽高，仅包含内容或行内元素。	span, a, strong, em, img, br, code
行内块元素	水平排列，可设宽高，结合块级与行内特性。	input, button, textarea, select, progress

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>