CSS盒模型+元素水平居中的方法

前言

盲敲的，为了加深印象，可能会有错误，欢迎指正，感激不尽~

---

一、CSS盒模型

首先理解页面上所有的元素其实就是一个一个的盒子，它由以下几部分组成：

• 外边距 margin
• 边界 border
• 内边距 padding
• 内容 content

根据如何计算它们，又可把盒模型分为

• 标准盒模型 content-box
• IE盒模型 border-box

可以通过box-sizing这个属性来控制，默认情况下是标准盒模型。

标准盒模型 content-box顾名思义，自然是content为主，所有的width都给了它，但是当问这个盒子有多宽的时候是从里算到边界的，包括边界：

君问：宽几许？

子曰：宽226。

而IE盒模型则就比较实诚了，width是多少，那么这个盒子就有多宽，自然就会被border和padding分走一部分。

君问：宽几许？

子曰：宽200。

二、元素水平居中

• 方法一：margin:auto

---

•  方法二：transform

不加transform的情况：

因为top：

top 属性设置或返回定位元素的顶部位置。

该属性规定了元素的顶部位置，包括：内边距、滚动条、边框和外边距。

提示：一个定位元素是元素的 position 属性被设置为：relative（相对）、absolute（绝对）或 fixed（固定）。

---

方法三：flex布局

justify-content确定了再主轴（水平）方向的对齐方式，align-items确定了对应垂直方向的对齐方式。