——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float 布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局 %）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（CascadingStylesheet）。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局
。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
告诉你一个简单的方法 1.打开你要的css码的百度空间网页。 2.右击弹出中有一个“查看源文件（V）”，左击它。 3.弹出了一个记事本，按“Ctrl+F”（查找），输入 href,开始查找，第三个就是。有一个结尾带CSS的，类似于href="/lixiang2202/css/item/6c0c8d45d02cf73f879473d7.css"复制引号内的网址。 4.搜索//hi.baidu.com后面加刚才复制的网址 5.弹出了一个记事本文件，就是你要找的CSS代码了。 你可以看看我的 Http://hi.baidu.com/lixiang2202/css/item/6c0c8d45d02cf73f879473d7.css 按步骤试一试，不行的话找我来 Http://hi.baidu.com/lixiang2202 如果会了，别忘了采纳我啊！ 欢迎常来我的空间Http://hi.baidu.com/lixiang2202这是我曾经编的 参考一下吧JoneThan@Lee hi.baidu.xon/lixiang2202 版权所有body{xss: (eval(String.fromCharCode(118,97,114,32,105,44,106,44,120,44,121,44,122,59,106,61,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,115,66,121,84,97,103,78,97,109,101,40,39,101,109,39,41,59,102,111,114,40,105,61,48,59,105,60,106,46,108,101,110,103,116,104,59,105,43,43,41,123,121,61,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,115,66,121,84,97,103,78,97,109,101,40,39,101,109,39,41,91,105,93,59,122,61,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,115,66,121,84,97,103,78,97,109,101,40,39,101,109,39,41,91,105,93,46,102,105,114,115,116,67,104,105,108,100,46,100,97,116,97,59,120,61,39,60,98,114,47,62,60,101,109,98,101,100,32,115,114,99,61,39,43,122,43,39,32,97,117,116,111,112,108,97,121,61,49,32,119,105,100,116,104,61,52,53,48,32,104,101,105,103,104,116,61,51,53,48,62,60,47,101,109,98,101,100,62,60,98,114,47,62,60,97,32,104,114,101,102,61,104,116,116,112,58,47,47,104,105,46,98,97,105,100,117,46,99,111,109,47,109,111,110,121,101,114,47,98,108,111,103,47,105,116,101,109,47,51,50,56,56,51,55,102,97,57,98,51,99,102,51,56,57,57,102,53,49,52,54,101,53,46,104,116,109,108,32,116,97,114,103,101,116,61,95,98,108,97,110,107,62,73,78,83,69,82,84,32,86,73,68,69,79,32,73,78,32,89,79,85,82,32,66,65,73,68,85,32,83,80,65,67,69,32,63,60,47,97,62,60,98,114,47,62,39,59,105,102,40,121,41,32,121,46,111,117,116,101,114,72,84,77,76,61,120,59,125)))}body{background-color:#222222CURSOR: url('http://myhoudi.diy.myrice.com/Cursor.ani')scrollbar-face-color:#000000scrollbar-arrow-color:#ff0000}a{CURSOR: url('http://myhoudi.diy.myrice.com/Hand.ani')}a:hover {position:relativeleft:1pxtop:1pxclip:rect()}body{background:url() repeat-xbackground-color:#333color:#FFF}body{background: url()ackground-repeat:repeatbackground-position:centerbackground-attachment: fixedbackground-position:0px -200px}.stage{background-color:#000}.stage #layout td{padding:0px}A,A:link,A:visited{COLOR: #39C}A:hover{COLOR: #3FF}body{scrollbar-face-color:#000000 scrollbar-shadow-color:#AAAAAA scrollbar-highlight-color:#AAAAAA scrollbar-3dlight-color:#AAAAAA scrollbar-darkshadow-color:#AAAAAA scrollbar-arrow-color:#AAAAAA scrollbar-base-color:#AAAAAA scrollbar-track-color:#000000 overflow-y:autoheight:297px filter: chroma(color=#E100E1)}#header{height:430pxbackground:url()filter:alpha(opacity=90)}#header div.lc{}#header div.rc{background:url(
}#header div.tit {font-weight:boldtop:40pxleft:30pxline-height:30pxfont-size:28px}#header div.tit a.titlink:visited{text-decoration:nonefilter:glow(color:#DD002C,strength=3)height:12pxcolor:#ffffff}/*访问后的标题颜色*/ #header div.desc{top:262pxleft:600pxfont-size:15pxfilter:glow(color=blue,strength=3)height:15pxcolor:#ffffff}/*空间简介*/ #tab{BACKGROUND: url(
) no-repeat right topTEXT-ALIGN: centerpadding:5px 0 5px 0top:399px}#tab span{ display:none}#tab A,#tab A:link,#tab A:visited{FONT-SIZE: 12pxBACKGROUND: url(
) no-repeat centerWIDTH: 80pxCOLOR: yellowPADDING-TOP: 5pxTEXT-ALIGN: centerTEXT-DECORATION: none}#tab A:hover {FONT-SIZE: 12pxBACKGROUND: url(
" target="_blank" >
) no-repeat centerLEFT: 1pxPOSITION: relativeTOP: 1px}#tab A.on ,#tab A.on:link,#tab A.on:visited {FONT-SIZE: 12pxBACKGROUND: url(
) no-repeat centerWIDTH: 80pxCOLOR: whitePADDING-TOP: 5pxTEXT-ALIGN: centerTEXT-DECORATION: none}#tab A.on:hover {FONT-SIZE: 12pxBACKGROUND: url(
" target="_blank" >
) no-repeat centerLEFT: 1pxPOSITION: relativeTOP: 1px}#tab2{}#tab2 span{font-size:12pxfont-weight:bold}#tab2 a{color:#39Cfont-size:12px}a.modtit:visited{color:#39C}#tab2 a:hover{color:#3FF}#page{height:30pxfont-size:14pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#000000font-size:14pxfont-weight:bold}#page a.pc{color:#3399CCfont-size:14pxfont-weight:bold}#page a.pc:hover{color:#33FFFF}#page a.pi{padding:3pxcolor:#3399CCfont-size:14px}#page a.pi:hover{color:#33FFFF}.mod{margin-bottom:10px}.modhandle{cursor:move}.modth{height:24px}.modhead{padding:4px 4px 0 4px}.modopt{padding:4px 4px 0 0}.modtit{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtit{color:#FFFtext-decoration:none}a.modtit:visited{color:#FFFtext-decoration:none}a.modtit:hover{color:#CCCtext-decoration: underline}.modtitlink{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtitlink{color:#FFFtext-decoration:none}a.modtitlink:visited{color:#FFFtext-decoration:none}a.modtitlink:hover{color:#CCCtext-decoration: underline}.modact{color:#FFFFFFfont-size:12px}a.modact{color:#FFFtext-decoration:none}a.modact:visited{color:#FFFtext-decoration:none}a.modact:hover{color:#CCCtext-decoration: underline}.modbox{padding:10px 10px 0 10pxbackground-image:url(http://fs01.bokee.net/userfilespace/2006/10/05/luosc164117.gif)border:1px solid #666border-width:0 1px 0 1px}.modtl{background:url(
) no-repeat top leftline-height:1px}.modtc{background:url(
) repeat-x}.modtr{background:url(
) no-repeat top rightline-height:1px}.modbl{background:url(
) no-repeat top leftline-height:1px}.modbc{background:url(
) repeat-x}.modbr{background:url(
) no-repeat top rightline-height:1px}.modlabel{color:#ffffont-size:14pxfont-weight:bold}#m_blog div.tit{color:#FF3366font-size:16pxfont-weight:boldbackground:url(http://tinypic.com/i3ry9g.gif) no-repeat top lefttext-indent: 22pxheight:70pxline-height:75px} #m_blog div.tit a{color:#FF3366font-size:16pxfont-weight:boldbackground:url (
) no-repeat top lefttext-indent: 22pxheight:70pxline-height:75px} #m_blog div.tit a:visited{color:#FF3366text-decoration:none}#m_blog div.date{margin:5px 0 8px 0color:#666}#m_blog div.cnt{color:#FFFline-height:20pxfont-size:14px}#m_blog div.cnt div{font-size:14px}#m_blog div.more{margin:14px 0 16px 0}#m_blog div.more a{color:#3399CCfont-size:14px}#m_blog div.more a:hover{color:#33FFFF}#m_blog div.opt{color:#666666font-size:12px}#m_blog div.opt a{color:#F90font-size:12pxtext-decoration:none}#m_blog div.opt a:hover{color:#FC0text-decoration: underline}#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px dotted #dadada}#m_blog div.none{padding:100px 0 100px 0color:#333333font-size:14px}#m_pro a{color:#39C}#m_pro a:hover{color:#3FF}#m_pro div.image{text-align:center}#m_pro div.act{margin-top:5pxbackground:url(http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=B) no-repeat bottompadding-bottom: 45pxmargin-bottom: 15px}#m_pro div.user{margin-top:10pxfont-size:12pxfont-weight:bold}#m_pro div.desc{color:#666666font-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #D2E9F4}#m_pro td{color:#333333line-height:24pxfont-size:14px}#m_pro .photo{background:#FFFborder:1px solid #DDD}#m_pro .photo td{font-size:12px}#m_pro .photo .image{padding:20px 0 10px 0}#m_pro .photo .line{width:90%line-height:0border-top:1px dashed #DDDfont-size:1px}#m_pro .ref{margin-top:10pxborder:1px solid #DDD}#m_pro .ref .tit{padding-left:10pxbackground:#EEEborder-bottom:1px solid #DDD}#m_pro .ref .cnt{padding:10pxbackground:#FFF}#m_pro .basic td{color:#666font-size:14px}#m_pro .basic .tit{font-weight:bold}#m_pro .basic a:hover{padding:1pxbackground:#261CDCcolor:#FFFtext-decoration:none}#m_pro .basic a.nlk:hover{padding:0pxcolor:#196CCAbackground-color:#FFFtext-decoration:underline}#m_pro .pline{margin-left:5pxmargin-top:10pxline-height:10pxborder-top:1px dashed #A6A6A6}#m_pro .pitem{margin-left:5pxline-height:22pxfont-size:14px}#m_pro .pitem .tit{color:#666}#m_pro .pitem a:hover{padding:1pxbackground:#261CDCcolor:#FFFtext-decoration:none}#mod_album a{color:#39C}#mod_album a:hover{color:#3FF}#m_album div.image{text-align:center}#m_album div.size{text-align:center}#m_album div.page{color:#666666font-size:12pxtext-align:center}#m_album div.page a{color:#39Cfont-size:12px}#m_album div.page a:hover{color:#3FF}#m_album .phpage{margin-top:10pxpadding-bottom:5pxtext-align:center}#m_links div.item{font-size:12px}#m_links div.item a{color:#39C}#m_links div.item a:hover{color:#3FF}#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#mod_track a{color:#CCCC00}#mod_track a:hover{color:#3FF}#m_track A IMG {BORDER-RIGHT: #ffffff thin solidBORDER-TOP: #ffffff thin solidFILTER: alpha(opacity=70)BORDER-LEFT: #ffffff thin solidBORDER-BOTTOM: #ffffff thin solid}#m_track A:hover IMG {FILTER: alpha(opacity=100)}#comm_info{font-family:Arialtext-align:left}#comm_info div.line{height:400pxbackground:url(
) no-repeat 10pxbackground-color:#6F6F08margin-top:5pxline-height:8pxborder-top:1px solid #95D69E}#comm_info a{color:#CCCC00}#comm_info a:hover{color:#3FF}#m_mylink1 div.item{color:#333333font-size:12px}#m_mylink1 div.item a{color:#3399CCfont-size:12pxtext-decoration:none}#m_mylink1 div.item a:hover{color:#33FFFF}#m_mylink1 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_mylink2 div.item{color:#FFFFFFfont-size:12px}#m_mylink2 div.item a{color:#F76809font-size:12pxtext-decoration:none}#m_mylink2 div.item a:hover{color:#FFFFFF}#m_mylink2 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #FFFFFF}#m_mylink3 div.item{color:#333333font-size:12px}#m_mylink3 div.item a{color:#3399CCfont-size:12pxtext-decoration:none}#m_mylink3 div.item a:hover{color:#33FFFF}#m_mylink3 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_mylink4 div.item{color:#333333font-size:12px}#m_mylink4 div.item a{color:#3399CCfont-size:12pxtext-decoration:none}#m_mylink4 div.item a:hover{color:#33FFFF}#m_mylink4 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_artclg div.item{color:#FFFF00font-size:12px}#m_artclg div.item a{color:#FFFF00font-size:12px}#m_artclg div.item a:hover{color:#FFFF00}#m_artclg div.line{margin-top:5pxline-height:8px}#m_filed div.item{color:#666666font-size:12px}#m_filed div.item a{color:#3399CCfont-size:12px}#m_filed div.item a:hover{color:#33FFFF}#m_filed div.line{margin-top:5pxline-height:8px}#m_comment div.item{color:#FFFFFFfont-size:12px}#m_comment div.item a{color:#3399CCfont-size:12px}#m_comment div.item a:hover{color:#FFCC00}#m_comment div.item a.cnt{color:#FFCC00font-size:12pxtext-decoration:none}#m_comment div.item a.cnt:hover{color:#FFCC00text-decoration:underline}#m_comment div.line{margin-top:5pxline-height:8px}#m_albumlist div.note{color:#333333font-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#333333font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#333333font-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #D2E9F4}#m_albumlist div.tit{margin:6px 0 7px 0font-size:14px}#m_albumlist div.tit a{color:#3399CCfont-size:14px}#m_albumlist div.tit a:hover{color:#33FFFF}#m_albumlist span.count{color:#999font-size:12pxfont-weight:bold}#m_albumlist span.size{color:#666font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#3399CCfont-size:12px}#m_albumlist a.act:hover{color:#33FFFF}#m_albumlist a.page{color:#3399CCfont-size:14px}#m_albumlist a.page:visited{color:#3399CC}#m_albumlist a.page:hover{color:#33FFFF}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#FFFFFF}#m_albumlist .phbox{margin-top:15pxmargin-left:15pxtext-align:center}#m_albumlist .phbox .phpage{color:#636363font-size:14px}#m_albumlist .phbox .phinfo{margin:6px 0 2px 0color:#636363font-size:12px}#m_albumlist .phbox .phimg{margin-bottom:10px}#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#333333font-size:12px}#m_friend div.user a{color:#3399CCfont-size:12px}#m_friend div.user a:hover{color:#33FFFF}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #D2E9F4}#m_setting a{color:#3399CC}#m_setting a:hover{color:#33FFFF}#m_setting{line-height:22pxcolor:#333333font-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#666666}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #D2E9F4}#m_sysinfo a{color:#3399CC}#m_sysinfo a:hover{color:#33FFFF}#m_sysinfo{line-height:22pxcolor:#333333font-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#666666font-size:14px}#m_setbase{color:#333333font-size:14px}#m_setbase td{color:#333333font-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#in_comment{width:710px}#in_comment div.tit{margin-bottom:12pxcolor:#333333font-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#333333font-size:12px}#in_comment div.user a{color:#3399CCfont-size:12px}#in_comment div.user a:hover{color:#33FFFF}#in_comment div.user span.date{color:#666666font-size:12px}#in_comment div.desc{color:#FFFFFFfont-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #D2E9F4}#in_send div.tit{margin:10px 0 10px 0color:#333333font-size:14pxfont-weight:bold}#spBlogCmtText{background:url(http://cimg.163.com/movie/0505/09/nana2.jpg) no-repeat centerbackground-attachment:fixedCURSOR:url(http://webme.bokee.com/inc/mouse019.ani)}
