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
方向上对应于四个方向:上右下左