CSS——布局

CSS的布局方式有：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 

这里主要说三种常用的布局方式：

（1）瀑布流布局
视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，不断加载数据块并附加至当前尾部。
优点
a、有效降低了界面复杂度，节省了空间，不需要臃肿复杂的页码导航链接或按钮。
b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
a、有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
b、额外的复杂度：
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，测试与调整工作需要操作。
c、考虑哪种方式更利于SEO，集中在一页当中动态加载数据，与一页一页的输出相比。

(2)、流式布局 
固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

(3)、响应式布局
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点
a、面对不同分辨率设备灵活性强
b、能够快捷解决多设备显示适应问题
缺点
a、兼容各种设备工作量大，效率低下
b、代码累赘，会出现隐藏无用的元素，加载时间加长
c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 

布局代码例子：

（1）两列等比例布局

css

#content{
  float:left;
  width:500px;
  width:66%;    
}

#side{
  float:right;
  width:500px;
  width:33%;    
}

html

<div id="content"></div>
<div id="side"></div>

(2)1-3-1中列和侧列宽度固定的变宽布局

即中列和左侧是固定的，右侧是变宽的

CSS

.header, .footer, .container {
    margin: 0 auto;
    width: 85%;
}
.navi {
    flaot: left;
    width: 150px;
}
.content {
    float: left;
    width: 250px;
}
.sideWrap {
    float: right;
    width: 100%;
    margin-right: -400px;
}
.side {
    margin-right: 400px;
}
.footer {
    clear: both;
}

html

<div class="header">header</div>
<div class="container">container
   <div class="navi">navi</div>
    <div class="content">content</div>
    <div class="sideWrap">sideWrap
         <div class="side">side</div>
     </div>
</div>
<div class="footer">footer</div>