IT评测·应用市场-qidao123.com技术社区

标题: 2025.4.15 CSS与CSS盒子模型学习笔记 [打印本页]

作者: 光之使者 时间: 7 天前
标题: 2025.4.15 CSS与CSS盒子模型学习笔记
一、CSS概述

CSS（Cascading Style Sheets）：层叠样式表，用于控制网页的外观和格式。它通过将样式与HTML结构分离，提高了网页的可维护性和可扩展性。
CSS的作用：
- 设置字体、颜色、间距等视觉效果。
- 控制布局，如页面的排版和元素的定位。
- 提拔用户体验，通过动画和交互效果增强页面的动态性。
CSS的引入方式：
- 内联样式：直接在HTML标签中使用style属性。例如：<p style="color: red; font-size: 16px;">文本</p>。这种方式优先级最高，但不保举大量使用，因为它会破坏HTML的语义化。
- 内部样式表：在HTML文档的<head>部分使用<style>标签界说。例如：
  1. <style>
  2. p {
  3. color: blue;
  4. font-size: 14px;
  5. }
  6. </style>
  复制代码
  这种方式适用于单个页面的样式界说。
- 外部样式表：将样式写在一个单独的.css文件中，然后通过<link>标签引入HTML文档。例如：
  1. <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;创建弹性容器，子元素会自动调解大小以顺应容器。例如：
  1. .container {
  2. display: flex;
  3. justify-content: space-between; /* 水平排列 */
  4. align-items: center; /* 垂直排列 */
  5. }
  复制代码
- 网格布局（Grid）：通过display: grid;创建网格容器，可以界说行和列的布局。例如：
  1. .grid-container {
  2. display: grid;
  3. grid-template-columns: 100px 200px auto; /* 定义三列 */
  4. grid-template-rows: 50px 100px; /* 定义两行 */
  5. }
  复制代码

五、总结

CSS是网页设计的核心技能之一，通过CSS可以实现丰富的视觉效果和灵活的布局。CSS盒子模型是布局的基础，理解其各个部分的含义和盘算方式对于掌握网页布局至关重要。掌握CSS选择器的使用方法，可以精确地选择页面元素并应用样式。在实际开辟中，合理选择布局方式（如浮动、弹性布局

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)