Flexbox对齐、表格表单与圆形制作

Flexbox对齐、表格表单与圆形制作

---

一、Flexbox 对齐方式

1. 主轴对齐（justify-content）—— 5种

值	效果
flex-start	起点对齐（左对齐）
flex-end	终点对齐（右对齐）
center	居中对齐
space-between	两端对齐，项目间间距相等
space-around	每个项目两侧间距相等

css

.container {
  display: flex;
  justify-content: center;  /* 主轴居中 */
}

---

2. 交叉轴对齐（align-items）—— 5种

值	效果
flex-start	起点对齐（顶部）
flex-end	终点对齐（底部）
center	居中对齐（垂直居中）
stretch（默认）	拉伸填满容器高度
baseline	文字基线对齐

css

.container {
  display: flex;
  align-items: center;  /* 垂直居中 */
}

记忆口诀：justify 管主轴，align 管交叉轴。

---

二、表格布局（<table>）

1. 基本结构

html

<table border="1" cellspacing="0" cellpadding="10">
  <tr>                    <!-- 行 -->
    <th>姓名</th>          <!-- 表头（加粗居中） -->
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>          <!-- 普通单元格 -->
    <td>20</td>
  </tr>
</table>

2. 常用 CSS

css

table {
  border-collapse: collapse;  /* 合并边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}
/* 斑马纹 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

---

三、表单布局（<form>）

1. 基本结构

html

<form action="提交地址" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="username" />

  <label for="pwd">密码：</label>
  <input type="password" id="pwd" name="password" />

  <button type="submit">提交</button>
</form>

2. 常用样式（配合 Flexbox）

css

form {
  display: flex;
  flex-direction: column;  /* 纵向排列 */
  width: 300px;
  margin: 0 auto;
}
input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
}

3. 常用 input 类型

类型	说明
text	单行文本
password	密码（隐藏输入）
email	邮箱
number	数字
radio	单选按钮
checkbox	复选框
submit	提交按钮
reset	重置按钮

---

四、圆形制作

1. 正圆形

css

.circle {
  width: 100px;
  height: 100px;           /* 宽高相等 */
  border-radius: 50%;      /* 关键：50%圆角 */
  background-color: red;
}

2. 圆形头像（图片）

css

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;       /* 图片裁剪填充，不变形 */
}

html

<img class="avatar" src="头像.jpg" alt="" />

3. 半圆/椭圆

css

/* 椭圆（宽≠高） */
.ellipse {
  width: 120px;
  height: 80px;
  border-radius: 50%;
}

/* 上半圆 */
.half-circle {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
}