最近刚完<head first html&css> ,现在把书中提到的布局简单介绍一下：
先简单介绍下流概念：流是浏览器在页面上摆放html元素用的方法，浏览器从上到下按遇到的元素来显示各个元素，有点像流水的感觉。
流体布局：
A、float排版方法：
原理：把边栏方放到主内容之上，页头之下，设置边框宽度和float(左或者右)了，就可以设置成两边栏的布局，当边栏的流出页脚的时候，页脚还可以使用clear属性。内元素image也可以使用float排版方法使文字围绕其摆放。
优点：设计挺方便的，容易理解。
缺点：由于设定了边栏的宽度，用较小的页面来观看的时候（移动端），就会出现主内容小，边栏大的情况，要拉动滚动条才能看完主内容。
B、对主内容使用float "left"：
原理：把边栏放回主内容之下，固定主内容宽度，把主内容浮动到左边，设置页脚的clear为左边
优点：看不出
缺点：边栏太过于宽
冻结布局：把布局锁定，当用户调整屏幕大小时候，设计仍能保持原样
原理：创建一个div把整body里面的内容都包裹起来，然后制定宽度即可。
优点：布局不会乱
缺点：屏幕大小有限制，屏幕过小或过大时浏览体验差
凝胶布局
原理：在冻结布局的基础上设置左右外边距为auto
优点：布局不会乱
缺点：还是有屏幕大小限制
表格布局
原理：创建div把内容包起来，css定义给display:table； 用一个div把行把起来，css定义display:table-row; 剩下列里面装display:table-cell,vertical-align:top;
优点：按tabel格式思路来摆放元素，form可以此布合用
缺点：要理解tabel格式思路
固定定位
原理：在屏幕上固定位置显示，那些烦人广告就是啦， 在css设置position:fixed，然后设置top，left值
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
