盒子：
在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>
注：在版本較低的瀏覽器下，僞元素不存在