CSS元素分类
（1）块状元素／Block Element：每个元素单独占一行；高／宽／行高／顶和底边距都可设置；默认大小为父容器的100%。
（2）行内元素／Inline Element：与其它元素共享一行；不可设置；默认为所含内容大小，不可修改。
（3）行内块状元素／Inline-block Element：与其它元素共享一行；高／宽／行高／顶和底边距都可设置。
网页中元素之间的关系其实可以总结为以下三种关系：
（1）块挨着块
（2）块嵌套着块
（3）块叠着块
CSS语法：
（1）box类 与 link类：
.box, .link{
width: 205px;
height: 280px;
float: left;
margin: 0 20px;
}
（2）box类下面的link类：（这里没有逗号了！！）
.box .link{
width: 205px;
height: 280px;
float: left;
margin: 0 20px;
}
CSS定位机制
定位机制有三种，分别是标准文档流、浮动及绝对定位。
网页布局
常见的有一列布局，二列布局，三列布局：
大多数网页都是混合布局！
-> 小结：靠左
float:left;，靠右float:right;，居中margin: 0 auto;
CSS布局模型
（1）流动模型／
（2）浮动模型／
（3）层模型／
盒模型／Box Model
css定义的width = paddingLeft + borderLeft + contentWidth + borderRight + paddingRight;
元素实际的width = marginLeft + paddingLeft + borderLeft + contentWidth + borderRight + paddingRight + marginRight;
文档流
确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。
举例来说：
-> position:absolute;和浮动／float脱离文档流，用它们修改元素位置之后，元素本身的位置不会被保留。
-> position:relative; 没有脱离文档流。
CSS的浮动／float
float 属性定义元素靠哪个方向浮动。
在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框／Block，而不论它本身是何种元素。
特点：如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
width和height的％
50％：父元素的50%
－－－－－－－－－已学列表－－－－－－－－
color:
font-family:
font-size:
border:
margin:
padding:
width:元素宽度
--> auto 默认值。浏览器可计算出实际的宽度。
--> length 使用 px、cm 等单位定义宽度。
--> % 定义基于包含块（父元素）宽度的百分比宽度。
--> inherit 规定应该从父元素继承 width 属性的值。
选择器们
id选择器：能且只能被使用一次
类选择器
