浮动，定位，表单，弹性盒子

浮动，定位，表单，弹性盒子

一、浮动布局（Float）

1. 核心属性

css

float: left;   /* 左浮动 */
float: right;  /* 右浮动 */
float: none;   /* 默认，不浮动 */

2. 作用与特点

• 让块级元素横向排列（脱离文档流）
• 常用于图文环绕、多栏布局
• 缺点：父容器高度塌陷，需要清除浮动

3. 清除浮动

css

/* 方法1：父容器 overflow */
.parent { overflow: hidden; }

/* 方法2：空div清除 */
.clear { clear: both; }

/* 方法3：伪元素（推荐） */
.parent::after {
  content: "";
  display: block;
  clear: both;
}

---

二、定位（Position）

1. 五种定位模式

值	参考系	文档流	用途
static（默认）	无	保留	正常文档流
relative	自身原位置	保留占位	微调位置；作为绝对定位的参照
absolute	最近非static祖先	脱离	弹出层、悬浮元素
fixed	浏览器视口	脱离	固定导航、回到顶部按钮
sticky	视口+父容器	混合	粘性导航栏

2. 偏移属性

css

position: relative;
top: 10px;      /* 向下移10px */
left: 20px;     /* 向右移20px */

css

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

3. 常用组合：子绝父相

css

.parent {
  position: relative;   /* 父相对定位 */
}
.child {
  position: absolute;   /* 子绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 居中 */
}

---

三、表单（Form）

1. 基本结构

html

<form action="提交地址" method="post">
  <label>用户名：<input type="text" name="username" /></label>
  <label>密码：<input type="password" name="password" /></label>
  <button type="submit">提交</button>
</form>

2. 常用 input 类型

类型	说明
text	单行文本
password	密码（隐藏）
email	邮箱（自动校验）
number	数字（带增减按钮）
radio	单选按钮（同name为一组）
checkbox	复选框
submit	提交按钮
reset	重置按钮

3. 其他常用标签

标签	作用
<label>	绑定输入框，点击文字可聚焦（for 属性关联 id）
<select> + <option>	下拉选择框
<textarea>	多行文本输入
<fieldset> + <legend>	分组 + 组标题

4. 表单样式示例

css

input, select, textarea {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
button {
  background: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

---

四、弹性盒子（Flexbox）

1. 启用方式

css

.container {
  display: flex;   /* 所有子项变为弹性项目 */
}

2. 两条轴

• 主轴：子元素排列方向（默认水平 →）
• 交叉轴：垂直于主轴（默认垂直 ↓）

3. 容器属性（6个核心）

属性	作用	常用值
flex-direction	主轴方向	row（默认）、column、row-reverse
justify-content	主轴对齐	flex-start、center、space-between
align-items	交叉轴对齐（单行）	stretch（默认）、center、flex-start
flex-wrap	是否换行	nowrap（默认）、wrap
align-content	交叉轴对齐（多行）	stretch、center、space-between
gap	项目间距	gap: 10px;

4. 项目属性（3个核心）

属性	作用	示例
flex	伸缩比例（简写）	flex: 1（占剩余空间）
order	排列顺序	order: -1（排最前）
align-self	自身交叉轴对齐	align-self: flex-end

5. 常用速记组合

css

/* 水平垂直居中 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 等分三列 */
.parent { display: flex; }
.item { flex: 1; }

/* 导航两端对齐 */
.parent {
  display: flex;
  justify-content: space-between;
}

---

五、四种布局方式对比总结

方式	核心概念	优点	适用场景
浮动	元素脱离文档流横向排列	兼容性好	图文环绕、旧版多栏布局
定位	通过偏移控制位置	精确控制	弹出层、悬浮元素、固定导航
表单	收集用户输入	交互核心	登录、注册、搜索、数据提交
弹性盒子	主轴/交叉轴灵活排列	响应式强、对齐方便	现代网页所有布局场景（导航、卡片、居中）