盒模型

所有的元素都是在頁面中顯示成一個方塊，類似一個盒子

把元素叫做盒子，設定對應的樣式分別為：盒子的邊框（border），盒子中的內容與盒子邊框之間的間距（內間距），盒子與盒子之間的間距（外間距）

盒子的實際大小是：

盒子的寬度 = 內容寬度 + 左右邊框 + 左右內邊距（padding）
盒子的高度 = 內容高度 + 上下邊框 + 上下內邊距（padding）

如果要增加內邊距和邊框的大小，又不想改變盒子的大小，可以使用：

box-sizing: border-box;

塊級元素，行內元素，行內-塊元素

塊級元素的特點：

<!--塊級元素獨佔一行。
	如果不設定寬度，那麼它的預設寬度是父級元素的寬度。
	支援所有的樣式。-->
	
.box1{
	width: 100px;
	height: 100px;
	background: green;
	margin: 20px;
	padding: 20px;
}
 

行內元素：

<!--行內元素不獨佔一行。
	行內元素不支援設定寬高，寬高是由內容撐開的。
	程式碼換行，盒子會產生間距。
	盒子都是並行在一行的。
	只可以設定左右margin值。
	padding四周都可以設定。
	子元素是行內元素的，父元素可以設定text-align和line-height設定水平和垂直居中
-->

.span1{
            background: deeppink;
            font-size: 50px;
        }

行內塊元素

<!--支援塊元素的全部樣式，也有行內元素的特性
	如果沒有設定寬高，寬高由內容決定
	程式碼換行，盒子會產生間距
	子元素是行內塊元素的話，父元素可以設定text-align和line-height設定水平和垂直居中-->
 

display用來設定元素以什麼型別顯示

   常用的屬性值有：
      	none: 元素隱藏且不佔位置
      	line:	以行內元素顯示
      	block：以塊元素顯示
      	inline-block：以行內塊元素顯示
	.box{
		width: 100px;
		height: 100px;
		
		<!--元素以行內元素顯示-->
		display: line;
		
		<!--元素以塊元素顯示-->
		display: block;
		
		<!--元素以行內塊元素顯示-->
		display: inline-block;
		
		<!--讓元素隱藏，並且隱藏元素不會再佔位-->
		display: none;
	}
 

CSS內邊距padding

<!--設定元素的內邊距（padding），讓內容和元素邊框（border）有一定的距離-->
.odiv1{
	width: 200px;
	height: 200px;
	background: red;
	<!--在使用padding的時候，會改變元素本來的大小。如果只設置一個值，那麼他會同時改變上下左右的內邊距-->
	padding: 20px;
}

<div class="odiv1"> 文字內容 </div>

CSS外邊距margin

<!--設定元素的外邊距，是讓當前元素和四周的元素產生距離，預設各元素的外邊距是0，即兩個div是貼合在一起的-->
div{
	width: 200px;
	height: 200px;
}
.box1{
	background: red;
	<!--設定元素box1的下外邊距，讓box1的下方和box2的上方有20px的距離-->
	margin-bottom: 20px;
	
	<!--如果設定兩個值得話，那麼第一個值代表上下，第二個值代表左右，padding同理-->
	//margin-bottom: 20px 50px;
	
	<!--用外邊距設定元素水平居中，不能垂直居中-->
	//margin: auto;
	
	<!--margin還可以設定負值，使當前元素和另一元素邊框合併，或者覆蓋另一元素-->
	//margin-top: -100px;
}
.box2{
	background: blue;
}

<div class="box1"><div>
<div class="box2"></div>