0x01 html和css
css
对于三种css使用方式：
第一种：行内样式
<span style="color: grey;">2024年05月15日 20:07</span>
第二种：内部样式
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
span{
color: grey;
}
</style>
...
</head>
<body>
<span>2024年05月15日 20:07</span>
</body>
</html>
第三种：外部样式
html代码部分，用link标签引入css文件，后面可以在body部分使用
<head>
...
<link rel="stylesheet" href="./css/new.css">
</head>
<body>
<span>2024年05月15日 20:07</span>
</body>
css代码部分
span {
color: gray;
}
注意第三种方式css代码每个选择器之间不能有分号，也就是下面代码种span元素选择器和a元素选择器之间没有分号
span {
color: rgb(178, 178, 178);
}
a {
text-decoration: none;
}
三种方式在代码复用性方面来说，外部样式>内部样式>行内样式。
css选择器
元素选择器：选择页面上的标签
h1{...}
类选择器：选择页面上某一class的内容
.cls{...}
id选择器：选择页面上某一id属性的内容
#hid{...}
三类选择器的优先级，id选择器>类选择器>元素选择器
盒子模型
盒子模型的组成：
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
盒子模型通常方便我们布局，有两个经常使用的标签，一个是div，一个是span
- div
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（默认定义的是content的高度和宽度）
- span
- 一行可以显示多个
- 宽度高度默认由内容撑开
- 不可以设置宽高
div {
width: 200px;
height: 100px;
background-color: #05a5d2;
padding: 20px 20px 20px 20px;
border: 20px solid #6bd5d7;
margin: 30px 30px 30px 30px;
}
上面四个边框：顺序是上右下左（顺时针），也可以设置为两个，也可以设置为一个
margin：可以设置为auto，可以使盒子居中
#div1 {
width: 400px;
height: 300px;
background-color: #ffff00;
padding: 30px;
box-sizing: border-box;
border: 10px solid #ff0000;
margin: 30px auto;
}
flex布局
flex是一种用于按行或按列布局元素的一维布局方法。
存在即合理，flex是为了解决布局问题而存在的工具，flex能实现水平/垂直居中，自动分配子元素的对齐和居中，支持动态调整子元素，代码简洁。
flex中的两大重要概念：Flex容器、Flex项目
Flex容器：通过display:flex来声明，控制其内部子元素（flex项目）的排列方式
Flex项目：容器中的子元素自动成为flex项目，可以通过属性单独控制一个项目
<!-- 示例：外层 div 是容器，内部的 a 和 button 是项目 -->
<div class="container"> <!-- Flex 容器 -->
<a href="#">链接</a> <!-- Flex 项目 -->
<button>按钮</button> <!-- Flex 项目 -->
</div>
flex容器核心属性：
- 主轴方向flex-direction
.container {
flex-direction: row; /* 默认→ 左到右 */
flex-direction: row-reverse; /* ←右到左 */
flex-direction: column; /* ↓ 上到下 */
flex-direction: column-reverse; /* ↑ 下到上 */
}
- 主轴对齐justify-content
.container {
justify-content: flex-start; /* 左对齐（默认） */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐，项目间隔相等 */
justify-content: space-around; /* 项目两侧间隔相等 */
}
- 换行方式
.container {
flex-wrap: nowrap; /* 默认：不换行，压缩子元素宽度 */
flex-wrap: wrap; /* 换行：从上到下排列 */
flex-wrap: wrap-reverse; /* 换行：从下到上 */
}
