（9）盒模型，与元素亲密接触

多个元素可以使用类，单个可以使用id="apple"；

<p class="apple"></p>
.apple
{line-height:                1.5em;
font-style:                   italic;
font-family:                 Georgia,"Times New Roman",Times,serif;
color:                          #444444;
border-color:              black;
border-width:              1px;
border-style:               solid;
background-color:       #a7cece;
padding:                      25px;     //内边距
padding-left:               80px;     //顺序很重要，后设置的覆盖之前的。
margin:                        30px;     //外边距
background-image:     url(images/background.gif);
background-repeat:    no-repeat;  //图像不重复。repeat-x,repeat-y,按照x，和y方向重复。inherit是按照父类的设置来处理。
background-position:  top left;

QQ20160425-3@2x.png QQ20160425-4@2x.png QQ20160425-5@2x.png QQ20160425-6@2x.png

使用多个样式表:顺序很重要，下面的覆盖上面的。

QQ20160425-7@2x.png

媒体匹配：

<link href="lounge-print.css" > rel="stylesheet" media="print">//媒体类型为打印机的才会使用这个样式表。
<link href="lounge-print.css" > rel="stylesheet" media="screen and (max-device-width: 480px">//指定了有屏幕的设备并且宽度不能抄过480px。

也可以这样：

@media screen and (max-device-width: 480px){
                                             #apple{
                                                         margin:20px;
                                                    }
                                            }

QQ20160425-0@2x.png QQ20160425-1@2x.png