4.3内外边距
margin外边距
padding内边距
用法相同，如果设置一个值，代表上下左右边距，如果设置两个值代表上下 左右；如果设置4个值代表上 右 下 左，其中也可以设置auto，表示居中
4.4.圆角边框
4个角
border-bordius设置边框圆角，如果设置一个值，代表上下左右圆角，如果设置两个值，代表左上 右上 右下 左下，顺时针旋转
<style>
div{
width: 100px;
height:50px;
border: 10px solid red;
border-radius: 50px 50px 0px 0px;
}
</style>
4.5.阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div{*/
/* width: 100px;*/
/* height:50px;*/
/* border: 10px solid red;*/
/* border-radius: 50px 50px 50px 50px;*/
/* box-shadow: 10px 10px 100px yellow;*/
/*}*/
/*要求：块元素有固定的宽度*/
img{
width: 100px;
height:100px;
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width:500px;height: 1000px;margin:0 auto">
<div >
<img src="images/图片.jfif" alt="">
</div>
</div>
</body>
</html>
浮动
1.标准文档流
块级元素：
h1~h6 p div 列表.......
行内元素：
span a img strong......
行内元素可以被包含在块级元素中，反之，则不可以
2.display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!-- block:块元素；*/
/* inline：行内元素*/
/* inlin-block:两者都是*/
/* none消除外边-->*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display:inline-block ;
}
</style>
</head>
<body>
<div> div块元素</div>
<span>span行内元素</span>
</body>
</html>
3.浮动
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float:right;
}
.layer02{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: both;
}
/*
clear:right 右侧不允许有浮动元素
clear：left 左侧不允许有浮动元素
clear：both 两侧不允许有浮动元素
clear：none
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/图片.jfif" alt=""></div>
<div class="layer02"> gdyuguygsuycgdsifuwgfuywgfsgsdfs</div>
</div>
</body>
</html>
5.4父级边框塌陷的问题
解决方案
1.增加父级元素的高度
2.增加一个空的div标签，清除浮动
3.overflow
在父级元素中增加一个overflow:hidden;（与overflow:auto类似，不过尽量用hidden）
hidden值的两种不同情况
/*div边框会随着内容的增加而变大，从而永久的包括内容*/
#father{
border: 1px #000 solid;
overflow: scroll;
}
/*overflow属性值设置为scroll时，会形成一个滚动栏；当设置为hidden时会隐藏包不住的部分，此时图片已经浮动*/
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float:right;
}
.layer02{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: both;
}
/*
clear:right 右侧不允许有浮动元素
clear：left 左侧不允许有浮动元素
clear：both 两侧不允许有浮动元素
clear：none
*/
4.给父类添加一个伪类：after
#father:after{
content:"";
display:block;
clear:both;来清除div边框塌陷，避免空div
}
小结
1.浮动元素后加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使
4.父类添加一个伪类：after（推荐）
写法稍微有点复杂，但没有副作用，推荐使用
5.5.对比
1.display
方向不可控制
2.float
浮动起来的话就会脱离标准文档流，所以要解决父级边框塌陷的问题
定位
1.相对定位
相对定位：position:relative
相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置会被保留。
<!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{
padding: 0;
border: 1px solid #666;
border-radius: 20px;
}
/*#father:after {*/
/* content: "";*/
/* display: block;*/
/* clear: both;*/
/*}*/
#first{
background-color: #b5c1cd;
border: 3px dashed #f8e5a4;
border-radius: 20px;
position: relative;/* 相对定位：上下左右*/
top: -20px;
}
#second{
background-color: #37ff66;
border: 3px dashed #FF0000;
border-radius: 20px;
position: relative;
left: 20px;
}
#third{
background-color: #3748ff;
border:3px dashed #FF0000;
border-radius: 20px;
position: relative;
bottom: -30px;
/*float: right;*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位的方块定位练习题
<!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: #37ff66;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #FF0000;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
top: -300px;
left:100px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
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{
padding: 0;
border: 1px solid #666;
position: relative;
}
/*#father:after {*/
/* content: "";*/
/* display: block;*/
/* clear: both;*/
/*}*/
#first{
background-color: #b5c1cd;
border: 3px dashed #f8e5a4;
border-radius: 20px;
}
#second{
background-color: #37ff66;
border: 3px dashed #FF0000;
position: absolute;
right: 30px;
}
#third{
background-color: #3748ff;
border:3px dashed #FF0000;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
3.固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*绝对定位*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
4.z-index
#content{
width: 260px;
padding:0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid red;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tixText,.tipBg{
position: absolute;
width: 260px;
height: 25px;
top: 129px;
}
.tixText{
color: white;
/*z-index:999;*/
}
.tipBg{
background: black;
opacity: 0.3;
}
/*可以使用z-index层级属性来实现在黑色背景上写字；也可以使用opacity:0.3属性来增强透明度*/
<!DOCTYPE html>标签：clear,元素,100px,height,div,Day04,border From： https://www.cnblogs.com/xclxcl/p/16767400.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/美女.png" alt=""></li>
<li class="tixText">学习微服务，找u昂神</li>
<li class="tipBg"></li>
<li>时间：2099-01-01</li>
<li>地点：月球一号基地</li>
</ul>
</div>
</body>
</html>