版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1.课堂实例：盒子间的嵌套¶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子嵌套</title>
<style>
*
{
margin: 0;
padding: 0;
}
div
{
text-align: center;
}
.up
{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.down
{
width: 300px;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up">
盒子1
</div>
<div class="down">
盒子2
</div>
</body>
</html>
效果截图：
2.作业：盒子一行排列
方法1：利用display: inline-block;¶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动之display法</title>
<style>
*
{
margin: 0;
padding: 0;
}
div
{
display: inline-block;
text-align: center;
line-height: 200px;
}
.father
{
width: 200px;
height: 200px;
background-color: pink;
/*border-bottom: 1px solid black;*/
}
.son
{
width: 200px;
height: 200px;
background-color: red;
margin-left: -5px;
/*加上这一行之后，两个盒子之间就没有间隙了*/
}
</style>
</head>
<body>
<div class="father">
Happy
</div>
<div class="son">
Study
</div>
</body>
</html>
效果截图：
方法2：利用float浮动特性¶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>体会浮动2019年9月16号——周一</title>
<style>
div
{
height: 200px;
width: 200px;
text-align: center;
/*盒子里面的文字放在水平中央*/
line-height: 200px;
/*盒子里面的内容垂直居中*/
transition: all ls;
/*慢慢的浮动出来*/
}
.a1
{
background-color: pink;
float:left;
}
.a2
{
background-color: yellow;
float:left;
}
.a3
{
background-color: green;
float:left;
}
.a4
{
background-color: blue;
float:right;
}
div:hover
{
background-color: #eee;
box-shadow: 2px 15px 30px rgba(0,0,0,0.5);
/*盒子的阴影：水平阴影、垂直阴影、阴影模糊值、阴影外延值、阴影颜色*/
/*rgba的最后一个参数是代表：透明度，取值范围是0——1之间*/
}
</style>
</head>
<body>
<div class="a1">box1</div>
<div class="a2">box2</div>
<div class="a3">box3</div>
<div class="a4">box4</div>
</body>
</html>效果gif如下：
