流式布局、浮动布局及绝对定位布局

知识点：

1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局；

2.精通标准文档流、盒子模型、float属性以及position属性等知识。

W3C

由万维网联盟制定的一系列标准：
1.结构化标准语言（HTML和XML）
2.表现标准语言（CSS）
3.行为标准语言（DOM和ECMAScript）

CSS三种定位机制：标准文档流 浮动和绝对定位

标准文档流特点：从上到下，从左到右，输出文档内容；由块级元素和行级元素组成

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 另外
块级元素可以设置width,height属性.
行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
块级元素即使设置了宽度,仍然是独占一行.

块级元素标签：div ul li dl dt p ....

行级元素标签：span strong img input ....<大部分表单元素是行级标签>

盒子模型三维图：

第一层：border

 第二层：centent+padding

 第三层：background-img 

第四层：background-color 

第五层：margin

如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性。

浮动定位机制

使元素脱离文档流，脱离文档流的意思就是，正常的文档流中丢失了它的位置。父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。
我们使用浮动一般是为了让块级元素实现行级元素的特性，但也不希望浮动元素影响后面的元素位置，当浮动失去文档流，使后面的元素顶上来以后，一般有三种方法可以处理：
1、为父元素增加height属性，这样父元素就会显示边框、背景等，但这种情况是确定浮动元素的高度时才这么做，但是实际中，可能不清楚高度哦
2、为浮动元素后面的元素增加 clear:both，清除浮动效果，如果没有后面元素的话，增加一个元素。
3、为父元素设置overflow:hidden属性

绝对定位布局，通过设置position属性实现。
CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位。
比如：带有遮罩层效果的提示框、固定层效果、全屏广告等等。
position属性：
拥有3种定位形式：1、静态定位  2、相对定位  3、绝对定位
可设置4个属性值：
static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

position:relative:被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
position:absolute：绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。 如果元素没有已定位的祖先元素， 那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。与相对定位相反， 绝对定位使元素与文档流无关， 因此不占据空间。 普通文档流中其他的元素的布局不受绝对定位元素的影响。
position:fixed
相对于浏览器窗口，其余的特点类似于绝对定位。

一 采用绝对定位实现横向两列布局的情况
     一列为固定宽度，另一列宽度自适应的情况；
二 应用小贴士：
     relative-对父元素进行相对定位
     absolute-对需要自适应宽度的元素进行绝对定位
注意！
固定宽度列的高度大于自适应宽度的列高度。