Chapter9 盒模型

CSS将每个元素看做一个盒子表示，由内容，内边框，外边框组成。
内容可被透明内边框padding包围，内边框周围可放一个可选边框border,有一个可选的透明化外边框（margin）包围所有部分。
所有元素，甚至inline元素，也被当做盒。
外边距提供元素之间的间距。

.guarantee{ border-color: black; border-width: 1px; border-style: solid; background-color: #a7caca; padding: 25px; margin:30px; color: gray; line-height: 1.9em; font-style: italic; font-family: Georgia,"Times New Roman",Times,serif; background-image: url(images/background.gif); 添加背景图 background-repeat: no-repeat; 不重复出现背景图 background-position: top left; 背景图位置

---

background-repeat: repeat; (default) no-repeat; (不重复) repeat-x; （水平重复） repeat-y; （垂直重复） inherit (继承父级元素)

---

background-position: top; left; right; bottom; center;

---

border-style:solid;dotted;double;dashed;groove;inset;outset;ridge;

---

border-top/right/left/bottom-color/style/width设置某一条边框的属性

---

border-radius:15px设置圆角
border-top/bottom-left/right-radius:3em某个角设置圆角

---

id是一个元素的唯一标识符，class是一群元素的标识符
但是一个元素可以既有id，又有class.

class元素的选择器是.class
id元素的选择器是#id

---

多个样式表时，后出现的样式表优先。使用多个样式表的原因：1.网站不同模块的需要；2.面向不同浏览器。
在指定样式表的链接中，添加media属性，可以在指定设备类型是触发。
或者直接在CSS 文件中使用@media规则，使用媒体查询。
（需要密切关注指定设备的最佳时间）