盒子：
在html中所有的标签(元素)都可以看作是一个盒子
盒子的四要素：内容、内边距（padding）、盒子厚度（border）、外边距（margin）
注：1. 在使用盒子时，margin要素有一定的弊端（也就是margin塌陷）。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin塌陷</title>
<style type="text/css">
#person{
background-color:pink;
width:500px;
height: 500px;
}
#sun{
background-color: skyblue;
width:200px;
height: 200px;
margin-top:50px;
}
</style>
</head>
<body>
<div id="person">
<div id="sun"></div>
</div>
</body>
</html>margin塌陷：就是在设置子元素margin-top时父元素跟着下来
解决方法：
1. 为父盒子设置边框，例：border：1px solid black; <!--边框大小1像素，样式实线，颜色黑色-->
2. 为父盒子设置内边距，例：padding-top: 50px;
3. 为父盒子设置overflow: hidden;子盒子设置margin-top:50px; <!--overflow: hidden;意为溢出隐藏，超出自身区域的地方 不显示，推荐使用-->
注：2.内联元素不推荐设置内边距（padding）的上下值，因为设置了也无效，内联元素根据内容多大，盒子多大。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联元素</title>
<style type="text/css">
#outer{
display:inline;
/*background-color: pink;
border: 1px solid black;*/
/*这里请不要为了让他体现出来加上背景和边框*/
width:400px;
height: 400px;
}
#inward{
background-color: skyblue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inward">
</div>
</div>
</body>
</html>这里的outer里的大小并没有400*400px，因为内容只有200*200px ，所以outer的大小也只有200*200，上面代码中不加背景和边框，是因为他们自带样式会加大原来盒子大小
盒子的特性：独占一行，属性与id（#）选择器和，class（.）选择器使用
<div></div>一般案例：
显示如下图形，如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#tree{
width:0 ;
height: 0;/*这里不写的话，div独占一行的特性*/
border-top:50px solid green ;/*上边的厚度50，绿色*/
border-right:50px solid red ;/*右边的厚度50，红色*/
border-bottom:50px solid blanchedalmond ;/*下边的厚度50，绿色*/
border-left:50px solid blue ;/*左边的厚度50，蓝色*/
}
</style>
</head>
<body>
<div id="tree"></div>
</body>
</html>
注意：这里设置像素大小px最好不要掉，争对不同浏览器
float(浮动)
生活中的浮动：想像一下盒子的浮动，没有浮动的盒子是沉浸在水下的，浮动的盒子是漂在水上的，页面上的是从上往下漂，也就是页面顶部就终点，不管是漂在水上的，还是沉浸在水下的，他们都会到达终点（最先到达的会占用他的地方，依次），只是先后的问题
为什么用浮动：兄弟关系的盒子，也就是多个块状元素实现并列一行显示
浮动原理：
所有浮动元素受父盒子影响，设置了左浮动的元素，先找父亲的左边缘，若遇到浮动的元素，就靠着浮动元素排列 ，设置浮动的元素不独占一行
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
#person{
background-color: pink;
width:600px;
height: 600px;
}
#sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
#sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div id="person">
<div id="sun1"></div>
<div id="sun2"></div>
</div>
</body>
</html>清除浮动：
为什么要清除周边元素的浮动：用于撑起父元素的高度
方法一：clear:both;
给设置了浮动元素的最下面添加一个清除浮动的元素，该元素属于正常文档流中的内容，它会紧靠着设置浮动元素的最底边缘，也称为额外标签法。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
}
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
.sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
.clear{/*清除浮动，*/
clear:both;
}
</style>
</head>
<body>
<div class="person">
<div class="sun1"></div>
<div class="sun2"></div>
<div class="sun1"></div>
<div class="clear"></div>
</div>
</body>
</html>注： clear:both;清除浮动不推荐使用，且只能放在有浮动元素的父盒里
方法二：伪元素法
伪元素： 伪元素用于向文本设置特殊样式，也就是格式化，不两只伪元素其作用不同，具体学习可以在https://www.w3school.com.cn/上可以了解。（推荐使用）
语法：
选择器：伪元素{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
}
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
.sun2{
background-color: cornflowerblue;
width:200px;
height: 200px;
float: left;
}
.clearfix:after{
content:"";
display: block;/*将设置为行内元素，内容多高且多高*/
clear: both;
}
</style>
</head>
<body>
<div class="person clearfix">
<div class="sun1"></div>
<div class="sun2"></div>
<div class="sun1"></div>
</div>
</body>
</html>注：在版本较低的浏览器下，伪元素不存在
