今日份分享

1、水平居中：

- 子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效

- 子父元素宽度固定，父元素设置 text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

2、水平垂直居中：

- 子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素margin-top 和 margin-left 减去各自宽高的一半

- 子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素margin：auto

**元素垂直居中**

1.设置子元素和父元素的行高一样

2.子元素设置为行内块，再加 vertical-align：middle

**Doctype** **作用**

声明文档类型

**定位的属性值有何区别**

Position 有四个属性值：relative absolute fixed static

Relative 相对定位 不脱离文档流，相对于自身定位

Absolute 绝对定位，脱离文档流 相对于父级定位

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

Static 默认值，元素出现在正常的流中

**介绍一下box-sizing属性**

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的

宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属

性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺

寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。