Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

时间:2021-07-12 16:28:56

1、div层的浮动

1)div向左浮动、向右浮动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head> <style type="text/css">
#div{
width:400px;
height:300px;
border:1px solid #888484;
}
.div1{
width:150px;
height:150px;
background-color:red;
float:left; /*向左浮动:对父类div为对象*/
}
.div2{
width:150px;
height:150px;
background-color:yellow;
float:right; /*向右浮动::对父类div为对象*/
} </style>
<body>
<div id="div">
<div class="div1">
向左浮动测试
</div>
<div class="div2">
向右浮动测试
</div>
</div>
</body>
</html>

2)浮动后效果

aaarticlea/png;base64,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yps99TdwXP+U8qjOH2h9rJerw309D+X7Ffar34Hzv2nXj3P//lv6C7++RMbz27B10B/8i+e2j/JWT/19rps/Zb/1cdfH+u0xXxzu63m4/F62v6/H7D8+3JvyOE+Hv7+lv+/rS03bUF6C+pITs3lSy/dJPPWlmAc/Q3+72ne+Gnaeh49/X1f/39NjO3p+dvILX5cm4/NtKC9Qb34W/Ozzhu3/iYjLb5V47ksxj32Gfr7a9c8ylfdzXD2S8md2H9vRt2cnv+91af+boD+387r8qhcblk/+peLbfM3JeO3PsP7m3nful/2SbYPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg7INao+M/LnRoGyD2iMjf240KNug9sjInxsNyjaoPTLy50aDsg1qj4z8udGgbIPaIyN/bjQo26D2yMifGw3KNqg9MvLnRoOyDWqPjPy50aBsg9ojI39uNCjboPbIyJ8bDco2qD0y8udGg/rnbQDg17ENAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGAyjYAUNkGACrbAEBlGwCobAMAlW0AoLINAFS2AYDKNgBQ2QYAKtsAQGUbAKhsAwCVbQCgsg0AVLYBgMo2AFDZBgAq2wBAZRsAqGwDAJVtAKCyDQBUtgGA6l+3QZL0K3t9GwD4P2QbAKhsAwCVbQCgsg0AVLYBgMo2AFD9D2FogtpcpjJCAAAAAElFTkSuQmCC" alt="" width="438" height="222" />

2、div的相对定位和绝对定位

1)div的绝对定位、相对定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head> <style type="text/css">
#div{
width:400px;
height:300px;
border:1px solid #888484;
}
.div1{
width:150px;
height:150px;
background-color:red;
float:left; /*向左浮动:对父类div为对象*/
}
.div2{
width:150px;
height:150px;
background-color:yellow;
float:right; /*向右浮动::对父类div为对象*/
}
#span1{
width:100px;
height:80px;
background-color:blue;
position:absolute; /**绝对定位**/
margin-top:25px; /**对于屏幕边进行定位**/
margin-left:30px;
}
#span2{
width:100px;
height:80px;
background-color:red;
position:relative; /**相对定位**/
margin-top:25px; /**对于第一层div进行定位**/
margin-left:40px;
} </style>
<body>
<div id="div">
<div class="div1">
向左浮动测试
<div id="span1">绝对定位测试</div>
</div>
<div class="div2">
向右浮动测试
<div id="span2">相对定位测试</div>
</div>
</div>
</body>
</html>

2) 定位后的效果:

aaarticlea/png;base64,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" alt="" width="445" height="236" />