1 CSS页面布局概述
1.1 概述
在进行页面布局时主要考虑以下几方面：
（1）要有整体意识。
（2）从外向内，层层递进。
（3）模块化。
（4）命名规则。
实现网页的页面布局一般有三种方法:表格布局、框架布局、DIV+CSS页面布局。
1 表格布局优势：
（1）实现方式比较简单。
（2）各个元素可以位于表格独立的单元格中，相互影响较小
（3）对浏览器的兼容性较好。
表格布局的缺陷:
（1）在某些浏览器 下(例如IE),表格只有在全部下载完成后才可以显示，数据量比较大时会影响网页的浏览速度。
（2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。
（3）在多重表格嵌套的情况下，代码可读性较差，页面的下载速度也会受到影响。 因此：一般不采用表格布局，除了规模较小的网站之外。
2 框架布局指利用框架对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。
框架布局优点：
（1）网页更整洁、清晰，网页的下载速度较快。
框架布局缺点：
（1）框架用得较多，会影响网页的浏览速度。
（2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限
因此：一般也只应用于较小规模的网站。
3 对于规模较大、比较复杂的网站大多数采用DIV+CSS方式进行布局。DIV+CSS布局方式具有较为明显的优势: （1）内容和表现相分离。 （2）对搜索引擎的支持更加友好。 （3）文件代码更加精简， 执行速度更快。 （4）易于维护。
1.2 网页栏目划分
网站的主页主要包括以下几个区域：页头、banner、导航区域、内容、页脚。
（1）页头：网页的页眉，主要作用是定义页面标题。
（2）banner：banner横幅广告，可有可无，不一定放在页头，也可以在其他区域，banner也不一定放置的就是广告，也可以是其他内容。
（3）导航区域：通过导航区域可以看出网站的定位，也不是所有的网站都有导航区域。导航区域通常以导航条的形式出现，导航条大致分为：横向导航条、纵向导航条、菜单导航条。
（4）内容：具体内容。
（5）页脚：网站最下面，通常用来展示版权信息、法律声明信息、网站备案信息、联系方式等等。
块元素
块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。
常见:元素有
<h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>
等，其中
<div>
块级元素特点
- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度缺省默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：文字类的元素内不能放块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
标记是最典型的块元素。
行内元素
行内元素也称为内联元素或内嵌元素， 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有
<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>
等， 其中
<span>
标记是最典型的行内元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个，遇到父级元素边界会自动换行。
- 高、宽直接设置是无效的。
- 高、行高以及内外边距都不可以改变
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。 注意：
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效
链接里面不能再放链接 特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<style type="text/css">
p{
background-color: pink;
}
ol{
background-color: red;
}
span{
background-color: yellow;
}
i{
background-color: #cff;
}
div{
background-color: #ffc;
}
</style>
</head>
<body>
<p>p--标记 ------------块元素</p>
<ol>ol--标记----------块元素</ol>
<span>span标记---------行内元素</span>
<i>i标记---------行内元素</i>
<div>div标记--------块元素</div>
</body>
</html>
