html的基础元素和布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 基础元素和布局示例</title>
</head>
<body>
<!-- 文档结构 -->
<!-- 定义文档类型 -->
<!DOCTYPE html>
<!-- HTML 根元素 -->
<html lang="en">
<head>
<!-- 元数据：字符集和标题 -->
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
<!-- 标题 -->
<h1>一级标题</h1> <!-- h1 到 h6 用于不同级别的标题 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落 -->
<p>这是一个段落。</p>
<!-- 换行符 -->
<p>这是第一行。<br>这是第二行。</p>
<!-- 水平线 -->
<hr>
<!-- 链接 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 图像 -->
<img src="image.jpg" alt="描述图像的文本">
<!-- 列表 -->
<!-- 无序列表 -->
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
<!-- 表格 -->
<table border="1">
<tr>
<th>表头1</th> <!-- 表头单元格 -->
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td> <!-- 表格单元格 -->
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<!-- 表单 -->
<form action="/submit" method="post">
<!-- 输入框 -->
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<!-- 单选按钮 -->
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<!-- 复选框 -->
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">旅行</label><br><br>
<!-- 下拉菜单 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select><br><br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
<!-- 多媒体 -->
<!-- 视频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<!-- 音频 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 标签。
</audio>
<!-- 表格布局 -->
<table border="1">
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</table>
<!-- div+css 布局 -->
<div style="display: flex;">
<div style="flex: 1; background: #eee; padding: 10px;">
左侧区域
</div>
<div style="flex: 2; background: #ccc; padding: 10px;">
右侧区域
</div>
</div>
</body>
</html>
css中的属性：
/* 布局和定位 */
.element {
display: block; /* 定义元素的显示类型，如 block, inline, inline-block, flex, grid */
position: relative; /* 定义元素的定位方式，如 static, relative, absolute, fixed, sticky */
top: 10px; /* 定义元素相对于其定位上下文的上边距 */
right: 20px; /* 定义元素相对于其定位上下文的右边距 */
bottom: 30px; /* 定义元素相对于其定位上下文的下边距 */
left: 40px; /* 定义元素相对于其定位上下文的左边距 */
z-index: 10; /* 定义元素的堆叠顺序 */
}
/* 盒模型 */
.element {
width: 100px; /* 定义元素的宽度 */
height: 200px; /* 定义元素的高度 */
max-width: 300px; /* 定义元素的最大宽度 */
max-height: 400px; /* 定义元素的最大高度 */
min-width: 50px; /* 定义元素的最小宽度 */
min-height: 100px; /* 定义元素的最小高度 */
padding: 10px 20px 30px 40px; /* 定义元素的内边距（上、右、下、左） */
margin: 5px 10px 15px 20px; /* 定义元素的外边距（上、右、下、左） */
border: 1px solid #000; /* 定义元素的边框（宽度、样式、颜色） */
border-radius: 5px; /* 定义元素边框的圆角 */
}
/* 文本和字体 */
.text {
color: #333; /* 定义文本颜色 */
font-family: Arial, sans-serif; /* 定义字体系列 */
font-size: 16px; /* 定义字体大小 */
font-weight: bold; /* 定义字体粗细，如 normal, bold, bolder, lighter 或数值 */
text-align: center; /* 定义文本对齐方式，如 left, right, center, justify */
line-height: 1.5; /* 定义行高 */
text-decoration: underline; /* 定义文本装饰，如 none, underline, overline, line-through */
text-transform: uppercase; /* 定义文本转换，如 none, capitalize, uppercase, lowercase */
}
/* 背景 */
.background {
background-color: #f0f0f0; /* 定义背景颜色 */
background-image: url('image.jpg'); /* 定义背景图像 */
background-repeat: no-repeat; /* 定义背景图像的重复方式，如 repeat, no-repeat, repeat-x, repeat-y */
background-position: center center; /* 定义背景图像的位置 */
background-size: cover; /* 定义背景图像的大小，如 auto, cover, contain */
}
/* 过渡和动画 */
.transition {
transition: all 0.3s ease; /* 定义过渡效果（属性、持续时间、时间函数、延迟） */
}
.animation {
animation: myAnimation 2s infinite; /* 定义动画（名称、持续时间、时间函数、延迟、迭代次数、方向） */
}
/* 其他 */
.cursor {
cursor: pointer; /* 定义鼠标悬停时的光标样式 */
}
.opacity {
opacity: 0.5; /* 定义元素的不透明度 */
}
.overflow {
overflow: hidden; /* 定义内容溢出元素框时的处理方式，如 visible, hidden, scroll, auto */
}
Margin（外边距）
display: inline-block;: 将元素显示为内联块级元素，使其具有块级元素的特性，同时可以与其他元素在同一行。vertical-align: top;: 将元素与其父级元素的顶部对齐。padding: 10px;: 设置元素内部的内边距为 10 像素。padding: 5px;表示设置元素的内边距为 5 像素，这意味着元素的上下左右四个方向的内边距都是 5 像素。font-weight: bold;: 设置文本字体加粗。font-size: 28px;: 设置文本字体大小为 28 像素。display: grid;: 将元素显示为网格布局容器。grid-template-columns: repeat(7, 1fr);: 设置网格布局为7列，列宽度平分。gap: 5px;: 设置网格项之间的间距为 5 像素。text-align: center;: 设置文本居中对齐。font-weight: bold;: 设置文本字体加粗。margin-bottom: 5px;: 设置元素的底部外边距为 5 像素。cursor: pointer;: 设置鼠标指针为手型，表示该元素是可点击的。visibility: hidden;: 将元素隐藏，但仍然占据布局空间。-
padding和margin是 CSS 中用于控制元素布局的两个重要属性，它们的主要区别在于它们所影响的区域和作用。 -
Padding（内边距）
- 定义：
padding是指元素内容与其边框之间的空间。 - 作用：它影响元素的内部空间，增加
padding会使元素的内容远离其边框。 - 背景颜色：
padding区域会继承元素的背景颜色或背景图像。 - 盒模型：在 CSS 盒模型中，
padding被包含在元素的宽度和高度计算中（除非使用box-sizing: border-box;）。 - 定义：
margin是指元素边框与其相邻元素之间的空间。 - 作用：它影响元素的外部空间，增加
margin会使元素远离其他元素。 - 背景颜色：
margin区域是透明的，不会继承元素的背景颜色或背景图像。 - 盒模型：在 CSS 盒模型中，
margin不被包含在元素的宽度和高度计算中。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
