CSS浮动和定位

最新推荐文章于 2024-07-26 21:34:02 发布

lyy_0522

最新推荐文章于 2024-07-26 21:34:02 发布

阅读量564

点赞数 2

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/lyy_0522/article/details/121727763

版权

浮动和定位在css中非常常常用。正确快速的使用它们对我们制作网页非常有帮助。

浮动（float)

浮动常常被用作将图片放在网页中。它可以是一张也可以是多张图片的规则排布。

例：

现在我们想要把一张图片放在网页的左上角,就可以利用浮动来完成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
 img {
 float:left;
 }
</style>
</head>

<body>
<div>
<img src="图片地址">
</div>
</body>

当然了，如果你想，可以在浮动后边加一些其他属性，比如说width，height，margin 等等，你也可以在图片地址后给它设置width和height属性。

如果想要插入多个图片，它们会整齐的水平排列在一起，这时你还可以在它们之间设置一些属性比如说margin，从而为它们设置间距。

如果想要把图片插入到文字右边和左边也是可以的。你可以为图片设置margin等属性，调整图片和文字的间距。

定位（position）

定位常用于页面布局中。在制作页面的过程中定位可以说不可或缺。

那么定位在哪里能够用的到呢?定位常用于为盒子或文本等固定位置。如果你想要在图片不规则的排列或者想要让文本到你想要它在的地方，你就可以利用position属性来完成。position有5个值。分别是static(默认)，relative(相对)，absolute(绝对)，fixed(固定)，sticky(粘性定位)。对于我来说的话较为常用的是fixed和absolute。

对于fixed定位：

fixed是相对于浏览器来说的位置是固定的，也可以理解为它相对于页面左上角时固定的。定位时要用一些top，left来属性明确盒子的位置。一旦盒子模型被固定，那么它不会随着页面的滚动而滚动，而是会固定在原位置。

例：

如果想要将图片固定在距页面左边20px，距页面上边40px的位置，就可以利用以下代码来进行定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
 img {
position:fixed;
top:40px;
left:20px;
 }
</style>
</head>

<body>
<div>
<img src="图片地址">
</div>
</body>

对于absolute定位：

absolute定位与fixed定位不同，fixed定位过的盒子或文本或图片不会随着页面的滚动而滚动，使用absolute定位会使盒子或文本或图片随页面滚动而滚动。使用absolute定位时也要使用top，left等属性来为盒子明确位置。

例：如果你想要在距页面上部30px，距页面左边45px的位置定位一个图片，就可以使用如下定位方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
 img {
position:absolute;
top:30px;
left:45px;
 }
</style>
</head>

<body>
<div>
<img src="图片地址">
</div>
</body>