CSS3——浮动和定位
定义
定义元素框相对于其正常位置应该出现的位置
分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
浮动定位指
将元素排除在普通流之外
元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
行内元素浮动后会变为块级元素
语法：float:none/left/right;
当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边框碰到包含框的左边缘
包含框中有三个元素，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边框碰到包含框的右边框
如果把三个框都向左移动，那么框1向左浮动直到遇到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框在同一行显示
如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间（左图），如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素卡住（右图）
CSS 清除浮动：
描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。
属性：clear
值：left、right、both
清除浮动的常用方式：
1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
2.浮动元素的父级div定义 伪元素::after
3.浮动元素的父级div定义 overflow:hidden
4.浮动元素的父元素定高
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。
块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。
display常见属性值
- none：隐藏对象
- inline：指定对象为内联元素
- block：指定对象为块元素
- inline-block：指定对象为内联块元素，行内块元素，即在同一行显示，又可以设置宽高，margin和padding可以设置四周（注意：识别代码之间的空白）
- table-cell：指定对象作为表格单元格
- flex：弹性盒
visibility:hidden和display:none和opacity:0的区别：
1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在
2.display:none 影藏元素，不保留物理空间
position定位
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
position定位
1.静态定位static
对偏移量不起作用。一般应用于去除定位
2.relative相对定位(自恋型)
相对于自己来偏移位置（相对于原来左上角的基点来便偏移）
通过便偏移来移动位置，但是原来所占的位置 继续占有
3.absolute绝对定位
相对于整个浏览器来边偏移
如果发生边偏移，那么它不在占有空间
4.fixed固定定位
网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。
z-index堆叠顺序
一旦修改了元素的定位方式，则元素可能会发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序
z-index仅能在定位的元素上生效
z-index属性：
值为数值，数值越大表示堆叠顺序越高，即离用户越近
可以设置为负值，表示离用户更远 ，一般不要设置
Z-index 仅能在定位元素上奏效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>堆叠顺序</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;/*绝对定位*/
}
div:first-child{
z-index: 1;
}
div:nth-child(2){
background-color: orange;
left: 30px;
top: 30px;
z-index: 2;
}
div:last-child{
background-color: skyblue;
left: 60px;
top: 60px;
z-index: 10;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
居中总结
1.内容水平居中
text-align:center
2.一行文字垂直居中
line-height=height
3.盒子水平居中
例子 ：
div{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
4.子元素在父元素中居中
1)弹性盒子
2)table-cell
3)绝对定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>居中总结</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>