![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
在前几章中我们提到盒模型，何为盒模型呢？有HTML元素可以看作盒子，在CSS中，盒模型就是用来设计和布局时使用的常用术语。
在布局盒模型的时候，是让我们头疼的就是隐形式的margin和padding，这些隐形式的间距会让我们的布局变得不可控，常常会使得排版错乱，这个时候就出现怪异盒模型box-sizing。
最主要的用法是规定容器元素的最终尺寸计算方式。
如果我们创建一个<div>没有设置box-sizing属性为border-box的话（默认值为content-box），例子如下；
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=<>, initial-scale=1.0"><title>盒模型(box-sizing)</title><style>:root{font-size: 10px;}div{width: 20em;height: 15em;background-color: lightgreen;}.box{padding: 1em;border: 2px solid;/* 将背景色载切到内容区，让padding可视化 */background-clip: content-box;}</style></head><body><div class="box"></div></body></html>
效果如下
默认W3C标准盒子(content-box)，border和padding的设置是会破坏掉元素的宽高，必须得重新计算，非常麻烦；这个时候就用到我们的主角border-box了。
| 版本 | 值 | 说明 | 能否继承 | 备注 |
|---|---|---|---|---|
| CSS3 | content-box | 元素的填充和边框布局和绘制指定宽度和高度除外 | 否 | 默认值 |
| CSS3 | border-box | 置border、padding不会影响元素width与 height的尺寸 | 否 | IE模型 |
新增如下代码
/* IE怪异盒模型 */box-sizing: border-box;
元素对齐方式是最基础，而且也是最考验大家基本功扎实程度；因为元素对齐几乎是必选项，每个页面布局都会用到。
水平居中方式一共有两种
行内或行内块的水平居中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平居中问题</title><style>div{width: 10em;height: 10em;border: 1px solid;}/* 行内或行内块水平居中 */.box{text-align: center;}</style></head><body><div class="box"><span>文字标题</span></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>div{width: 10em;height: 10em;border: 1px solid;}/* 块元素的水平居中 */.box>div{width: 5em;height: 5em;background-color: yellow;/* 使用text-align: center;是无效的，需要用到margin: ; */margin: auto;}</style></head><body><div class="box"><div></div></div></body></html>
注意：使用margin来实现块的水平居中，挤压式的居中；
auto这个值由浏览器根据上下文自动计算。
行内元素使用line-height实现居中效果，但是图片img不能够使用line-height实现居中，因为img已经有高度了，所以需要使用padding方法实现垂直居中效果。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中问题：padding</title><style>.box{width: 15em;/* 不要使用高度，这个高度应该由padding挤出来 *//* height: 15em; */border: 1px solid;}.box{padding: 5em 0;}.box img{width: 5em;}</style></head><body><div class="box"><img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt=""></div></body></html>
效果如下
| 元素 | 展现形式 | 实现代码 | 备注 |
|---|---|---|---|
| 行内元素 | 水平 | text-align: center; | 行内元素或行内块可以实现水平居中 |
| 块元素 | 水平 | margin: auto; | 不能使用text-align，需要用margin实现水平居中 |
| 行内元素 | 垂直 | line-height | 行内元素或行内块可以实现垂直居中 |
| 图片元素 | 垂直 | padding | 不能使用line-height，需要用padding挤出来 |
