css

css

1.盒模型

页面渲染时，dom元素所采用的布局模型。 可以通过box-sizing 进行设置。根据计算宽高的区域可分为：

content-box (W3C 标准盒模型)

border-box (IE 盒模型)

content-box:在标准模式下，一个块的总宽度= width（content） + margin(左右) + padding(左右) + border(左右)

border-box:在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

2.居中布局

1.水平居中

(1)text-align:center;（水平居中的是div中的元素）

(2)display:flex; justify-content:center; （水平居中的是div中的元素）

(3)position:absolute; top:0; left:50%; transform:translate(-50%,0); （水平居中的是div）

(4)margin:0,auto; （水平居中的是div）

2.垂直居中

(1)line-height:height;（垂直居中的是div中的元素）

(2)display:flex; align-items:center;（垂直居中的是div中的元素）

(3)position:absolute;  top:50%;  left:0;  transform:translate(0,-50%); （垂直居中的是div）

3.水平垂直居中

(1)