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   透明