DIV+CSS网页布局及布局常用属性

网页布局的目的

网页布局可以使页面结构清晰，有条理，易读。
网页布局的本质：用CSS来摆放盒子，即把盒子摆放到相应位置。

网页布局的步骤

1. 确定“版心”：页面主体内容所在的位置（通常在页面中水平居中）。
2. 分析页面中的模块：头部（header）、导航（nav）、焦点图（banner）、主体内容（content）、页面底部（footer）。
3. 控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制。

常用页面布局

网页布局一般分为以下几个部分：

内容区域布局一般有三种形式：

1. 1列：一般用于移动端
2. 2列：一般用于平板设备
3. 3列：一般用于PC桌面设备
   

传统网页布局的三种模式

CSS提供了三种布局方式：普通流（标准流或文档流）、浮动、定位。

页面布局的定位机制

1. 流式布局：按照元素的类型和在HTML源文件中出现的顺序进行定位

• 块（block）：从上到下依次排序
  常用元素：<div> <hr> <p> <hn> <ul> <ol> <dl> <form> <table>`
• 水平布局（inline）：在一行中进行水平布局
  常用元素：<span> <a> <i> <em> 等

2. 浮动：当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果
3. 绝对定位：通过页面坐标（页面左上角）的方式来定位元素，使用绝对定位后元素不会占用普通流空间。
4. 相对定位：如果一个元素进行相对定位，它将以它所在的位置（即它在普通流中的位置）为初始点， 然后可以通过设置垂直或水平位置，让这个元素相对于它的初始点进行移动

<div>、<ul>、<ol>、<p>、<li>等都是块，它们和周围的元素都有边界(margin),在块级标签嵌套的时候，要注意处理这些边界

布局中的常用属性

浮动属性（float）

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
浮动元素会脱离标准流（脱标）。

选择器 {
	float: 属性值;
}

属性值	描述
left	左浮动
right	右浮动
none	不浮动（默认）

清除属性（clear）

选择器 {
	clear: 属性值;
}

属性值	描述
none	允许元素两边都有浮动元素
left	不允许元素左边有浮动的元素
right	不允许元素右边有浮动的元素
both	不允许两边有浮动的元素

溢出属性（overflow）

当内容溢出元素边框的时候，内容如何处理。

选择器 {
	overflow: 属性值;
}

属性值	描述
scroll	提供滚动机制(带有滚动条)
visible	内容溢出到边框以外（默认）
hidden	内容被修剪，溢出的部分看不见
auto	如果内容被修剪，则显示器会显示滚动条以便查看其余的内容

定位属性（position）

选择器 {
	position: 属性值;
}

属性值	描述
static	自动定位（默认）
relative	相对定位，相对于元素在文档流中的位置进行定位（在文档流中原本位置依然保留）
absolute	绝对定位，相对于已经定义好的父元素的位置进行定位（脱离文档流）
fixed	相对于浏览器窗口进行的定位（脱离文档流，特殊的绝对定位）

偏移量：精确定位元素的位置（这四个属性只有在使用了position后才有效）

边偏移属性	描述
top	顶端偏移量（相对于其父元素上边线的位置）
bottom	底边偏移量
left	左边偏移量
right	右边偏移量

层叠属性（z-index）

当对元素进行定位时，可能会出现堆叠现象，可以使用z-index属性来设置元素的堆叠顺序。

选择器 {
	z-index: 属性值;
}

• 取值可以为：正整数、负整数、0（默认）
• 数值越大，盒子越靠上
• 在文档流中设置层叠属性没有用，可以在脱离文档流的上面做层叠改变

内嵌框架

内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示。

<!--表示点击超链接，相应内容在内嵌框架中打开-->
<a href="要打开的链接" target="内嵌框架名name"></a>
<iframe src="默认打开页面" frameborder="框架边框" name="内嵌框架名"></iframe>

• frameborder取值为：0（无边框）、1（有边框 - 默认）