网页布局基础

什么是网页布局——网页布局是网页制作的基础。

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(固定定位)