CSS浮动属性简介
- CSS float 属性是一个定位属性,用于使元素脱离正常的文档流,并浮动在它的父容器的左侧或右侧
- loat 设置元素在水平方向浮动,意味着元素只能左右浮动而不能上下浮动
- float 属性的常用值包括:
- left 靠左浮动
- right 靠右浮动
- none 不浮动
CSS左右浮动
HTML 正常文档流
<style type="text/css">
div{
width:100px;
height:50px;
line-height: 50px;
text-align: center;
margin:10px;
}
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
}
.box-3 {
border: 3px solid green;
}
</style>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div
运行结果: 块级元素,每个div独占一行
CSS靠左浮动
<style type="text/css">
div{
width:100px;
height:50px;
line-height: 50px;
text-align: center;
margin:10px;
float:left;
}
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
}
.box-3 {
border: 3px solid green;
}
</style>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
运行结果: 有 div 排列在一行(靠左浮动)
CSS清除浮动
<style type="text/css">
div{
width:100px;
height:50px;
line-height: 50px;
text-align: center;
margin:10px;
float:left;
}
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
}
.box-3 {
border: 3px solid green;
clear:both;
}
</style>
运行结果: 第3个box不再靠左浮动
CSS定位属性简介
- CSS 中 position 规定了元素的定位方式
- CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局,从而使元素可以显示在任意位置
- position 属性的可选值包括:
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- static 默认值
CSS相对定位
HTML 正常文档流
<style type="text/css">
div{
width:100px;
height:50px;
line-height: 50px;
text-align: center;
margin:10px;
float:left;
}
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
}
.box-3 {
border: 3px solid green;
clear:both;
}
</style>
运行结果: 块级元素,每个div独占一行
CSS 相对定位
不脱离文档流布局,只改变自身的位置,文档流原位置遗留空白区域,定位的起始位置为此元素原文档流的位置
<style type="text/css">
…
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
position: relative;
top:20px;
left:30px;
}
</style>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
运行结果:
CSS绝对定位
HTML正常文档流:
<style type="text/css">
…
.box-1 {
border: 3px solid red;
}
.box-2 {
border: 3px solid blue;
}
.box-3 {
border: 3px solid green;
}
</style>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
运行结果: 块级元素,每个div独占一行
CSS 绝对定位
脱离文档流布局,遗留下来的空间由后面的元素填充,定位的起始位置为最近的父元素(position不为static),否则为Body文档本身
<style type="text/css">
…
.box-2 {
border: 3px solid blue;
position: absolute;
top:40px;
left:50px;
}
…
</style>
<body>
<div class="box-1">Box-1</div>
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>
</body>
运行结果: