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

最新推荐文章于 2018-10-05 11:58:53 发布

No_Game_No_Life_

最新推荐文章于 2018-10-05 11:58:53 发布

阅读量396

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/No_Game_No_Life_/article/details/82932047

毕设准备专栏收录该内容

74 篇文章

订阅专栏

本文深入探讨CSS盒模型的概念，包括内容区、内边距、边框和外边距等关键元素，并通过实例展示了如何设置这些属性。此外，文章还介绍了如何使用ID选择器实现元素的唯一样式设定，以及如何利用媒体查询为不同设备提供定制化的样式。

盒模型

盒模型是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;
}
}