一、盒子(框)模型
1.1圖形示例：
1.2盒子模型的主要構成，由內向外：
內容區：width,height
內邊距：padding
邊框：border
外邊距：margin
可見寬高 = 內容區+內邊距+邊框
1.3塊級元素的盒子模型（在文檔流中）：
內容區：可以設置寬高 width，height
內邊距：內邊距指的是內容區和邊框之間的距離，內邊距會影響盒子的大小
邊框：盒子可見框最外側，邊框是盒子的邊緣。
邊框要同時設置3個樣式：border-width（寬度），border-color（顏色），border-style（風格），推薦使用簡寫模式
外邊距：外邊距盒子和其他盒子之間的距離，外邊距不會影響可見框的大小，但是會影響盒子的位置
相鄰的垂直外邊距會發生重疊現象：相鄰元素的外邊距會取最大值，子元素的外邊距會傳遞給父元素(子元素設置外邊距，父元素會跟着走)
水平外邊距不會重疊，而是取和
關於垂直外邊距重疊現象參考：https://blog.csdn.net/zhaihaohao1/article/details/103441942
塊級元素的盒子模型，測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
background: #00FF00;
}
.box1 {
width: 100px;
height: 100px;
background: #FF0000;
margin-top: 20px;
}
</style>
</head>
<body>
<!--
子元素的外邊距會傳遞給父元素(子元素設置外邊距，父元素會跟着走)
-->
<div class="container">
<div class="box1"></div>
</div>
</body>
</html>
1.4內聯元素的盒子模型（在文檔流中）：
內容區：不能設置寬高(width，height設置無效)，寬高由內容撐開
內邊距：支持水平方向的padding，垂直方向的padding也支持，但是不會影響佈局
邊框：支持四個方向邊框，但是垂直的邊框不會影響佈局
外邊距：支持水平方向外邊距，不支持垂直方向的
內聯元素的盒子模型，測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- 不能設置寬高(width，height設置無效)，寬高由內容撐開 -->
<span style="background-color: #FFFF00; width: 100px;height: 100px;">span0</span>
<!-- 垂直方向的padding也支持，但是不會影響佈局 -->
<span style="background-color: #FFFF00;padding-bottom: 10px;">span1</span>
<!-- 支持水平方向的padding -->
<span style="background-color: #00FF00;padding-left: 100px;">span2</span>
<div style="width: 100px;height: 100px;background-color: #FF0000;"></div>
<!-- 支持四個方向邊框，但是垂直的邊框不會影響佈局 -->
<span style="background-color: #FFFF00; border: #00FF00 30px solid;">span3</span>
<span style="background-color: aqua ">span4</span>
<div style="width: 100px;height: 100px;background-color: #008000;"></div>
<!-- 支持水平方向外邊距，不支持垂直方向的 -->
<span style="background-color: #FFFF00;margin-top: 20px;margin-left: 20px;">span5</span>
</body>
</html>
二、display和visibility屬性：
2.1display 設置元素的顯示類型，常用屬性值如下：
block：元素會作爲塊元素顯示
inline：元素會作爲內聯元素顯示
inline-block：元素會作爲行內塊元素顯示（1.不獨佔一行 2.寬高被內容撐開 3.可以設置寬高 ）
none：元素不會在頁面中顯示，並且不會佔據頁面的位置
2.2visibility 設置元素是否在頁面中顯示，常用屬性值如下：
visible：默認值，元素在頁面中正常顯示
hidden：元素不在頁面中顯示，但是依然在頁面中佔據位置
display ，visibility 測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/*
display 設置元素的顯示類型，常用屬性值如下：
block：元素會作爲塊元素顯示
inline：元素會作爲內聯元素顯示
inline-block：元素會作爲行內塊元素顯示（1.不獨佔一行 2.寬高被內容撐開 3.可以設置寬高 ）
none：元素不會在頁面中顯示，並且不會佔據頁面的位置
*/
.item{
width: 100px;
height: 100px;
background-color: #00FF00;
display: inline-block;
/* display: block; */
/* display: inline; */
/* display: none; */
}
/*
visibility 設置元素是否在頁面中顯示，常用屬性值如下：
visible：默認值，元素在頁面中正常顯示
hidden：元素不在頁面中顯示，但是依然在頁面中佔據位置
*/
.box4{
width: 100px;
height: 100px;
background-color: #FFFF00;
/* visibility: visible; */
/* visibility: hidden; */
}
</style>
</head>
<body>
<div class="item">box1</div>
<div class="item">box2</div>
<div class="item">box3</div>
<div class="box4">box4</div>
</body>
</html>
三、overflow屬性
overflow 設置元素如何處理溢出內容，常用屬性值如下：
visible：默認值，不會處理溢出的內容，在父元素以外的地方顯示
hidden：溢出的內容會被隱藏不會顯示
scroll：在父元素中同時添加水平和垂直方向的滾動條，不內容是否溢出都會添加滾動條
auto：根據需要自動生成滾動條
overflow 測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
/*
overflow 設置元素如何處理溢出內容，常用屬性值如下：
visible：默認值，不會處理溢出的內容，在父元素以外的地方顯示
hidden：溢出的內容會被隱藏不會顯示
scroll：在父元素中同時添加水平和垂直方向的滾動條，不內容是否溢出都會添加滾動條
auto：根據需要自動生成滾動條
*/
.container{
width: 200px;
height: 200px;
background-color: #7FFF00;
overflow: auto;
}
.box1{
width: 150px;
height: 300px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
</div>
</body>
</html>
四、長度單位：
px：像素
像素，像素就是構成一個圖片的最小的單位，我們的屏幕就是由一個一個像素點構成
一個像素指的就是一個像素點
在不同的顯示器中，一個像素的大小是不同的，越清晰的屏幕像素越小
%：百分號
可以將一個元素的樣式值設置爲一個百分比的值，這樣瀏覽器將會根據父元素的值去計算出相應的值
當父元素的值改變時，子元素的值會按照一定比例一起改變，經常用於自適應的頁面
em：相對長度單位
em會相對於當前元素的字體大小來計算
1em = 1fontSize
em經常用於設置文字相關的一些樣式，因爲當文字大小發生改變時，em會隨之改變
em測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
/*
em：相對長度單位
em會相對於當前元素的字體大小來計算
1em = 1font-size
em經常用於設置文字相關的一些樣式，因爲當文字大小發生改變時，em會隨之改變
下面的5em = 5font-size = 5*20 = 100px
*/
.box1{
font-size: 20px;
background-color: #FFFF00;
width: 5em;
height: 5em;
line-height: 5em;
margin: 5em;
padding: 5em;
text-align: center;
}
p{
font-size: 20px;
/* 行高就是40 */
line-height: 2em;
/* 首行縮進40，就是兩個字的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<!--
1設置首行縮進
2設置行高
-->
<div class="box1">box1</div>
<p>1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。1954年加入中國少年先鋒隊，1960年參加中國人民解放軍，同年11月加入中國共產黨。1961年5月，雷鋒作爲全團候選人，被選爲遼寧省撫順市第四屆人民代表大會代表。1962年2月19日，雷鋒以特邀代表身份，出席瀋陽軍區首屆共產主義青年團代表會議，並被選爲主席團成員在大會上發言。1962年8月15日，雷鋒因公殉職，年僅22歲。</p>
</body>
</html>