标签：
什么是网页布局——网页布局是网页制作的基础。
DIV+CSS布局网页。
流式布局、浮动布局、绝对定位布局。
标准文档流、例子模型、FLOAT属性、POSITION属性。
自动居中——列布局安全——例子模型的使用方法。
浮动布局案例——float属性、解决浮动影响的方法。
绝对定位布局案例——绝对定位实现横向两列或多列布局。
W3C标准
结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）
倡导结构、样式、行为分离
CSS中3种定位机制：
标准文档流
浮动
绝对定位
标准文档流，特点：
从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
块级元素，特点：
从左到右撑满页面，独占一行
到页面边缘时，会自动换行
div\ul\li\dl\dt\p...
行级元素，特点：
能在同一行内显示
不会改变HTML文档结构
span\strong\img\input...
大部分表单元素
块级元素和行级元素都是盒子模型。
盒子模型
盒子模型＝网页布局的基石，由4个部分组成：
边框（border）
外边距（margin）
内边距（padding）
盒子中的内容（content）
上右下左
上（左右）下
（上下）（左右）
（上下左右）
样式表：（就近样式）
外部样式
内部样式
行内样式
<style type="text/css">
img{margin: 10px 18px; border:1px solid #b1adad;}
</style>
盒子模型三维立体图：
border
content+padding
background-image
background-color
margin
自动居中一列布局
三个技能点：
标准文档流
块级元素
margin属性
#wrap{width:770px; margin:0 auto;}
auto会根据浏览器的宽度自动的设置两边的外边距
（浏览器的宽度－外包含层的宽度）/2＝外边距
浮动布局
CSS中规定的第二种定位机制
能够实现横向多列布局
通过设置float属性实现
float属性，值：
left——左浮动
right——右浮动
none——不浮动
特点：元素会左移、右移，直到触碰到窗口为止
设置了浮动的元素，仍旧处于标准文档流中
当元素没有设置宽度值，面设置了浮动属性，元素的宽度随内容的变化面变化
当元素设置了浮动属性后，会对相邻的元素产生影响，相邻的元素特指紧邻后面的元素
清除浮动的常用方法：
clear属性——常用clear:both;
clear:left; 或者 clear:right
同时设置width:100%;(或固定宽度) + overflow:hidden;
横向两列布局：
网页布局最觉的方式之一
主要应用技能
float属性——使纵向排列的块级元素，横向排列
margin属性——设置两列之间的间距
position属性
拥有3种定位形式：1静态定位 2相对定位 3绝对定位
可设置4个属性值
static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
标签：
原文地址：http://www.cnblogs.com/moqingtong/p/4815821.html
