web前端开发第一阶段——盒模型/auto/背景样式/雪碧图/复合类型/去除默认样式

盒模型(标签实际大小)：

实际宽：width(content)+border+padding+margin

怪异盒模型：

box-sizing:border-box;
			content-box
实际大小:width+margin,
width:内容宽度+border+padding

Border
	边框宽度：border-width
	边框类型：border-style  solid/dashed/double
	边框颜色：border-color
	border：none;去边框
	
Padding
	内边距，拉开边界与标签里面内容的距离
		padding-top:
		padding-left:
		padding-right:
		padding-bottom:
Margin
	外边距，拉开标签与标签的距离
		margin-top:
		margin-left:
		margin-right:
		margin-bottom:

Auto:自适应（水平方向）

背景

Background
Background-image:
Background-color:
Url(图片路径）
Background-repeat:no-repeat;不平铺
Repeat-x
Repeat-y
Background-position:位置
Background-position-x:x轴
Background-position-y:y轴
值：-10px  百分数  正负/+-  left/right/center

注意：可用于雪碧图

复合类型：

Border:2px solid red;
Background:url(图片路径) no-repeat -30px -30px green;
Padding:12px 23px 34px 23px;=>padding:12px 23px 34px;
Padding:12px 23px;=>padding:12px 23px 12px 23px;
Padding:12px;=>padding:12px 12px 12px 12px; 

去除默认样式 (根据自己的需求）

h1,h2,h3,h4,h5,h6,b,strong{
	Font-weight:noemal;
}
em,i{
	font-style:normal;
}
body,p,ul,li,ol,h1,h2,h3,h4,h5,h6{
	padding:0;
	margin:0;
}
a{
	text-decoration:none;
	color:#000;
}
input,textarea{
	border:none;
	outline:none;
}
li{
	list-style:none
}