定位(重难点)
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, 文字,图片,行内元素是采用环绕的方式排列,不会被浮动元素压在下面的;
浮动定位练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 练习浮动布局 */
/* 设置外围div */
#main{
width:990px;
height:540px;
border:1px solid #000;
margin:auto;
}
/* 对所有div设置宽度190,高度250,颜色,上下外边距 */
#d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d0{
width:190px;
height:250px;
background-color:pink;
margin-top:10px;
margin-bottom:10px;
}
/* 第一行的5个 */
/* 设置右对齐 */
#d1{
float:right;
}
/* 4个左对齐 */
#d2,#d3,#d4,#d5{
float:left;
margin-right:10px;
}
/* 第二行的5个 */
/* 设置右对齐 */
#d6{
float:right;
}
/* 4个左对齐 */
#d7,#d8,#d9,#d0{
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div id="main">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
<div id="d0"></div>
</div>
</body>
</html>
4, 清除浮动
元素一旦浮动起来之后,后面的元素要上前占位,有可能被浮动元素压在下面。如果元素不想被压在下面
可以通过清除浮动 影响的方式来解决
语法:
属性: clear
取值:
1,none 默认值,不做任何清除浮动的操作
2,left
清除当前元素前面元素左浮动带来的影响,即不会被前面元素浮动而压在地下
3, right
清除前面元素右浮动带来的影响;
4, both
清除前面元素任何一种浮动方式带来的影响
5, 浮动元素对父元素高度的影响
由于浮动元素会脱离文档流,所以是不占据页面空间的,那么就不占据父元素的空间。
父元素高度是以未浮动子元素高度为准;
解决父元素高度方法:
1, 为父元素设置高度;
弊端:不一定清楚地知道父元素高度;
2, 设置父元素浮动;
弊端: 会对父元素后面的元素产生位置影响;
3, 设置父元素overflow 为hidden或auto
弊端: 如果有溢出,要显示的元素也一同被隐藏了;
4, 在父元素中追加空的块级元素,并设置clear属性为both;
用的最多;
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则不会;
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
width:100px;
height:30px;
background-color: pink;
float:left;
margin-right: 10px;
}
/* 使用相对位置实现; */
li:hover{
position:relative;
right:10px;
bottom:10px;
}
/* 使用margin实现,移动后原位置会被后续元素占据; */
/* li:hover{
margin-top:-10px;
margin-left:-10px;
} */
</style>
</head>
<body>
<ul>
<li>东皇太一</li>
<li>东皇太一</li>
<li>东皇太一</li>
<li>东皇太一</li>
</ul>
</body>
</html>
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;
}