web前端開發專案中可能遇到的細節性問題（1）【position,padding+margin】
1.區別a和b——
a.position：absolute； b.position：relative；
——position:absolute;表示絕對定位，
(1)其一般要設定高度跟居左的畫素，即top/left,
(2)其一般是相對於瀏覽器而言的；
——position：relative；表示相對定位，
（2）其一般相對應於上一個容器div而言；
（3）需要設定容器間的間距，即其對應的margin值，（margin-top/right/bottom/left）
示例程式碼譬如下：
——position:relative;
<style>
.div1{
float:left;
width:100px;height:800px;
}
.div2{
float:left;
width:50px;
margin-left:20px;
position：relative;
}
</style>
//div1和div2相距為120px；
//width差為50px+margin-left的20px+自己的寬度width—50px = 120px；
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
——position：absolute；
<style>
.logo{
width:200px;
height:200px;
bottom:20px;
left:20px;
position:absolute;
}
//絕對定位，即相對於瀏覽器左20px，下20px位置處的200px*200px盒子模型；
</style>
<body>
<div class="logo"></div>
</body>
2.margin與padding區別
不同點——margin：外邊距；
padding：內邊距；
margin：0 auto;——可實現居中顯示,即對應上下0px，左右自適應（居中）顯示；
注意：必須設定其width寬度，左右自適應的寬度自適應；
相同點——margin-top/margin-right/margin-bottom/margin-left
padding-top/padding-right/padding-bottom/padding-left
方向上對應於四個方向：上右下左