2025.4.15 CSS与CSS盒子模型学习笔记

枣树一

于 2025-04-21 10:15:53 发布

阅读量909

点赞数 26

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/2503_90960068/article/details/147383107

版权

一、CSS概述

CSS（Cascading Style Sheets）：层叠样式表，用于控制网页的外观和格式。它通过将样式与HTML结构分离，提高了网页的可维护性和可扩展性。
CSS的作用：
- 设置字体、颜色、间距等视觉效果。
- 控制布局，如页面的排版和元素的定位。
- 提升用户体验，通过动画和交互效果增强页面的动态性。
CSS的引入方式：
- 内联样式：直接在HTML标签中使用style属性。例如：<p style="color: red; font-size: 16px;">文本</p>。这种方式优先级最高，但不推荐大量使用，因为它会破坏HTML的语义化。
- 内部样式表：在HTML文档的<head>部分使用<style>标签定义。例如：
```
<style>
    p {
        color: blue;
        font-size: 14px;
    }
</style>
```
  这种方式适用于单个页面的样式定义。
- 外部样式表：将样式写在一个单独的.css文件中，然后通过<link>标签引入HTML文档。例如：
```
<link rel="stylesheet" href="styles.css">
```
  这是推荐的方式，便于维护和复用样式。

二、CSS选择器

基本选择器：
- 标签选择器：通过HTML标签名选择元素。例如：p { color: red; } 会选择所有<p>标签。
- 类选择器：通过class属性选择元素。例如：.my-class { font-size: 20px; } 会选择所有class="my-class"的元素。
- ID选择器：通过id属性选择元素。例如：#my-id { background-color: yellow; } 会选择id="my-id"的元素。ID选择器在页面中必须是唯一的，优先级高于类选择器。
- 通用选择器：*选择所有元素。例如：* { margin: 0; padding: 0; } 用于重置所有元素的默认外边距和内边距。
组合选择器：
- 后代选择器：通过空格分隔选择器，选择后代元素。例如：div p 会选择<div>标签内的所有<p>标签。
- 子代选择器：通过>分隔选择器，选择直接子元素。例如：div > p 会选择<div>标签内的直接子代<p>标签。
- 相邻兄弟选择器：通过+分隔选择器，选择紧邻的兄弟元素。例如：h1 + p 会选择紧接在<h1>标签之后的<p>标签。
- 通用兄弟选择器：通过~分隔选择器，选择后续的所有兄弟元素。例如：h1 ~ p 会选择<h1>标签之后的所有<p>标签。
伪类选择器：
- 链接伪类：a:hover、a:active、a:visited 等，用于定义链接在不同状态下的样式。
- 结构伪类：nth-child()、first-child、last-child 等，用于选择特定位置的元素。例如：p:nth-child(2) 会选择每个父元素中的第二个<p>标签。
- 状态伪类：input:focus、button:disabled 等，用于定义元素在特定状态下的样式。

三、CSS盒子模型

定义：CSS盒子模型是网页布局的基础，每个HTML元素都可以看作一个盒子，它由内容区、内边距、边框和外边距组成。
组成部分：
- 内容区（Content）：盒子的核心部分，用于容纳文本、图片等内容。通过width和height属性定义其大小。
- 内边距（Padding）：内容区与边框之间的空间。可以通过padding属性设置，包括padding-top、padding-right、padding-bottom、padding-left。例如：padding: 10px 20px; 表示上下内边距为10px，左右内边距为20px。
- 边框（Border）：盒子的边界，可以通过border属性设置边框的样式、宽度和颜色。例如：border: 2px solid red; 表示边框宽度为2px，样式为实线，颜色为红色。
- 外边距（Margin）：盒子与其他盒子之间的空间。可以通过margin属性设置，包括margin-top、margin-right、margin-bottom、margin-left。例如：margin: 15px 0; 表示上下外边距为15px，左右外边距为0。
盒子模型的计算公式：
- 宽度：总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 高度：总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
盒模型的类型：
- 标准盒模型（W3C盒模型）：默认情况下，CSS使用标准盒模型。在这种模型中，width和height属性仅定义内容区的大小，不包括内边距、边框和外边距。
- IE盒模型（怪异盒模型）：在IE浏览器的怪异模式下，width和height属性定义的是整个盒子的大小，包括内容区、内边距和边框，但不包括外边距。
- 切换盒模型：可以通过box-sizing属性切换盒模型。box-sizing: content-box;（默认值）表示使用标准盒模型；box-sizing: border-box;表示使用IE盒模型，此时width和height包括内容区、内边距和边框，但不包括外边距。使用border-box可以更方便地控制盒子的总大小。

四、CSS布局与盒子模型的应用

块级元素与行内元素：
- 块级元素：如<div>、<p>、<h1>等，默认独占一行，可以通过width和height设置大小。块级元素可以设置margin和padding的上下值。
- 行内元素：如<span>、<a>、<img>等，默认不会独占一行，多个行内元素可以排列在同一行。行内元素不能设置width和height，也不能设置上下margin和padding，但可以设置左右margin和padding。
- 行内块元素：通过display: inline-block;将元素设置为行内块元素，它结合了块级元素和行内元素的特点，可以设置width、height、margin和padding，但不会独占一行。
布局技巧：
- 浮动布局：通过float属性使元素脱离文档流，实现并排布局。例如：float: left;或float: right;。浮动布局可能会导致父元素高度塌陷，可以通过clear: both;清除浮动。
- 弹性布局（Flexbox）：通过display: flex;或display: inline-flex;创建弹性容器，子元素会自动调整大小以适应容器。例如：
```
.container {
    display: flex;
    justify-content: space-between; /* 水平排列 */
    align-items: center; /* 垂直排列 */
}
```
- 网格布局（Grid）：通过display: grid;创建网格容器，可以定义行和列的布局。例如：
```
.grid-container {
    display: grid;
    grid-template-columns: 100px 200px auto; /* 定义三列 */
    grid-template-rows: 50px 100px; /* 定义两行 */
}
```