<h3>CSS3 新增属性</h3>
<h4>1. 选择器（Selectors）</h4>
<p>CSS3 新增了许多强大的选择器，可以更精确地匹配元素。</p>
<table>
<thead>
<tr>
<th>选择器</th>
<th>示例</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>属性选择器</strong></td>
<td><code>input[type=&quot;text&quot;]</code></td>
<td>匹配具有特定属性的元素</td>
</tr>
<tr>
<td><strong>结构伪类</strong></td>
<td><code>:nth-child(n)</code></td>
<td>匹配第 <code>n</code> 个子元素</td>
</tr>
<tr>
<td></td>
<td><code>:first-of-type</code></td>
<td>匹配同类型的第一个元素</td>
</tr>
<tr>
<td></td>
<td><code>:last-child</code></td>
<td>匹配最后一个子元素</td>
</tr>
<tr>
<td></td>
<td><code>:not(selector)</code></td>
<td>排除匹配的元素</td>
</tr>
<tr>
<td><strong>UI 伪类</strong></td>
<td><code>:checked</code></td>
<td>匹配被选中的表单元素（如复选框）</td>
</tr>
<tr>
<td></td>
<td><code>:disabled</code></td>
<td>匹配禁用的表单元素</td>
</tr>
<tr>
<td></td>
<td><code>:enabled</code></td>
<td>匹配可用的表单元素</td>
</tr>
<tr>
<td><strong>目标伪类</strong></td>
<td><code>:target</code></td>
<td>匹配当前 URL 的锚点目标元素</td>
</tr>
</tbody>
</table>
<h4>2. 盒模型（Box Model）</h4>
<p>CSS3 提供了更灵活的盒模型控制方式。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>box-sizing: border-box</code></td>
<td>使 <code>width</code> 和 <code>height</code> 包含 <code>padding</code> 和 <code>border</code></td>
</tr>
<tr>
<td><code>resize</code></td>
<td>允许用户调整元素大小（<code>both</code>、<code>horizontal</code>、<code>vertical</code>）</td>
</tr>
<tr>
<td><code>outline-offset</code></td>
<td>设置轮廓（<code>outline</code>）与边框的偏移距离</td>
</tr>
</tbody>
</table>
<h4>3. 背景与边框（Background &amp; Border）</h4>
<p>CSS3 增强了背景和边框的样式控制。</p>
<p><strong>背景（Background）</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>background-size</code></td>
<td>控制背景图片大小（<code>cover</code>、<code>contain</code>、<code>100% 100%</code>）</td>
</tr>
<tr>
<td><code>background-clip</code></td>
<td>定义背景绘制区域（<code>border-box</code>、<code>padding-box</code>、<code>content-box</code>）</td>
</tr>
<tr>
<td><code>background-origin</code></td>
<td>定义背景定位的基准区域</td>
</tr>
<tr>
<td><code>background-attachment: local</code></td>
<td>背景随内容滚动</td>
</tr>
<tr>
<td><code>background: url(img1.png), url(img2.png);</code></td>
<td>多背景</td>
</tr>
</tbody>
</table>
<p><strong>边框（Border）</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>border-radius</code></td>
<td>圆角边框（<code>border-radius: 10px;</code>）</td>
</tr>
<tr>
<td><code>box-shadow</code></td>
<td>盒子阴影（<code>box-shadow: 5px 5px 10px #888;</code>）</td>
</tr>
<tr>
<td><code>border-image</code></td>
<td>使用图片作为边框（<code>border-image: url(border.png) 30 round;</code>）</td>
</tr>
</tbody>
</table>
<h4>4. 渐变（Gradients）</h4>
<p>CSS3 支持线性渐变和径向渐变。</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>示例</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>线性渐变</td>
<td><code>background: linear-gradient(to right, red, blue);</code></td>
<td>从左到右渐变</td>
</tr>
<tr>
<td>径向渐变</td>
<td><code>background: radial-gradient(circle, red, yellow);</code></td>
<td>从中心向外渐变</td>
</tr>
<tr>
<td>重复渐变</td>
<td><code>background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);</code></td>
<td>重复渐变</td>
</tr>
</tbody>
</table>
<h4>5. 过渡（Transitions）</h4>
<p>CSS3 过渡允许属性在一定时间内平滑变化。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>transition-property</code></td>
<td>指定过渡的属性（如 <code>width</code>、<code>opacity</code>）</td>
</tr>
<tr>
<td><code>transition-duration</code></td>
<td>过渡持续时间（如 <code>1s</code>）</td>
</tr>
<tr>
<td><code>transition-timing-function</code></td>
<td>过渡速度曲线（<code>ease</code>、<code>linear</code>、<code>cubic-bezier()</code>）</td>
</tr>
<tr>
<td><code>transition-delay</code></td>
<td>过渡延迟时间</td>
</tr>
<tr>
<td><strong>简写</strong></td>
<td><code>transition: width 1s ease 0.5s;</code></td>
</tr>
</tbody>
</table>
<h4>6. 动画（Animations）</h4>
<p>CSS3 动画比过渡更强大，支持关键帧控制。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@keyframes</code></td>
<td>定义动画关键帧</td>
</tr>
<tr>
<td><code>animation-name</code></td>
<td>指定动画名称</td>
</tr>
<tr>
<td><code>animation-duration</code></td>
<td>动画持续时间</td>
</tr>
<tr>
<td><code>animation-timing-function</code></td>
<td>动画速度曲线</td>
</tr>
<tr>
<td><code>animation-delay</code></td>
<td>动画延迟时间</td>
</tr>
<tr>
<td><code>animation-iteration-count</code></td>
<td>动画播放次数（<code>infinite</code> 表示无限循环）</td>
</tr>
<tr>
<td><code>animation-direction</code></td>
<td>动画方向（<code>normal</code>、<code>reverse</code>、<code>alternate</code>）</td>
</tr>
<tr>
<td><code>animation-fill-mode</code></td>
<td>动画结束后保持状态（<code>forwards</code>、<code>backwards</code>）</td>
</tr>
<tr>
<td><strong>简写</strong></td>
<td><code>animation: move 2s ease infinite;</code></td>
</tr>
</tbody>
</table>
<p><strong>示例：</strong></p>
<pre><code class="lang-css language-css css">@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
div {
  animation: move 2s ease infinite;
}</code></pre>
<h4>7. 变形（Transforms）</h4>
<p>CSS3 变形允许对元素进行 2D/3D 变换。</p>
<p><strong>2D 变形：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>transform: translate(x, y)</code></td>
<td>移动元素</td>
</tr>
<tr>
<td><code>transform: rotate(45deg)</code></td>
<td>旋转元素</td>
</tr>
<tr>
<td><code>transform: scale(1.5)</code></td>
<td>缩放元素</td>
</tr>
<tr>
<td><code>transform: skew(30deg)</code></td>
<td>倾斜元素</td>
</tr>
<tr>
<td>组合变换</td>
<td><code>transform: rotate(45deg) scale(1.2);</code></td>
</tr>
</tbody>
</table>
<p><strong>3D 变形：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>transform: translate3d(x, y, z)</code></td>
<td>3D 移动</td>
</tr>
<tr>
<td><code>transform: rotateX(45deg)</code></td>
<td>绕 X 轴旋转</td>
</tr>
<tr>
<td><code>transform: perspective(500px)</code></td>
<td>设置 3D 透视距离</td>
</tr>
</tbody>
</table>
<h4>8. 弹性布局（Flexbox）</h4>
<p>CSS3 Flexbox 提供更灵活的布局方式。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>display: flex</code></td>
<td>启用 Flex 布局</td>
</tr>
<tr>
<td><code>flex-direction</code></td>
<td>主轴方向（<code>row</code>、<code>column</code>）</td>
</tr>
<tr>
<td><code>justify-content</code></td>
<td>主轴对齐方式（<code>center</code>、<code>space-between</code>）</td>
</tr>
<tr>
<td><code>align-items</code></td>
<td>交叉轴对齐方式（<code>center</code>、<code>stretch</code>）</td>
</tr>
<tr>
<td><code>flex-wrap</code></td>
<td>是否换行（<code>wrap</code>、<code>nowrap</code>）</td>
</tr>
<tr>
<td><code>flex-grow</code></td>
<td>定义项目的放大比例</td>
</tr>
<tr>
<td><code>flex-shrink</code></td>
<td>定义项目的缩小比例</td>
</tr>
<tr>
<td><code>flex-basis</code></td>
<td>定义项目的初始大小</td>
</tr>
</tbody>
</table>
<h4>9. 网格布局（Grid）</h4>
<p>CSS3 Grid 提供二维布局系统。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>display: grid</code></td>
<td>启用 Grid 布局</td>
</tr>
<tr>
<td><code>grid-template-columns</code></td>
<td>定义列宽（如 <code>1fr 2fr</code>）</td>
</tr>
<tr>
<td><code>grid-template-rows</code></td>
<td>定义行高</td>
</tr>
<tr>
<td><code>grid-gap</code></td>
<td>定义行列间距</td>
</tr>
<tr>
<td><code>grid-column</code> / <code>grid-row</code></td>
<td>定义项目占据的网格区域</td>
</tr>
</tbody>
</table>
<pre><code class="lang-html language-html html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;style&gt;
        .grid-container {
            display: grid;
            grid-template-columns: 100px 200px auto; /* 三列：固定100px，固定200px，剩余空间 */
            gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
        &lt;div class=&quot;grid-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;3&lt;/div&gt;  
        &lt;div class=&quot;grid-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;6&lt;/div&gt;  
        &lt;div class=&quot;grid-item&quot;&gt;7&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;8&lt;/div&gt;
        &lt;div class=&quot;grid-item&quot;&gt;9&lt;/div&gt;  
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>10. 媒体查询（Media Queries）</h4>
<p>CSS3 媒体查询允许针对不同设备应用不同样式。</p>
<pre><code class="lang-css language-css css">/* 屏幕宽度小于 600px 时生效 */
@media (max-width: 600px) {
  body { background: lightblue; }
}</code></pre>
<h3>BEM 命名规范</h3>
<p><strong>BEM</strong>（Block-Element-Modifier）是一种流行的 CSS 命名方法论，旨在提高代码可读性、可维护性和可复用性。其核心思想是通过<strong>模块化</strong>的方式组织 CSS 类名，避免样式冲突。</p>
<h4>1. BEM 基本结构</h4>
<table>
<thead>
<tr>
<th>BEM 将界面拆分为三个部分：</th>
<th>部分</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>Block</td>
<td>独立的、可复用的组件（如按钮、卡片、导航栏）。</td>
<td><code>.btn</code>、<code>.card</code></td>
</tr>
<tr>
<td>Element</td>
<td>属于 Block 的子元素，不能单独使用（如按钮的图标、卡片的标题）。</td>
<td><code>.btn__icon</code>、<code>.card__title</code></td>
</tr>
<tr>
<td>Modifier</td>
<td>表示 Block 或 Element 的状态或变体（如禁用按钮、大号卡片）。</td>
<td><code>.btn--disabled</code>、<code>.card--large</code></td>
</tr>
</tbody>
</table>
<h4>2. 命名规则</h4>
<h5>(1) Block（块）</h5>
<ul>
<li>使用<strong>单一单词</strong>或<strong>短横线连接</strong>（<code>-</code>）的命名方式。  </li>
<li>代表一个独立的组件，不依赖其他元素。  </li>
</ul>
<pre><code class="lang-css language-css css">.header { ... }       /* 页眉 */
.menu { ... }         /* 菜单 */
.search-box { ... }   /* 搜索框 */</code></pre>
<h5>(2) Element（元素）</h5>
<ul>
<li>格式：<code>Block名称__Element名称</code>（<strong>双下划线 <code>__</code> 连接</strong>）。  </li>
<li>表示属于 Block 的一部分，不能脱离 Block 使用。  </li>
</ul>
<pre><code class="lang-css language-css css">.menu__item { ... }          /* 菜单项 */
.search-box__input { ... }   /* 搜索框的输入框 */
.card__title { ... }         /* 卡片的标题 */</code></pre>
<h5>(3) Modifier（修饰符）</h5>
<ul>
<li>格式：<code>Block--Modifier</code> 或 <code>Block__Element--Modifier</code>（<strong>双短横线 <code>--</code> 连接</strong>）。  </li>
<li>表示 Block 或 Element 的不同状态或样式变体。  </li>
</ul>
<pre><code class="lang-css language-css css">.button--primary { ... }     /* 主要按钮 */
.button--disabled { ... }    /* 禁用按钮 */
.menu__item--active { ... }  /* 当前选中的菜单项 */</code></pre>
<hr />
<h3>3. 实际代码示例</h3>
<h4>HTML 结构</h4>
<pre><code class="lang-html language-html html">&lt;!-- Block: card --&gt;
&lt;div class=&quot;card card--highlight&quot;&gt;
  &lt;!-- Element: card 的子元素 --&gt;
  &lt;h2 class=&quot;card__title&quot;&gt;标题&lt;/h2&gt;
  &lt;p class=&quot;card__content&quot;&gt;内容...&lt;/p&gt;
  &lt;!-- 带 Modifier 的 Element --&gt;
  &lt;button class=&quot;card__button card__button--large&quot;&gt;点击&lt;/button&gt;
&lt;/div&gt;</code></pre>
<h4>CSS 样式</h4>
<pre><code class="lang-css language-css css">/* Block */
.card { 
  border: 1px solid #ccc;
  padding: 16px;
}

/* Modifier: 高亮卡片 */
.card--highlight {
  background: #f5f5f5;
}

/* Element: 卡片标题 */
.card__title {
  font-size: 18px;
  color: #333;
}

/* Element: 卡片按钮 */
.card__button {
  padding: 8px 16px;
}

/* Modifier: 大号按钮 */
.card__button--large {
  padding: 12px 24px;
}</code></pre>

WEB前端-CSS篇