一、如何用CSS进行网页布局
二、网页布局基础
三、网页简单布局之结构和表现原则
四、CSS Sprite雪碧图应用
什么叫布局？
网页的特点：
网页自适应宽度；
网页长度无限延长；
（分栏也叫分列，混合布局，一列布局，二列布局，三列布局。）
使用float和绝对定位position:relative都会脱离文档流.
清除浮动两个方法：
1.为受浮动影响元素设置{clear:both;}属性
2.为受浮动影响元素设置{100%;overflow:hidden;}固定长度以及溢出隐藏属性
网页布局：流式布局(标准文档流)、浮动布局、绝对定位布局
W3C标准：
结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）
標準文档流：
从上到下，由左到右，輸出文档內容
由块級元素和行內元素組成
块級元素:
由左到右填滿頁面，獨占一行，到頁面边緣時會自動換行div,p,ul,ol,dt.....
行級元素：
能在同一行顯示，不會改變html文档結構span，strong，input，img
盒子3D模型—网页布局的基石
1.border
2.content + padding
3.background-image
4.background-color
5.margin
盒子大小=边框border+内边距padding+＋外边距margin＋内容content
行内样式 > 内部样式 > 外部样式 （采用的是就近原则）
1、auto会根据浏览的宽度自动来设置两边的外边距。
2、其原理：（浏览器的宽度-外包含层的宽度）/2=外边距
3、如果想让页面自动居中，当设置marign属性为auto时，就不能在设置浮动或是绝对定位属性。如果你设置了auto，又设置了浮动或是绝对定位，那么页面是不会居中显示的
自动居中一列布局：
1、三个技能点:标准文档流、margin属性、块级元素。
**自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。
**元素未设置宽度，但设置了浮动float属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素
当父包含块被压缩成一条线的时候使用{clear:both;}不能起到清除浮动的作用，只能用溢出属性hidden方法来清除浮动影响
横向两列布局，主要设置float属性和margin。
div一般不要设置高度.
(1)position ４個值
static relative absolute fixed(后面两个都属于绝对定位)
相對定位
即對自身原有位置進行偏移，隨即拥有偏移值和z-index,仍處于標準文档流中
絕對定位
建位了而包含块為基準的定位，完全了脫離了標準文档流， 父元素要設置position:relative 如果沒有就再而上一個元素為基準，直到<html>.
positive设置相对定位，以自身为相对基准进行偏移，设置相对定位属性之后会有偏移属性（top left right bottom 相对于自身进行偏移，会覆盖其他内容进行偏移）和z-Index属性（空间的层堆叠z轴的堆叠，没有的话是默认存在y和x轴的一个平面上）
相对定位和绝对定位的异同
1、相对定位
特点：相对于自身原有位置进行偏移
元素仍处于标准文档流中
随即拥有偏移属性和z-index属性（多了z轴更具空间感）
移动同时会将浏览器撑开
绝对定位特点：
建立了以包含块位基准的定位
完全脱离标准文档流
随即拥有偏移属性跟z-index属性
未设置偏移量时：
无论是否存在已经定位的祖先元素，都保持在元素初始位置 脱离标准文档流
设置偏移量时：
偏移参照的基准：
无已定位的祖先元素：以<html>为偏移参照基准
有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准
注意：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
＊＊＊使用绝对定位实现横向两列布局一般用于：一列固定宽度，一列自适应宽度。
主要应用技能：
relative-父元素相对定位。
absolute-自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列，否则会造成文档的溢出。
开发思路：
先按结构和语义编写代码
再进行样式设置
减少HTML与CSS的契合度
先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
什么是网页皮肤？相同的html结构，不同的css样式。
为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。
xuebitu雪碧图
使用sprite，将多张小图片整合成一张大图片，可以减少http请求数，加速内容显示。
cssscrpite雪碧图
静态图片，不随用户信息变化而变化。
小图片，容量比较小
加载量比较大。（目的是：有效的减少http请求的数量）
大图不建议拼成雪碧图，加载时间长
雪碧图原理：通过css的背景定位属性：background-position来控制
坐标轴,拼合背景图的小图(x,y)为负值
以雪碧图左上角的定点为(0,0)坐标
当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0;
实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
有几个非常不错的前端开发在线工具，分享给一起学习的小伙伴们，别忘了收藏，很实用。
（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；
（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；
（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx
CSS Sprite雪碧图实现方式
1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站
2.使用spite工具自动生成雪碧图
CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值
下载地址：http://www.99css.com/archives/1524
图片伸缩设置：height40px，margin-top:-10px;line-height:40px文本居中。
在对元素设置固定定位时，如果希望本元素包含其父包含块中，不需要对其设置偏移量.