盒子浮动float
Float 属性：
默认是none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float none</title>
<style type="text/css">
.parent{
padding:5px;
background-color: yellow;
border: 1px solid red;
}
.d1{
float:none;
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
margin:5px;
background-color: blue;
border: 1px solid blue;
}
p{
margin:5px;
background-color: green;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
<div class="d1">盒子A</div>
<div class="d2">盒子B</div>
<p>xxx</p>
</div>
</body>
</html>默认是none ，按照标准流来定位
Left：左悬浮；
Right：右悬浮；
盒子A和盒子B 左右浮动
使用clear 清除浮动的影响
Clear 属性：
默认是none，允许两边都可以有浮动对象；就像上面的例子一样，两边都可以有浮动，比如说在上面例子的<p> 标签中加入clear:none;，那么测试结果和之前的并没有差别，左右两边依然是可以浮动的
Left： 不允许左边有浮动对象
修改为左边不允许浮动，并且增加右边的高度，可以看得更加清楚
最后的结果
Right：不允许右边有浮动对象
将上面红框中的属性进行替换clear:right;，并且增加左侧方块的高度
最后的实验结果
Both：不允许有浮动对象
盒子定位position
Position 属性：
默认是static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；
Fixed：固定定位，以浏览器窗口为基准进行定位；
z-index 空间位置
Z-index 空间位置，默认是0，z-index 值大的页面位于其值小的上方；
<html>
<head>
<meta charset="UTF-8">
<title>z-index空间位置</title>
<style type="text/css">
img{
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>图片</h1>
<h1>图片</h1><h1>图片</h1><h1>图片</h1><h1>图片</h1>
<img src="../pic.jpg"/>
</body>
</html>设置z-index: x;即可
盒子display 属性
Display：
Inline：把元素变成内联元素；
Block：把元素变成块级元素；
4169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
