CSS元素分类与布局模型

样式的就近原则
行内样式 > 内部样式 > 外部样式

伪类选择符 允许给html不存在的标签（标签的某种状态）设置样式 例 :hover
常用块状元素，不设置宽度时默认宽度为父容器的100%
例： <div> <ul> <dl> <address> <blockquote> <from>等

内联元素
例：<a> <var> <cite> <code>等
内联块状元素
例：<img> <input>

CSS布局模型

不同于CSS布局样式或CSS布局模板
1、 流动模型（Flow）默认从左至右按顺序排列
2、 浮动模型（Float） float:left;
当元素没有设置宽度时，而设置了浮动属性，元素的宽度随内容变化而变化；
当元素设置浮动之后会对相邻元素进行影响， 影响的元素特指紧邻后面的元素

清除浮动
一、clear:both; 二、width:100%;overflow:hidden;

当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动；必须使用overflow:hidden;

3、 层模型（Layer）
1） 相对定位(position: relative)
相对于自身原有位置进行偏移 仍处于标准文档流中
随即拥有偏移属性和z-index属性

元素相对定位之后会产生空间堆叠，并对相应元素进行遮盖

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

2） 绝对定位(position: absolute)
定位主要用于一列固定另一列自适应的横向多列布局
固定定位的列高度 > 自适应的列的高度

建立了以包含块为基准的定位 完全脱离了标准文档流
随即拥有偏移属性和z-index属性
元素绝对定位之后其宽度会根据内容而改变

无已定位祖先元素，以为基准
有已定位祖先元素，以距离最近的有定位的祖先元素为基准

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

3）固定定位(position: fixed)
常用于实现固定层效果
脱离标准文档流 位置固定不变，使用滚动条滚动时兄弟元素从该元素下通过
未设置偏移量
有已经定位祖先元素，以祖先元素为基准定位
无已定位祖先元素， 以浏览器窗口为基准定位
设置偏移量 有、无已定位祖先元素，均已浏览器窗口为基本偏移

在对元素设置固定定位时，如果希望本元素包含在其父包含块中，不需要对齐设置偏移量

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。