网页元素按照类型分为三种类型
块状元素（div p ul h1 等）
内联元素（span label a strong em 等）
内联块状元素（img input 等）
块状元素的特征是独占一行，之后的元素也会另起一行，不过块状元素可以通过display:inline,设置为内联元素。
内联元素是在一行中，通过display：block设置为块状元素。
display：inline-block将元素设置为内联块状元素
inline-block元素的特点是1：和其他元素都在一行上，2：元素的高度、宽度、行高以及顶和底边距都可以设置。
块状元素的默认宽度为100%
css的布局模型分为流动（flow） 浮动（float） 层（layer）
定位：绝对定位absolute 相对定位relative 固定定位fixed
绝对定位是相对于具有定位属性的父包含块的位置进行定位，如果没有定位属性的父包含块即相当于body标签。
绝对定位使元素脱离了正常的文档流。
相对定位是元素在正常的文档流中的位置通过left right top bottom属性进行偏移。
偏移前的位置保留不动，好像是元素漂浮起来一样。
固定定位使元素固定在浏览器窗口中的视图位置，不会随着浏览器滚动条的滚动而发生位置变化。通过left right top bottom设置元素的位置。
水平居中设置
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1加入 table 标签
2设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的。通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
垂直居中
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 td 标签默认情况下就默认设置了 vertical-align 为 middle。
方法二：设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。