CSS05：浮动和定位
浮动
display
块元素默认独占一行，有高度和宽度；而行内元素没有高度和宽度，不能独占一行
display属性可以转换元素类型，是实现行内元素排列的一种方式，但是方向不可控，更多是使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*display：以块还是行内元素来显示
block：将行内元素转为块元素
inline：将块元素转为行内元素
inline-block：同时具有块元素和行内元素的特征，是块元素但是内联在一行（用于列表在一行显示）
none：不显示（可用于去广告）
*/
.div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
.span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div class="div">div元素</div>
<span class="span">span行内元素</span>
</body>
</html>
float和clear
float属性可以让块元素浮动起来，在一行显示多个div元素，但是浮动起来的元素会随其他浮动改变位置，会造成父级边框塌陷
clear属性可以让浮动的左右不存在其他浮动，互不干扰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
.image{
border: 1px solid;
}
/*float：浮动
left：居左浮动
right：居右浮动
*/
.layout01{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
.layout02{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
.layout03{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
/*clear：清除浮动
both：左右都不允许有浮动
left：不允许左边有浮动
right：不允许右边有浮动
*/
.title{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="image">
<div class="layout01"><img src="./万叶.jpg" alt=""></div>
<div class="layout02"><img src="./万叶副本.jpg" alt=""></div>
<div class="layout03"><img src="./万叶副本.jpg" alt=""></div>
<div class="title">浮动与定位</div>
</div>
</body>
</html>
父级边框塌陷
父级元素不设置高度时，随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，高度降为0，即产生边框塌陷
四种解决方法：增加父级元素高度、添加一个空的div标签、父级元素添加属性overflow: hidden、添加父级伪类:after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*方法一：增加父级元素高度（不推荐）*/
/*方法三：父级元素添加属性overflow: hidden
hidden：可以隐藏溢出的文本、可以避免浮动造成的父级边框塌陷
scroll：溢出的内容可以用滚动条显示
*/
.image{
border: 1px solid;
/*height: 1000px;*/
/*overflow: hidden;*/
}
/*方法二：添加一个空的div标签，设置外边距为0，清除左右浮动*/
/*.clear{*/
/* margin: 0;*/
/* padding: 0;*/
/* clear: both;*/
/*}*/
/*方法四：添加父级伪类:after*/
.image:after{
content: '';
display: block;
clear: both;
}
.layout01{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
.layout02{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
.layout03{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
.title{
border: 1px dashed red;
display: inline-block;
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="image">
<div class="layout01"><img src="./万叶.jpg" alt=""></div>
<div class="layout02"><img src="./万叶副本.jpg" alt=""></div>
<div class="layout03"><img src="./万叶副本.jpg" alt=""></div>
<div class="title">浮动与定位</div>
<!--添加一个空的div标签-->
<div class="clear"></div>
</div>
</body>
</html>
定位
相对定位
position: relative，基于原来的位置进行偏移（仍然在标准流中，原来的位置会被保留）
top、bottom、left、right，值为正数时表示远离对应方向的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#father{
border: 2px solid red;
width: 300px;
height: 300px;
padding: 10px;
}
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: rgb(253, 153, 253);
}
a{
text-decoration: none;
color: white;
}
.box:hover{
background: blue;
}
#first, #forth{
float: left;
}
#second, #fifth{
float: right;
}
/*position: relative，相对定位*/
#third{
clear: both;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div id="father">
<div class="box" id="first"><a href="">链接1</a></div>
<div class="box" id="second"><a href="">链接2</a></div>
<div class="box" id="third"><a href="">链接3</a></div>
<div class="box" id="forth"><a href="">链接4</a></div>
<div class="box" id="fifth"><a href="">链接5</a></div>
</div>
</body>
</html>
绝对定位
position: absolute，有两种情况：（脱离标准流，原来的位置不会被保留）
1、如果父级元素没有定位，则相对于浏览器偏移
2、否则相对于父级定位偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#father{
border: 2px solid red;
width: 300px;
height: 300px;
padding: 10px;
position: relative;
}
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: rgb(253, 153, 253);
}
a{
text-decoration: none;
color: white;
}
.box:hover{
background: blue;
}
/*相对定位*/
.box:nth-of-type(1){
position: relative;
left: 50px;
}
/*绝对定位，相对于父级定位偏移*/
.box:nth-of-type(2){
position: absolute;
right: 50px;
}
/*绝对定位，相对于浏览器偏移*/
#no-father{
position: absolute;
right: 50px;
}
</style>
</head>
<body>
<div id="father">
<div class="box"><a href="">链接1</a></div>
<div class="box"><a href="">链接2</a></div>
<div class="box"><a href="">链接3</a></div>
</div>
<div class="box" id="no-father"><a href="">链接4</a></div>
</body>
</html>
固定定位
position: fixed，基于浏览器固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#father{
border: 2px solid red;
width: 1500px;
height: 1000px;
}
.box{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: rgb(253, 153, 253);
}
a{
text-decoration: none;
color: white;
}
.box:hover{
background: blue;
}
/*绝对定位相对于父级*/
.box:nth-of-type(1){
position: absolute;
right: 0;
bottom: 0;
}
/*固定定位*/
.box:nth-of-type(2){
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="father">
<div class="box"><a href="">绝对定位</a></div>
<div class="box"><a href="">固定定位</a></div>
</div>
</body>
</html>
z-index
z-index 属性是用来调整元素及子元素在 z 轴图层上的顺序，值越大越上层
前提：元素必须有定位才能使用z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#father{
border: 2px solid red;
width: 300px;
height: 300px;
}
/*z-index：图层排列顺序，值越大越上层*/
.text{
color: red;
position: relative;
z-index: 1;
}
/*opacity：透明度*/
.bg{
width: 196px;
height: 20px;
background-color: black;
opacity: 0.5;
position: relative;
top: -20px;
}
</style>
</head>
<body>
<div id="father">
<div class="image"><img src="万叶.jpg" alt=""></div>
<div class="text">枫原万叶</div>
<div class="bg"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号