编辑“︁CSS基础”︁

= CSS基础 =

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档样式的语言，它定义了网页元素的外观和布局。CSS与HTML和JavaScript并称为前端开发的三大核心技术。通过CSS，开发者可以控制字体、颜色、间距、布局等视觉表现，实现内容与样式的分离。

== 基本语法 ==
CSS规则由'''选择器'''和'''声明块'''组成。声明块包含一个或多个'''属性-值对'''，用花括号包裹。语法结构如下：

<syntaxhighlight lang="css">
选择器 {
    属性: 值;
    属性: 值;
}
</syntaxhighlight>

'''示例：'''  
<syntaxhighlight lang="css">
/* 将所有段落文字设为蓝色 */
p {
    color: blue;
    font-size: 16px;
}
</syntaxhighlight>

== 选择器类型 ==
CSS提供多种选择器来定位HTML元素：

=== 基础选择器 ===
* '''元素选择器'''：通过标签名选择（如 <code>p</code>、<code>div</code>）
* '''类选择器'''：通过class属性选择（如 <code>.header</code>）
* '''ID选择器'''：通过id属性选择（如 <code>#main</code>）
* '''通配符选择器'''：匹配所有元素（<code>*</code>）

'''示例：'''  
<syntaxhighlight lang="css">
/* 元素选择器 */
h1 { color: red; }

/* 类选择器 */
.error { background: yellow; }

/* ID选择器 */
#sidebar { width: 300px; }
</syntaxhighlight>

=== 组合选择器 ===
* '''后代选择器'''（空格）：<code>div p</code>  
* '''子选择器'''（<code>></code>）：<code>ul > li</code>  
* '''相邻兄弟选择器'''（<code>+</code>）：<code>h2 + p</code>  
* '''通用兄弟选择器'''（<code>~</code>）：<code>h2 ~ p</code>  

'''示例：'''  
<syntaxhighlight lang="css">
/* 选择div内的所有p元素 */
div p { margin: 10px; }

/* 选择直接子元素 */
ul > li { list-style: none; }
</syntaxhighlight>

== 盒模型 ==
CSS盒模型描述元素在页面中的布局方式，包含以下部分：
<mermaid>
graph TD
    A[元素内容] --> B[内边距 padding]
    B --> C[边框 border]
    C --> D[外边距 margin]
</mermaid>

盒模型计算公式：  
<math>
总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
</math>

'''示例：'''  
<syntaxhighlight lang="css">
.box {
    width: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}
/* 总宽度 = 100 + 20*2 + 5*2 + 10*2 = 170px */
</syntaxhighlight>

== 布局技术 ==

=== Flexbox ===
弹性布局模型，适合一维布局：

<syntaxhighlight lang="css">
.container {
    display: flex;
    justify-content: center; /* 水平对齐 */
    align-items: center;    /* 垂直对齐 */
}
</syntaxhighlight>

=== Grid ===
网格布局，适合二维布局：

<syntaxhighlight lang="css">
.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 两列，比例1:2 */
    gap: 10px; /* 间距 */
}
</syntaxhighlight>

== 响应式设计 ==
使用媒体查询（Media Queries）适配不同设备：

<syntaxhighlight lang="css">
/* 当屏幕宽度小于600px时应用此样式 */
@media (max-width: 600px) {
    .sidebar {
        display: none;
    }
}
</syntaxhighlight>

== 实际案例 ==

'''案例1：导航栏布局'''  
<syntaxhighlight lang="css">
.nav {
    display: flex;
    background: #333;
}
.nav a {
    color: white;
    padding: 15px;
    text-decoration: none;
}
.nav a:hover {
    background: #555;
}
</syntaxhighlight>

'''案例2：卡片组件'''  
<syntaxhighlight lang="css">
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}
</syntaxhighlight>

== 高级特性 ==
* '''CSS变量'''：定义可复用的值  
<syntaxhighlight lang="css">
:root {
    --primary-color: #4285f4;
}
.button {
    background: var(--primary-color);
}
</syntaxhighlight>

* '''动画'''：使用<code>@keyframes</code>  
<syntaxhighlight lang="css">
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 1s;
}
</syntaxhighlight>

== 最佳实践 ==
1. 使用外部样式表（而非内联样式）
2. 遵循BEM命名规范（如<code>.block__element--modifier</code>）
3. 优先使用Flexbox/Grid而非浮动布局
4. 使用CSS预处理器（如Sass/Less）提升可维护性

== 常见问题 ==
'''Q：CSS优先级如何计算？'''  
A：优先级由选择器特异性决定，计算规则为：  
<math>
特异性 = (内联样式) \times 1000 + (ID选择器) \times 100 + (类/伪类) \times 10 + (元素) \times 1
</math>

'''Q：如何垂直居中元素？'''  
A：现代方案（Flexbox/Grid）：  
<syntaxhighlight lang="css">
.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}
</syntaxhighlight>

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端基础]]