CSS学习1——基本布局以及盒子模型

1. CSS选择器优先级：

行内样式>ID选择器>类别选择器>标记选择器；

两个类别选择器优先级相同时，以前者为主；

2. CSS盒子的浮动：

默认盒子没有浮动，<div>按行排列，<span>横向排列；

如果有两个盒子，第一个设置float为left，则第二个与第一个在同一行，第二个的左边框与第一个的右边框重合，文字会围绕第一个盒子排列；

一个div的范围是由它里面的标准流内容决定的，与里面的浮动内容无关；

clear用于消除浮动对其影响，值有三个，left，right，both；

3. 搜索引擎根据网页内容的价值来确定网页的排名，不管CSS；

4. CSS的position：

static：默认值；

relative：根据left, top, right, bottom大小设置偏移像素或者百分比，父元素不发生改变；即不影响父元素及兄弟元素，相对于其本身原始位置发生偏移；仍在标准流中；

absolute：以它最近的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素，那么以浏览器窗口为基准进行定位；脱离了标准流；上述“已经定位”指的是其position属性被设置为static之外的任何一种方式；如果只设置了absolute，而没有设置偏移值，那么当前的元素将脱离标准流，其所在位置不发生改变；

fixed：类似于absolute，其基准是浏览器窗口；

5. z-index空间位置：当块被设置了position属性之后，该值才有效，默认为0，当两个块的z-index值一样的时候，将保持原有的高低覆盖关系；

6. CSS的display：

inline指行内元素；

block指块元素，不在一行内；

none表示隐藏；

7.border的设置必须像素、颜色、样式三者都要设置，缺一不可，而且顺序不能改变；

8. 盒子的大小为margin+border+padding+content；