在子块设置了position属性为relative后，其宽度仍然为未移动前的宽度，撑满了未移动前福快的内容。只是向右移了，因此右边超出父块。如果希望自快的宽度仅仅为其内容加上自己的padding值，则可以将其float属性设置为left或者制定其宽度width
设置position属性，一般是配合left\top属性来定位整个块的位置
*一般的css布局
设置页面文字字号、字体，以及父块的宽度让其撑满整个浏览器
body{margin:0px;font-size:13px;font-family:Arial;}
#container{position:relative;width:100%;}
接下来设置#banner(横幅)块
#banner{height:80px;border:1px;padding:10px;margin-bottom:2px;}
#content内容块一般不设置宽度，随浏览器变化自己调整
#links导航栏一般要设置宽高
#content{float：left;}
#links{float:right;width:200px;text-align:center;}
此时#links块是被挤到#content下方的，因为#content设置宽度为100%，且#content宽度需要占满100%。此时不设置#content宽度，只能将#links的margin-left设为负数，强行往左拉回200px
#linsk{margin-left:-200px;float:right;width:200px;}
此时#content与#links的内容发生了重叠，只需要将#content的padding-right设置为200px即可在宽度不改变的情况下将内容往左边挤回去
这里可以停下来细想一下
此时#footer因为#content和#links设置了浮动属性会紧贴#banner块，因此设置clear属性使其不受浮动影响。
#footer{clear:both};
这样一个整体框架便构建完成
主块一般都要设置position:relative属性。方便控制位置吗？
网页设计三步：1.设计好布局/2.给每个布局块增添内容/3.设置每个详细内容的属性、添加背景之类微操。
a下有三个属性 link/visited/hover 分别表示正常状态，点击后状态和鼠标悬浮状态