参考HTML代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>example</title> <link rel="stylesheet" href="./index.css"> <script src="./index.js"></script> </head> <body> <div> <h1>1. CSS</h1> <p class="box">CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 </p> <span>测试span</span> </div> <div> <h1>2. CSS</h1> <p>CCSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 </p> </div> <div> <h1>3. CSS</h1> <p>CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 </p> </div> <div> <h1>4. CSS</h1> <p>CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。 它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。 </p> </div> </body> </html>
尺寸操作
设置元素尺寸
通常用在块级元素内，width和height属性是用来设置元素的宽度和高度的。这些属性定义了元素的尺寸，即宽度（水平方向）和高度（垂直方向）的大小。
默认情况下，浏览器会让元素自动适应浏览器的尺寸和屏幕尺寸，但是你可以使用这两个参数去设置它的具体数值。
width:
width属性用于设置元素的宽度。在你的代码中，它被设置为500px，意味着该元素的宽度是500像素。
示例:
.box { width: 500px; /* 设置元素的宽度为500像素 */ }
height:
height属性用于设置元素的高度。在你的代码中，它被设置为280px，意味着该元素的高度是280像素。- 示例:
.box { height: 280px; /* 设置元素的高度为280像素 */ }
这些属性允许你明确地控制元素的大小，以适应你的设计需求。在CSS中，你可以使用不同的单位来指定宽度和高度，例如像素（px）、百分比（%）、em单位、rem单位等。像素是固定的尺寸单位，而百分比、em和rem则是相对的尺寸单位，它们的大小是相对于其他元素或屏幕尺寸而定的。
border：
此属性设置元素的边框样式。
示例
.box { border: 3px dotted grey; }
3px是边框宽度。dotted表示边框是点状的。grey是边框颜色。
- border-radius:
- 此属性设置元素边框的圆角半径，使得边框拐角处呈现为圆角，而非默认的直角。值会是圆角的半径。
- 示例
.box { border-radius: 8px; }
内边距
内边距（Padding）: 内边距是**元素边框与元素内容之间的空间**。它是元素内部的空白区域，用于创建元素内容和元素边框之间的缓冲空间。在CSS中，内边距通过padding属性来设置。
属性：
padding-top: 设置元素的上内边距。
padding-right: 设置元素的右内边距。
padding-bottom: 设置元素的下内边距。
padding-left: 设置元素的左内边距。
padding: 同时设置元素的上、右、下、左内边距。
示例代码：
/* 单独设置内边距 */ .element { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } /* 使用一个值来设置所有的内边距 */ .element { padding: 10px; } /* 使用两个值来设置内边距：第一个值为上下内边距，第二个值为左右内边距 */ .element { padding: 10px 20px; } /* 使用四个值来分别设置上、右、下、左内边距 */ .element { padding: 10px 20px 30px 40px; }
外边距
外边距（Margin）: 外边距是元素边框外侧到相邻元素边框的空间。它是元素周围的空白区域，用于在元素之间创建空间，以保持页面的清晰和组织良好的布局。在CSS中，外边距通过margin属性来设置。
属性：
margin-top: 设置元素的上外边距。
margin-right: 设置元素的右外边距。值设置为auto的时候可以实现元素垂直居中显示。
margin-bottom: 设置元素的下外边距。
margin-left: 设置元素的左外边距。值设置为auto的时候可以实现元素垂直居中显示。
margin: 同时设置元素的上、右、下、左外边距。设置为0 auto可以实现垂直居中显示
示例代码：
/* 单独设置外边距 */ .element { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } /* 使用一个值来设置所有的外边距 */ .element { margin: 10px; } /* 使用两个值来设置外边距：第一个值为上下外边距，第二个值为左右外边距 */ .element { margin: 10px 20px; } /* 使用四个值来分别设置上、右、下、左外边距 */ .element { margin: 10px 20px 30px 40px; }
- 特殊处理：%百分比布局
width: 100%的意义:
当你设置一个元素的width属性为100%时，你是在告诉浏览器将该元素的宽度设置为其父元素的宽度。这意味着，元素会尽可能地扩展以填充其父元素的水平空间。
.element { width: 100%; }
与父容器的宽度计算:
在默认情况下，一个元素的宽度是由其内容区的宽度、内边距、边框和外边距组成的。当你设置width: 100%时，你只是设置了元素内容区的宽度等于父元素的宽度，而不是整个元素（包括内边距和边框）的宽度
可能出现溢出屏幕的情况:
如果元素具有内边距或边框，那么即使设置了width: 100%，元素的总宽度也会超过其父元素的宽度，可能导致元素溢出其父元素或溢出屏幕。
.element { width: 100%; padding: 10px; border: 5px solid black; }
解决方法 (box-sizing: border-box;):
box-sizing属性允许你更改浏览器计算元素宽度和高度的方式。通过设置box-sizing: border-box;，你可以告诉浏览器包括内边距和边框在内，但不包括外边距在内，来计算元素的宽度和高度。
.element { width: 100%; padding: 10px; border: 5px solid black; box-sizing: border-box; }
这样，即使有内边距和边框，元素的总宽度也会与其父元素的宽度相匹配，防止溢出。
为什么这样能解决:
box-sizing: border-box;是因为它改变了浏览器计算元素宽度的方式。在这种模式下，元素的width和height属性包括了内边距和边框，而不仅仅是内容区域。这意味着，即使元素有内边距和边框，其宽度也会保持为100%，与父元素的宽度相匹配，从而防止了溢出的问题。
设置默认布局边距
*{ padding: 0; margin: 0;} 是一种CSS重置（CSS Reset）的简单形式。让我们逐一解释：
通配符 *:
通配符 * 是一个全局选择器，它匹配页面上的所有元素。
padding: 0; 和 margin: 0;:
这两条样式规则分别将所有元素的内边距（padding）和外边距（margin）设置为0。
* { padding: 0; margin: 0; }
用途和使用场景：
消除浏览器默认样式:
不同浏览器有不同的默认样式。例如，某些浏览器可能会为<body>、<h1>、<p>等元素提供默认的margin和padding值。通过使用* { padding: 0; margin: 0; }，你可以重置所有元素的margin和padding值，确保在不同浏览器中的一致性。
创建清晰的布局:
在开始创建网站布局之前重置margin和padding值是一个好习惯，我们可以放在css布局里的首行。这样做可以确保你的布局不会受到未预期的空间影响，使布局过程更为清晰和可预测。
减少样式冲突:
在大型项目或使用第三方库时，重置margin和padding值可以帮助减少样式冲突，使样式更容易管理和维护。
背景设置
在CSS中，背景属性用于为元素设置背景内容。你可以设置颜色、图像、重复、位置和滚动等属性来配置背景。以下是背景属性及其用法的概述：
背景颜色 (background-color):
设置元素的背景颜色。
.element { background-color: #ff0000; /* 红色 */ }
背景图像 (background-image):
设置元素的背景图像。
.element { background-image: url('background.jpg'); }
这只是部分
