浮动 即是脱离文档流。它有三大属性:1、position属性,2、display属性,3、float属性。
Position:定位 display:转为块级元素 float:设计浮动。
其中
Position中又可以分为static(默认)、absolute(绝对定位)、relative(相对定位)、fixed(固定定位)这四个属性。
Display中有block(块级元素)、inline-block(行内块级元素)等属性。
Float元素中可以被清除(clear-float)可清除浮动,可以为左右浮动(left,right)。
例如:浮动中:如果不设置display,元素就算是设置了样式也不显示。
HTML部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<div class="sowhat">
<span></span>
</div>
</body>
</html>
Css样式
@charset "utf-8";
/* CSS Document */
*{
padding: 0;
margin: 0;
}
.sowhat span{
width: 200px;
height: 200px;
background: #F402A7;
margin: 1px auto;
}
显示的结果:前面我给span标签设置了一个紫色的背景颜色,但是没有显示出来
上面的是一张图片来的,只不过没有设置display这个属性,所以一片空白,我再加上一句代码,就可以把它显示出来,这句代码就是:
display:block;
显示结果:看,它就显示出来了
Position中,想让你要设置的盒子或者元素通过某种方式去设置,那么可以用到定位,而这个定位也可以有几种方式。举个简单的例子:
HTML部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<div class="sowhat">
<span></span>
</div>
<div class="sowhat1">
<span></span>
</div>
</body>
</html>
Css部分
@charset "utf-8";
/* CSS Document */
*{
padding: 0;
margin: 0;
}
.sowhat span{
display: block;
width: 200px;
height: 50px;
background: #F402A7;
margin: 1px auto;
/* position: relative;*/
}
.sowhat1 span{
display: block;
width: 200px;
height: 50px;
background:#F93C07;
margin: 1px auto;
/* position: absolute;*/
}
我先把浮动的设置给注释掉,然后出来的样式:
然后把前面注释的去掉,出来的效果:
它就会根据紫色的那个盒子进行定位。
Float中
HTML部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动与定位</title>
<link rel="stylesheet" href="css/fdtdw.css">
</head>
<body>
<ul class="sowhat">
<li>像</li>
<li>蜗</li>
<li>牛</li>
<li>攀</li>
<li>登</li>
</ul>
</body>
</html>
Css部分
@charset "utf-8";
/* CSS Document */
*{
padding: 0;
margin: 0;
}
.sowhat li{
display: block;
font-size: 28px;
color:#1301F8;
list-style: none;
/* float: left;*/
font-family: 华文新魏
}
显示的效果:把浮动注释之前
把注释去掉之后
还可以设置为右浮动,可以自己动手试试。