浮动布局和绝对布局

最新推荐文章于 2023-09-16 16:19:45 发布

xiaokehai

最新推荐文章于 2023-09-16 16:19:45 发布

阅读量1.1k

点赞数

分类专栏：学习Web过程中的小总结

本文链接：https://blog.csdn.net/xiaokehai/article/details/49717531

版权

学习Web过程中的小总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天我将自己理解的div的浮动布局，绝对布局，和自动居中来做解说

在什么情况下使用我们要使用到浮动布局和绝对布局呢？

由于div是块级元素，所以在默认情况下，会占据一行，每个块级元素就像流水型一样，从上到下布局，当我们想做个横向多列布局是，我们就可以使用浮动布局和绝对布局。

浮动布局（float）使用：

思路：

我们将想实现横向布局的每个块级元素，设置为float;至于float的属性值就靠自己选择了。

{

添加一个小插曲：

若想使得两个块级元素有一定的间距，

可是使用margin

来设置块级元素相对于上左下右的间距。。。

}

代码做参考：

绝对布局（position）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Document</title>

<styletype="text/css">

body,div{margin:0;padding: 0;}

#body{border: 1pxsolid red;margin: 0 auto;width: 1000px;}

#body .head{border:1px solid green;width: 100%;height: 100px;}

#body .main{border: 1px solidblack;width:100%;height: 500px;}

#body .main .left{border: 1px solid red;width:20%;height: 100%;float: left;}

#body .main .mid{border: 1px solid gray;width:40%;height: 100%;float: left;}

#body .main .right{border: 1px solid yellow;width:30%;height: 100%;float: left;}

#body .foot{border: 1px solid green;width:100%;height: 100px;}

</style>

</head>

<body>

<divid="body">

<divclass="head"></div>

<div class="main">

<divclass="left"></div>

<divclass="mid"></div>

<divclass="right"></div>

</div>

<div class="foot"></div>

</div>

</body>

</html>

绝对布局

思路：

使用绝对布局时，我们要先确定，块级元素的父类是谁（这里指的父类是自己设定的，不是默认的），确定了之后，给父类元素设置position的属性值为relative,二他的第一个孩子不用动他，我们给第二个孩子的position的属性值设置为absolute，top属性值为0,left看情况设定就可以了，若还有第三个孩子，就和第二个孩子同理

{

添加一个内容：

Reletive本身是不会对页面造成影响的，

他只是给absolute做参考，

absolure的位置会相对于离他最近的一个有relative的标签做移动，

还有一个经典的对绝对浮动的理解：

因为绝对浮动是断绝关系的孩子再也不会回来的了所以家里就没有给他留位置了。。。。

}

代码做参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>Document</title>

<styletype="text/css">

body,div{margin:0px;padding: 0px;}

#body{border: 1pxsolid red;width: 1000px;margin: 0 auto;}

#body .head{border:1px solid green;height: 100px;}

#body .main{border:1px solid yellow;height: 500px;position: relative;}

#body .main.left{border: 1px solid blue;width: 20%;height: 100%;}

#body .main.mid{border: 1px solid black;width: 60%;height:100%;position:absolute;top:0;margin-left:22%;}

#body .main.right{border: 1px solid gray;width: 13%;height:100%;position:absolute;top:0;smargin-left:85%;}

#body.foot{border:1px solid black;width: 100%;height: 50px;}

</style>

</head>

<body>

<divid="body">

<divclass="head"></div>

<divclass="main">

<divclass="left"></div>

<divclass="mid"></div>

<divclass="right"></div>

</div>

<divclass="foot"></div>

</div>

</body>

</html>

自动居中：就是使margin:0 auto;不能设置浮动或者绝对布局，并且给块级元素一个固定宽度。

xiaokehai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动布局和绝对布局

今天我将自己理解的div的浮动布局，绝对布局，和自动居中来做解说在什么情况下使用我们要使用到浮动布局和绝对布局呢？由于div是块级元素，所以在默认情况下，会占据一行，每个块级元素就像流水型一样，从上到下布局，当我们想做个横向多列布局是，我们就可以使用浮动布局和绝对布局。浮动布局（float）使用：思路：我们将想实现横向布局的每个块级元素，设置为float;至于float的
复制链接

扫一扫

专栏目录