盒子布局
<div>加上css进行布局
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
border: 1px solid black;
}
#box2{
width: 50px;
height: 50px;
border: 1px solid red;
margin: 0 auto;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
显示如下
浮动布局
在css中通过设置float属性进行的布局
none 不浮动
left 左浮动,会对后面的元素产生影响
right 右浮动
浮动布局的时候,左浮动会造成后面元素的布局错乱的现象
所以得在css中加入clear(清除浮动)
clear可以取
none 默认,允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
border: 1px solid black;
}
#box2{
width: 50px;
height: 50px;
float: left;
border: 1px solid red;
}
#box3{
width: 50px;
height: 50px;
float: right;
border: 1px solid red;
}
#box4{
width: 50px;
height: 50px;
float: none;
border: 1px solid red;
background-color: red;
clear: right;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">左浮动</div>
<div id="box3">右浮动</div>
<div id="box4">不浮动</div>
</div>
</body>
</html>
显示效果
如果不清除浮动效果如下
下面红色盒子跑上面去了,与左浮动重合,所以要加入清除浮动效果
定位布局
属性:position
static(默认值) 静态定位 ------- 根据每个元素的默认值
absolute ------ 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位此时对象不具有边距,但仍有补白和边框
relative ------- 相对定位:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed -------生成绝对定位的元素,相对于浏览器窗口进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
position: fixed;
top: 300px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">这是一个div</div>
<div class="box1">这是一个div</div>
<div class="box2">这是一个div</div>
<div class="box3">这是一个div</div>
</div>
</body>
</html>