1，CSS使用一个盒模型(box model)来控制元素如何显示。盒子由内容区和可选的内边距、边框和外边距组成。
2，内容区(content area)包含元素的内容，例如文本或图像。
3，内边距(padding)用来在内容区周围创建可见的空间，是透明的，没有颜色，也没有自己的装饰。
4，边框(border)包围内边距和内容，它从视觉上使内容与同一页面上的其他元素隔开。边框可以有各种不同的宽度、颜色和样式。
5，外边距(margin)包围边框、内边距和内容，允许在元素和其他元素之间增加空间。外边距也是透明的，本身没有颜色或装饰。
6，元素的背景会在内容和内边距下显示，但不会延伸到外边距下面。内边距和外边距大小可以用像素或者百分数设置。边框宽度(border-width)可以用像素设置，也可以使用关键字thin、medium和thick来指定。边框颜色(border-color)可以使用颜色名、rgb值或十六进制码来指定颜色。
7，有八种不同的边框样式，包括实线（solid）、破折线（dashed）、虚线（dotted）、脊线（ridge）、双线（double）、槽线（groove）、外凸（outset）和内凹（inset）。
8，对于外边距、内边距或边框，CSS提供了相应的属性，可以一次对所有四个边（上，右，下，左）完成设置，也可以单独设置任意一边(比如：用padding-left来设置左内边距)。
9，使用border-radius属性可以对有边框的元素创建圆角。可以用一个数指定四个角，或者可以分别指定每一个角。注意可以使用px或者em指定半径大小。
10，使用line-height属性可以增加文本行之间的行高（可以按照像素指定行高，也可以使用em或百分数值相对于字体大小来指定），使得各行之间有更大的垂直间距。增加文本的行高可以改善可读性，使页面不同的部分之间形成对比，产生反差。
11，可以用background-image属性在元素的背景上放置图像。背景图像属于表现方面，使用background-image属性的唯一理由就是要让元素更有吸引力。background-image属性设置为一个URL，这可以是一个相对路径，也可以是一个完整的URL(http://...)。
12，使用background-position和background-repeat属性可以设置背景图像的位置和平铺行为。
13，background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top、left、right、bottom和center。
14，background-repeat的属性值介绍：
- repeat：设置图像在水平和垂直方向上重复。这是默认的行为。
- no-repet：图像显示一次，根本不重复。
- repeat-x：图像只在水平方向重复。
- repeat-y：图像只在垂直方向重复。
- inherit：按父元素的设置来处理。
15，对于希望成组指定样式的元素要使用class属性（多个元素重用某些样式）。
16，使用id属性为元素指定一个唯一的名字(id名中不允许出现空格或其他特殊字符)。还可以使用id属性为元素提供唯一的样式。不过一个页面上有给定的id的元素只能有一个。可以使用id选择器按id选择元素（例如：#myfavoriteid）。
17，一个元素只能有一个id，不过它可以属于多个类。
18，在HTML中可以使用多个样式表。如果两个样式表包含冲突的属性定义，HTML文件中最后链接的样式表最为优先。
19，可以在<link>元素中使用媒体查询(media)或者使用CSS中的@media规则来指定设备。
使用媒体查询：指定有屏幕的设备，并且屏幕宽度不超过480像素
<link href="lounge-mobile.css" ref="stylesheet" media="screen and (max-device-width: 480px)">使用@media规则，后面是媒体查询。对于匹配的设备，将所有适用的规则放到大括号里
@media screen and (max-device-width: 480px) {
#guarantee{
margin-right: 30px;
}
}
