盒模型所有常用属性、box-sizing的用法、理解定位元素的水平与垂直对齐技术 垂直居中
盒模型常用属性
- 每个盒子都由四个部分组成
| 组成部分 | 描述 |
|---|---|
| 内容区域（content） | 包含元素的主要内容 可以是文本 图片等 |
| 内边距区域（padding） | 填充的是内容与边框的边距 可以用于延伸内容区的背景 |
| 边框区域（border） | 用于显示边框 |
| 外边距区域（margin） | 可以用于分开相邻元素 |
- 常用属性及含义
| 属性 | 描述 |
|---|---|
width min-width max-width |
用于设置内容区域或者带边框区域的宽度 |
height min-height max-height |
用于设置内容区域或者带边框区域的高度 |
padding |
用于设置内边距的宽度和高度 |
border |
用于设置边框的宽度和高度 |
margin |
用于设置外边距的宽度和高度 |
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型常用属性</title><style>.box {width: 100px;height: 100px;margin: 50px;border: 10px solid red;background-color: blue;padding: 10px;}span {background-color: greenyellow;}</style></head><body><div class="box"><span>文本内容</span></div></body></html>
显示结果
注意：盒模型的外边距会产生重合现象
box-sizing的用法
box-sizing定义了浏览器如何计算一个元素的总高度与宽度- 即
width height属性所描述的是内容区还是带边框区域的宽度高度 其参数有：
content-box默认值，表示当前宽度高度为盒模型的内容区的宽高度border-box表示当前宽度高度为带边框区域整体（除去外边距）的宽高度
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>box-sizing用法</title><style>.box1 {box-sizing: content-box;width: 100px;height: 100px;border: 10px solid red;padding: 10px;}.box2 {box-sizing: border-box;width: 100px;height: 100px;border: 10px solid red;padding: 10px;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>
显示结果
理解定位元素的水平与垂直对齐技术 垂直居中
- 利用绝对定位实现
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>定位元素的对齐</title><style>.container {width: 200px;height: 200px;border: 1px solid red;position: relative;}.item {width: 100px;height: 100px;background-color: greenyellow;/* 水平左右居中1 *//* margin-left: auto;margin-right: auto; *//* 水平左右居中2 *//* position: absolute;left: 0;right: 0;margin: auto; *//* 垂直上下居中 *//* position: absolute;top: 0;bottom: 0;margin: auto; *//* 完全居中 */position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><div class="container"><div class="item"></div></div></body></html>
显示结果
- 水平左右居中
- 垂直上下居中
- 完全居中
