浮动和定位
4.1标准文档流
快级元素：独占一行
h1~h6 p div 列表
行内元素
span a img strong
行内元素可以被包含在快级元素中，反之则不行
4.2 display
<style>
/*
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 yellow;
display: block;
}
</style>
4.3 float
div{
margin: 10px;
padding: 5px;
}
.father{
border: 1px solid red;
}
.lay01{
border:1px dashed yellow;
display: inline-block;
float: left;
}
.lay02{
border:1px dashed #00f;
display: inline-block;
float: left;
}
.lay03{
border:1px #060 dashed;
display: inline-block;
float: left;
}
.lay04{
border:1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="father">
<div class="lay01"><img src="images/7b5a2e7106b446a128867def60f2396.png" alt=""></div>
<div class="lay02"><img src="images/1578d3d603227fc0a8032ad56d3ca46.png" alt=""></div>
<div class="lay03"><img src="images/f00b6f9124eacef11086bbfbaa7df94.png" alt=""></div>
<div class="lay04">浮动的盒子可以向左浮动，也可以向右浮动</div>
</div>
</body>
4.4 父级文档流塌陷的问题
clear
/*
clear:right 右侧不允许浮动
clear:left 左侧不允许浮动
clear:both 两侧不允许浮动
clear:none
*/
解决方案
1.增加父级元素的高度
.father{
border: 1px solid red;
height: 800px;
}
2.增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
margin: 0;
padding: 0;
clear: both;
}
3.overflow
在父级元素中增加一个overflow:hidden
4.在父类中添加一个伪类
.father:after{
content:'';
display: block;
clear: both;
}
小结：
1.浮动元素中增加一个空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类:after（推荐）
没有副作用，推荐使用
4.5 display和float
display
方向不可以控制
float
浮动起来的会脱离标准文档流，所以要解决父级边框塌陷的问题
5定位
5.1相对定位
position: relative;
方块练习
<style>
#box{
padding: 20px;
border: 1px solid red;
width: 300px;
height: 300px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background-color: rgba(183, 0, 255, 0.99);
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #47a4ff;
}
#a2{
position: relative;
left: 200px;
top:-100px
}
#a5{
position: relative;
left:200px;
top:-200px;
}
#a4{
position: relative;
left:100px;
top:-200px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
</div>
</body>
5.2 绝对定位
定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行定位的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
background-color: #a13d;
border: 1px dashed #b27;
}
#second{
background-color: #255099;
border: 1px dashed #255066;
position: absolute;
right:30px;
}
#third{
background-color: #1c6699;
border:1px dashed #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第一个盒子</div>
<div id="third">第一个盒子</div>
</div>
</body>
5.3 固定定位
<style>
body{
height: 900px;
}
div:nth-of-type(1){/*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right:0;
bottom: 0;
}
div:nth-of-type(2){/*fixed,固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right:0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
z-index:默认是0，最高无限制
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/01.png" alt=""></li>
<li class="tipText">学习微服务</li>
<li class="tipBg"></li>
<li>时间</li>
</ul>
</div>
</body>
#content{
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000000;
width: 300px;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
/*父级元素*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 300px;
height: 25px;
top: 124px;
color: white;
}
.tipBg{
background: black;
opacity: 0.5;/*背景透明度*/
}
.tipText{
/*z-index: 990;*/
}
