从零开始的毕设--CSS（3）

盒模型

盒模型是CSS看待元素的方式：

内容区
每个元素都有内容，如文本、图片。
内边距padding
内容区周围的边距。

边框border
包裹内边距的线。
外边距margin
包围着边框。

.guarantee{
	border-color:black;
	border-width:1px;
	border-style:solid;
	/**边框黑色实线*/
	background-color:#a7cece;
	/*背景颜色*/
	padding:25px;
	padding-left:50px;
	margin:30px;
	/**内边距25像素，外边距30像素*/
	background-image:url(images/background.gif);
	background-repeat:no-repeat;
	background-position:top left;
	/**背景图片不重复、位置左上*/
}

标识元素

我们接触过在<a>中使用id，然后跳转至id处。
然而，id还有种用法：

#footer{
	color:red;
}
p#head{
	color:red;
}
/**可以理解为class的单例*/

用id替代class，表明了只有一个元素拥有这个css，而不是一类元素(独一无二)。使用方法：

<p id="head">...</p>

混合样式表

也就是使用多个样式表。

• 样式表的顺序重要么？
  重要，从上到下，下面的那个样式表是最优先的（也就是可能覆盖上面的样式表）。

指定媒体类型

<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">
<link href="lounge-print.css" rel="stylesheet" media="print">

相当于对于不同类型的设备，有不同的css样式表。
或者直接用下面的方法写在css里面：

@media screen and (min-device-width:481px){
	#guarantee{
		margin-right:250px;
}
}
@media screen and (max-device-width:480px){
	#guarantee{
		margin-right:30px;
}
}
@media print{
	#guarantee{
		margin-right:10px;
}
}