CSS初識_3盒

1、盒模型

（1）、水平格式化往往比想象的更加複雜。width影響的是內容區的寬度，而不是整個可見的元素框。如果指定了內邊距，外框和外邊距。

• 可視範圍= width+padding(一般兩個）+margin（一般兩個）+邊框寬度（一般兩個）。
• 塊級元素框的水平部分總和等於父元素的width。如果其中一個元素值爲負數，其他數也要滿足此關係。
  
• 水平的7個元素中，有三個可以設置爲auto ：元素內容的width 以及左，右外邊距。其餘屬性爲特定值，或默認0.三個值都爲auto的時候，width會很寬。
• 如果 margin-left:auto   ;  margin-right: auto  ;  那麼會位於父級元素居中。
• 垂直方向也要滿足這樣的條件。

<div class="hezi1">
		<div class="hezi2">
			這裏是內容區
		</div>
	</div>

*{
	margin: 0px;
	padding: 0px;
}
div.hezi1{
	height: 100px;
	width: 100px;
	background-color: #f40;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 200px;
	padding-bottom: 20px;
	border:5px solid #000;
}
.hezi2{
	height: 50px;
	width: 50px;
	background-color: green;
	padding: 10px;
	border:5px solid #000;

}

背景會延伸到內邊距中，而不會延伸到外邊距中

（2）、margin  外邊距

margin: top  right  bottom left 

• 如果缺少左外邊距，則使用右外邊距的值
• 如果䧂下外邊距的值，則使用上外邊距的值
• 如果缺少右外邊距的值，則使用上外邊距的值

（3）border  邊框

border：border-weight   border-style   border-color；

邊框繪製在元素的背景之上。

transparent   透明