深入 CSS1 —— 青训营笔记
CSS 是前端开发的基石之一，控制网页的样式和布局。本篇将从 CSS 的定义、选择器特异性、继承、布局及相关技术等方面深入探讨，并通过实践记录和工具使用加深理解。
一、CSS 的定义
CSS（Cascading Style Sheets，层叠样式表）是用来为 HTML 文档添加样式的语言。
其主要功能包括：
- 美化网页：设置颜色、字体、背景等。
- 排版布局：控制元素的位置和排列方式。
- 响应式设计：适配不同设备和屏幕大小。
CSS 的“层叠性”体现在多个规则应用到同一元素时，通过优先级和权重决定最终样式。
二、选择器的特异性
选择器的特异性（Specificity）决定了当多个样式冲突时，哪些规则生效。特异性通过权重计算：
- 内联样式 style：权重最高，特异性值为 1000。
- ID 选择器：特异性值为 100。
- 类、伪类选择器：特异性值为 10。
- 元素、伪元素选择器：特异性值为 1
实践记录
<style>
p { color: blue; } /* 特异性值为 1 */
.highlight { color: green; } /* 特异性值为 10 */
#important { color: red; } /* 特异性值为 100 */
</style>
<p class="highlight" id="important">Hello，World</p>
最终文字颜色为红色，因为 ID 选择器优先级最高。
输出
三、CSS 的继承
继承是 CSS 的重要特性，某些属性可以从父元素传递到子元素。
1. 默认继承属性
- 可继承属性：如 color、font、visibility 等。
- 不可继承属性：如 margin、border、padding 等。
2. 显式继承
使用 inherit 强制子元素继承父元素的样式。
示例：显式继承
<style>
div { color: blue; }
p { color: inherit; } /* 强制继承父元素颜色 */
</style>
<div>
<p>这段文字会继承蓝色。</p>
</div>
输出
3. 初始值
使用 initial 恢复属性的初始值。
<style>
p { color: red; }
p.reset { color: initial; } /* 恢复为浏览器默认值 */
</style>
<p>红色文字</p>
<p class="reset">黑色文字</p>
输出
四、布局是什么？
布局是网页中元素的排列方式，包括：
- 普通流：元素按文档顺序从上到下排列。
- 浮动布局：通过 float 属性实现左右对齐。
- 弹性布局（Flexbox） ：在一维空间内排列元素。
- 网格布局（Grid） ：在二维空间内设计布局。
五、布局相关技术
1. margin
设置元素外部的间距，控制与周围元素的距离。
-
指定方向：margin-top、margin-right、margin-bottom、margin-left。
-
取值：
- 固定值（如 10px）。
- 百分比（如 10%）。
- auto：由剩余空间计算得出，用于居中对齐。
实践：水平居中对齐
<style>
.box {
width: 200px;
margin: 0 auto; /* 自动计算左右间距 */
background: #f5f5f5;
}
</style>
<div class="box">居中内容</div>
输出
2. border
控制元素的边框样式。
- 三种属性：border-width（宽度）、border-style（样式，如 solid、dashed）、border-color（颜色）。
- 四个方向：border-top、border-right、border-bottom、border-left。
3. padding
设置元素内部内容与边框之间的距离。
- 与 margin 类似，支持四个方向和固定值、百分比等取值。
4. width 和 height
定义元素的宽度和高度。
-
取值：
- 固定值（如 200px）。
- 百分比（相对于父容器）。
- auto：由内容大小计算得出。
实践：宽高计算
<style>
.container {
width: 50%; /* 父容器的 50% */
height: auto; /* 高度由内容决定 */
background-color: #e0f7fa;
}
</style>
<div class="container">自适应高度</div>
输出
六、颜色
颜色可以使用以下方式定义：
- 关键字：如 red,blue。
- 十六进制：如 #ff0000。
- RGB 和 RGBA：如 rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)。
七、overflow
overflow 控制内容溢出时的显示方式：
-
值：
- visible：默认值，内容溢出可见。
- hidden：隐藏溢出的部分。
- scroll：添加滚动条。
- auto：根据需要自动显示滚动条。
实践：滚动条效果
<style>
.scroll-box {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid #ddd;
}
</style>
<div class="scroll-box">
<p>内容较多时会显示滚动条。</p>
<p>这是第二段内容。</p>
</div>
输出
总练习
工具使用
VScode，fycEOKtJ——码上掘金
通过对 CSS 的深入学习和实践，可以更灵活地控制网页的外观和布局，为用户提供更好的体验。
