盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，
css内定义的宽（width）和高（height），指的是填充以里的内容范围。(注意我定义的宽度是内容范围的宽度)
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
绝对定位和相对定位：
absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
参照定位的元素必须加入position:relative;
定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
居中处理:
水平居中又分两种情况：行内元素和块级元素
块级元素又分为定宽块元素和不定宽块元素
依次来说：
1，如果是文本，图片等行内元素时，可以通过父元素设置text-align:center来实现(<div style="text-align:center;"><img src="test.png"/></div>)
2，如果是块级元素的定宽元素：同时满足定宽和块级的话可以通过左右margin值为auto来实现(div{width:200px;margin:20px auto;})
3，如果是块级元素的不定宽元素：有三种方法：
1，加入table
table{ margin:0 auto; } <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table>
2，设置display:inline方法显示为不定宽行内元素，然后用text-align:center实现
<style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} </style> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>
3,设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
垂直居中：
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的(height:100px;line-height:100px;)
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
table td{height:500px;background:#ccc} <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
