盒模型

调整整个页面上文本的行高

line-height:1.6em;

（em /px /百分数）

合模型
每个盒子由一个内容区以及可选的内边距、边框和外边框组成。

内容区（content area）：包含文本或图像
内边距（padding）：透明的
边框（border）
外边框（margin）

所有的元素都被当做盒子

---

class属性
在.html文件中

<p class="guarantee">

打开对应的.css 文件

.guarantee{
    border-color: white;  <!白色边框>
    border-width: thin;   <!边框宽度>
    border-style: solid;  <!实线>
    background-color: #a7cece;<!背景颜色>
    padding: 45px;        <!在内容的周围增加45像素的内边距>
    padding-right: 80px;  <!在内容的右边的内边距为80像素>
    margin: 50px;         <!在内容的四周增加50像素的外边距>
    margin-left: 250px;   <!左外边距>
    margin-right: 250px;  <!右外边距>
    line-height: 1.9em;  
    font-style: italic;   <!斜体>
    color: #444444;       <!字体颜色>
    font-family: Georgia,"Times New Roman",Times,serif;
    background-image: url(images/background.gif);<!背景图片，会在内容区和内边距的后面显示，不会延伸到外边距>
    background-repeat: no-repeat;<!由于背景图默认重复，背景图设为不再重复>
    background-position: top right;<!图片放置在左上角>
}

background-repeat有repeat
no-repeat
repeat-x 在水平方向上重复
repeat-y 在垂直方向上重复
inherit 按夫元素的设置来处理
background-position有： top right
bottom right
top left
top right

border
border-style
1. soild 实线
2. double 双线
3. groove 槽线，看起来像页面中的一个槽
4. outset 外凸
5. dotted 点线
6. dashed 破折线
7. inset 内凹
8. ridge 脊线

border-width
可以用关键字或者像素
关键字：thin medium thick

指定某一边的边框
border-top-color:black;
border-top-style:dashed;
…….

指定某一边为圆角
border-radius:15px;

border-top-left-radius:3em;

border-bottom-right:0px;直角

锯齿
border-style:dashed;
border-color:white;

id属性
使用id属性为元素指定一个唯一的名字。
还可以用id属性为元素提供唯一样式。
一个页面上有给定id的元素只能有一个。
可以使用id选择器按id选择元素。例如：#myfavoriteid.
一个元素只能有一个id，但是它可以属于多个类。
.html中

<p id="footer">

.css中

#footer{
}

类名要以字母开头，id可以以一个数字或者字母开头，id和类名都可以包含字母数字下划线，但是不能有空格

---

混合样式表
在html中可以指定多个样式表如果两个样式表包含冲突的属性定义，HTML中最后链接的样式表为最优先

---

样式表不在只是面向浏览器

根据将要显示页面的设备类型来调整页面的样式
利用media属性

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

media 属性允许你指定应用这个样式表的设备类型
screen：这个查询指定了有屏幕的设备
屏幕宽度不超过480px

<link href="loung-print.css" rel="stylesheet" media="print">

媒体类型为print时才能使用

查询中还有很多属性可以使用
如

min-device-width
max-device-width

以及显示方向

orientation:landscape  横向
orientation:portrait   纵向

在css中增加媒体查询
不是在link标记中使用媒体查询，还可以直接写在css中
例如：

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