css盒模式——读书笔记2012.10月16
一：解析盒模式 （box model)
用css可以控制盒子的各个方面： 内容周围补白的大小，元素有没有边框（以及类型和大小）， 以及元素之间有边界。
<1> 内容区指每个元素都以某些内容开始 比如文本或图像，这些被放倒一个大小正好能包含它的盒子里
<2> 补白指的是任何盒子在内容区周围都能有一层补白。补白是可选的，不一定会有。可以用补白在盒子的内容和边框之间 可视 的补白。 补白是透明的，本身没有颜色和修饰。
添加补白 { padding： 25px; 四周的补白都为25像素 padding-left： 80px；左边增加补白。 }
<3> 边框是指 元素周围可以有边框，并且是可以选的，边框包围着补白，因为是围绕内容的一条线，所以视觉上将内容和同一页上的其他元素分隔开了。边框可以有各种宽度，颜色和样式
边框 { border-style: dashed;(为虚线) border-color: white; (白色) }
<4> 边界是指可以的，包围着边框。有了边界，就可以在同一页上的元素之间添加空间。如果两个盒子相邻，边界就相当于他们之间的空间。跟补白一样，边界也是透明的，本身没有颜色或修饰
添加边界 { margin: 30px;已经把边界设置为30px margin-right: 250px;现在将覆盖右侧的值，重新设置为250px }
添加边界 { margin: 30px;已经把边界设置为30px margin-right: 250px;现在将覆盖右侧的值，重新设置为250px }
二: 盒子的作用
通过内部空间（补白）和周围空间（边界）来决定一个元素的布局的方法就有无穷多个。如
可以样式化一个盒子，使之有补白，边框和边界或只有补白和边界，或者只有边框等等
三：padding属性
可以用它在内容周围设置相同大小的补白。可以把这个属性设置成多少像素或边框里面部分的百分之几。
如 .guarantee { padding: 25px;
margin: 30px ——在内容四周（上下左右）各添加了30像素的边界
}
四： 插入背景图像
只需要把图像插入段落元素就可以了，所以你会用到<img>元素。使用css 可以用background-image属性给任何元素添加背景图像
{
background-image: url(image/background.gif);
background-repeat: no-repeat;——（背景不重复）
background-position: top left; ——（把它放在左上角）
}
五:id 属性
如果页面有个页脚，通常在一个页面上只有一个页脚，所以id 好像很适合。给一个页脚文本的段落添加识符“footer”
方法如下：
<p id="footer">Please steal this page, it isn't copyrighted in any way</p>
↓一个元素只能有一个id
六：在css中（类和id的区别）
类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配
一个specials的类 p.specials{ color: red; 这条规则只选择 specials类中的段落 } .specials{ color: red; 这条规则选择specials类中的所有元素 } 一个id为footer的元素 # footer{ color: red; (人一元素) } p#footer { color: red; 这条规则选择一个id为“footer”d <p>元素 }
