4.4圆角边框
圆角边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
?
4.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
推荐网站：模板之家 vue-element-admin 飞冰（阿里）
5浮动
5.1标准文档流
块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong ...
行内元素可以 包含在块级元素中，反之，则不可以
5.2 display
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3float
1.左右浮动float
div{
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
clear: both;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: right;
clear: both;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float:right;
clear: both;
}
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: both;
?
}
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/2.jpg" alt=""></div>
<div class="layer02"><img src="images/3.jpg" alt=""></div>
<div class="layer03"><img src="images/5.jpg." alt=""></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含区域另一个浮动盒子为止</div>
?
</div>
?
</body>
</html>
5.4父级边框塌陷的问题
clear:
解决方案：
1.增加父级元素的高度
#father {
border: 1px #000 solid;
height: 2800px;
}
2.增加一个空的div 标签，清楚浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/2.jpg" alt=""></div>
<div class="layer02"><img src="images/3.jpg" alt=""></div>
<div class="layer03"><img src="images/5.jpg." alt=""></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含区域另一个浮动盒子为止</div>
?
<div>class="clear"</div>
?
</div>
?
</body>
</html>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.overflow
在父级元素中增加一个overflow:hidden (里面没有高度是被内容元素所覆盖的，最后的高度是根据内容元素来的)
4.父类中添加一个伪类：after
#father:after{
content: ‘‘;
display: block;
clear: both;
?
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类中添加一个伪类：after（推荐使用）
写法稍微复杂一点，但是没有副作用，推荐使用
5.5对比
display：
方向不可以控制
float:
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6定位
默认情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
?
}
#first{
background-color: #9e1818;
border: 1px dashed #e03f3f;
?
}
#second{
background-color: #bdd412;
border: 1px dashed #9aa833;
?
}
#third{
background-color: #e78d07;
border: 1px dashed #de9322;
?
}
</style>
?
?
?
?
?
</head>
<body>
?
?
?
?
?
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
?
?
?
?
</div>
?
</body>
</html>
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
相对定位：position :relative;
相对于原来的位置，进行指定的偏移,相对定位的话，它任然在标准文档流中，原来的位置会被保留。
top:-20px;
left: 20px;
bottom: -20px;
right: 20px;
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: #b470b4;
line-height: 100px;
text-align: center;
color: white;
6.2绝对定位
定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
?
}
#first{
background-color: #9e1818;
border: 1px dashed #e03f3f;
?
}
#second{
background-color: #bdd412;
border: 1px dashed #9aa833;
position: absolute;
left: 100px;
?
}
#third{
background-color: #e78d07;
border: 1px dashed #de9322;
?
}
</style>
?
</head>
<body>
?
?
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
?
</body>
</html>
6.3固定定位fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
?
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
6.4 z-index
图层
z-index:默认是0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
?
?
?
?
</head>
<body>
<div id="content">
<ul>
<li><img src="images/2.jpg" alt=""></li>
<li class="tipText">学习微服务，找狂神</li>
<li class="tipBg"></li>
<li>时间:2099-01-02</li>
<li>地点:1022星球一号基地</li>
</ul>
</div>
</body>
</html>
opacity: 0.3;背景透明度
#content{
width: 1000px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
第50天学习打卡（CSS 圆角边框 盒子阴影 定位）
原文：https://www.cnblogs.com/doudoutj/p/14457029.html
