1， 什么是定位
表示元素在网页中的位置
2， CSS中，定位的分类
1， 普通流定位（默认定位方式）
2， 浮动定位（重难点，用的最多）
3， 相对定位
4， 绝对定位
5， 固定定位
3， 普通流定位
普通流定位，又称为“文档流定位”。是默认定位方式。
典型的“流式布局”
特点：
1， 每个元素在页面中都有自己的位置，并占据一定的空间
2， 每个元素都是从其父元素的左上角开始排列的
3， 每个元素基本都是从左到右或从上到下的方式排列
块级元素：从上到下，每个块级元素独占一行
行内元素&行内块元素： 从左到右排列，排列不下会换行
4， 浮动定位
1， 浮动元素的特点
将元素设置为浮动定位，元素将具备以下几个特点：
1， 浮动元素会被排除在文档流之外-脱离文档流，那么元素将不再占据页面空间
2， 剩余未浮动元素会上前占位
3， 浮动定位的元素会停靠在父元素的左边或右边，或其他已浮动元素的边缘上
4， 浮动只能在当前行浮动
5， 浮动解决的问题：让多个块级元素在一行内显示的问题
2， 语法
属性：float
取值：
1， none 默认值，无任何浮动效果
2， left 浮动到父元素左边，或停靠在左边已有浮动元素的边缘
3， right 浮动到父元素的右边，或停靠在右边已有的浮动元素边缘
3， 浮动引发的特殊效果
1， 如果父元素显示不下所有已浮动的元素，则最后一个将换行，但可能会被卡主；
2， 元素一旦浮动起来后，将变为块级元素；(即使是<span>,<a>)
行内元素一旦浮动，就允许修改尺寸；
3， 元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定
主要针对块级元素
4， 文字，图片，行内元素是采用环绕的方式排列，不会被浮动元素压在下面的；
4， 清除浮动
元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在下面。如果元素不想被压在下面
可以通过清除浮动 影响的方式来解决
语法：
属性： clear
取值：
1,none 默认值，不做任何清除浮动的操作
2，left
清除当前元素前面元素左浮动带来的影响，即不会被前面元素浮动而压在地下
3， right
清除前面元素右浮动带来的影响；
4， both
清除前面元素任何一种浮动方式带来的影响
5， 浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以是不占据页面空间的，那么就不占据父元素的空间。
父元素高度是以未浮动子元素高度为准；
解决父元素高度方法：
1， 为父元素设置高度；
弊端：不一定清楚地知道父元素高度；
2， 设置父元素浮动；
弊端： 会对父元素后面的元素产生位置影响；
3， 设置父元素overflow 为hidden或auto
弊端： 如果有溢出，要显示的元素也一同被隐藏了；
4， 在父元素中追加空的块级元素，并设置clear属性为both;
用的最多；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
}
#d1{
background-color:red;
float:left;
}
#d2{
background-color:green;
float:left;
}
#d3{
background-color:blue;
clear:left;
float:left;
}
#d4{
background-color:yellow;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
5， 其他定位
1， 相关属性
1，定位方式
属性：position
取值：
1，static 静态的，默认值
2，relative - 相对定位
3，absolute - 绝对定位
4，fixed - 固定定位
注意：
将元素的position 设置为relative/absolute/fixed 任意一种，那么该元素就被称为已定位元素。
2， 偏移属性（4个）
作用：
配合已定位元素实现位置的移动
属性：
top/right/bottom/left
以元素的上/右/下/左边为基准边移动元素
取值：
以px为单位的数值
各个方向，取值为正的时候，均向里面移动；
如图：
2， 定位方式 - 相对定位
1， 什么是相对定位
元素会相对于它原来的位置偏移某个距离
2， 场合
元素位置微调时使用相对定位
3， 语法：
属性：position
取值：relative
配合偏移位置实现位置的移动
区别于margin, margin移动后，原来的位置会被后续元素占据；position则不会；
代码：
3， 定位方式 - 绝对定位(难点)
1， 概念&特点
1，绝对定位的元素会脱离文档流-不占页面空间；
2，绝对定位的元素会相对于离它最近的，已定位的，父级元素(不限层级)去实现位置的初始化。
3，如果元素没有已定位的父级元素，那么元素将相对于body去实现位置的初始化。
使用场景：
有元素堆叠效果的地方；
菜单弹出框
2，语法：
属性： position
取值： absolute
3， 注意
绝对定位的元素会变为块级元素
任何元素变成绝对定位的话，就可以直接修改尺寸；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width:600px;
height:600px;
background:red;
float:right;
position:relative;
}
#d2{
width:400px;
height:400px;
background:yellow;
position:absolute;
bottom:0px;
right:0px;
}
#d3{
width:200px;
height:200px;
background:blue;
position:absolute;
bottom:0px;
left:0px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
</body>
</html>
4， 堆叠顺序
1， 什么是堆叠顺序
已定位元素们，对接在一起的排列显示顺序
2， 语法
属性：z-index
取值：无单位的数字， 数字越大越靠上面
默认值： 0
3， 注意
1，如果元素的堆叠顺序相同，则后来者居上
2，只有已定位元素才可以使用z-index
relative/absolute/fixed
3， 父子元素之间，永远都是子压在父上，不受堆叠顺序影响；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height:300px;
position:absolute;
}
#d1{
background:red;
}
#d2{
background:green;
top:40px;
left:40px;
}
#d3{
background:blue;
top:80px;
left:80px;
}
#d1:hover,#d2:hover,#d3:hover{
z-index:10;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
5， 定位方式 - 固定定位
1，什么是固定定位
让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的变化；
2，语法
属性：position
取值：fixed
配合着偏移属性，实现元素位置的固定，
3， 注意：
1， 固定定位的元素，永远都是相对于body实现位置初始化的。
2， 固定定位的元素也会变为块级元素， 直接放在body中。
#rMenu{
width:20px;
height:200px;
background:pink;
position:fixed;
right:0px;
top:200px;
}
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
