一、display（元素显示模式）
display属性用来设置元素的显示方式。如果display设置为none，float及position属性定义将生效。
语法：display: block | none | inline | inline-block
1)block：块对象值的是元素显示为一个方块，默认显示状态下将占据整行，其它元素只能另起一行显示。（块元素）
2)inline：行间对象与block刚好相反，它允许其它元素在同一行显示。（内联元素）
3)inline-block：指定对象为内联块元素。可以在同一行的块元素吧。
4)none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.display{width:100px;height:100px;display:inline-block;}
.displayInline1{background-color:red;}
.displayInline2{background-color:green;}
</style>
</head>
<body>
<div class="display displayInline1"></div><div class="display displayInline2"></div><!--注意：两个div代码之间写在同一行，要不然会出现中间会多出空白或者不能在同一行-->
</body>
</html>
二、float（元素的浮动）
用来控制元素是否浮动显示。浮动的时候元素的显示属性也变化了，变为“行内元素”
语法：float: none | left | right
1)left：向左浮动
2)right：向右浮动
3)none：不浮动
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{width:100px;height:100px;}
.floatLeft1{background-color:blue;float:left;}
.floatLeft2{background-color:red;float:left;}
</style>
</head>
<body>
<div class="box floatLeft1"></div>
<div class="box floatLeft2"></div>
</body>
</html>
浮动的目的：
就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示，这时就要利用float属性。
说明：
1.任何声明为float的元素自动被设置为一个“块级元素”。
2.在标准浏览器中，浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该所处的位置。
3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
4.文字内容会围绕在浮动元素周围。
5.浮动元素只能浮动至左侧或者右侧。
清除浮动：
语法：clear: none | left | right | both
1)none：默认值。允许两边都可以有浮动对象。
2)left：不允许左边有浮动对象。
3)right：不允许右边有浮动对象。
4)both：不允许有浮动对象。
三、position（元素的定位）
设置元素定位方式
语法：position: static | absolute | fixed | relative
1)static：无定位，默认值。
2)absolute：绝对定位
3)relative：相对定位
4)fixed：固定定位
absolute说明：
- 脱离文档流
- 通过top，bottom，left，right定位
- 如果父元素position为static时，将以body坐标原点进行定位
- 如果父元素position为relative时，将以父元素进行定位
div{
position:absolute;
left:100px;
top:100px;
}
relative说明：
- 相对定位（相对自己原来的位置而言）
- 不脱离文档流
- 参考自身静态位置通过top，bottom，left，right定位
div{
position:relative;
left:100px;
top:100px;
}
fixed说明：
固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对浏览器窗口而固定，而不是相对于其包含元素；即使页面在滚动了，他们仍然会处在浏览器窗口中跟原来完全一样的地方。
fixed属性可以用来做网页返回顶端按钮
请看右边那个蓝色的东东
这里是fixed固定定位
div{
position:fixed;
right:0;
top:50%
}
z-index（元素的层叠关系）
当元素发生重叠时，可以通过z-index属性，设置其层叠的先后顺序。较大number值的对象会覆盖在较小number值的对象之上。
语法：z-index:auto | number
以下通过调整div的z-index值换颜色：（点击）
红色 蓝色 绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box0{
position: relative;
}
.box{
width: 300px;
height: 150px;
position: absolute;
left: 0;
top: 0;
}
.box1{
background: red;
}
.box2{
background: blue;
}
.box3{
background: green;
}
.input{
z-index: 99;
position: relative;
top: 150px;
}
.radio{
display: none;
}
.radio:nth-of-type(1):checked~.box1{
z-index: 10;
}
.radio:nth-of-type(2):checked~.box2{
z-index: 10;
}
.radio:nth-of-type(3):checked~.box3{
z-index: 10;
}
</style>
</head>
<body>
<div class="box0">
<input type="radio" name="bg" id="bg1" class="radio"/><label for="bg1"class="input">红色</label>
<input type="radio" name="bg" id="bg2" class="radio"/><label for="bg2"class="input">蓝色</label>
<input type="radio" name="bg" id="bg3" class="radio"/><label for="bg3"class="input">绿色</label>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html>