三种布局的用法

林妻灵

于 2023-04-12 11:37:09 发布

阅读量193

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/2302_76662918/article/details/130101981

版权

本文介绍了HTML中的盒子布局，包括边框样式如none,dotted,dashed,solid，以及padding和margin的使用。接着讨论了浮动布局，通过float属性实现元素的左右浮动，并提到clear属性来消除浮动影响。最后，文章讲解了定位布局，包括static,absolute和relative定位的区别和应用。

摘要由CSDN通过智能技术生成

1.盒子布局

none : 用于定义无边框

hidden: 与“none”相同，但对表除外（didden用于解决边框冲突）

dotted: 定义点状边框，在大多数时候为实线

dashed：用于定义虚线，但在大多数时候为实线

soild：定义实线

boder：用于描画边框，一般和soild配合使用

padding：内边距（内容距离边框的距离）

margin：外边距（边框距离页面的距离）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子布局</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
padding: 20px;
margin-left: 100px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>

soild的作用：用于盒子的边框

2.浮动布局

通过float属性去设置浮动布局，例如left none right

注意：如果浮动取值是左浮会对后面的元素产生一定的影响

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
/*float: left;*/
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
 </html>

（上面可以比较float：left对布局的作用，盒子一被左浮动而盒子二被浮动挤掉）

若是想消除这样的影响可以通过clear属性进行调节

none：可以允许两边浮动

left：不准左边浮动

right：不准右边浮动

both：不准两边有浮动

.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
 float: left; 
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
clear:both;
}

（避免盒子二被挤掉，既可以在盒子二加上clear属性）

3.定位布局

position：设置对象的定位方式

static：静态设置

absolute：绝对定位：要将对象从文档中分离出来，若设置left top right bottom这四个方向的位置进行定位

relative：相对定位：和absolute类似将四个方向进行定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
/* position:absolute;
top: 100px;
left: 200px; */
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
position: relative;
left: 200px;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>

position: relative;
left: 200px;对盒子二左边进行200px的距离

width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
 position:absolute;
top: 100px;
left: 200px; 
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
position: relative;
left: 200px;
}

position:absolute;
top: 100px;
left: 200px;对盒子一进行了调整