负边距实现两栏，三栏布局

clear:both 清除浮动

两栏式：

margin-right:-250px 右边内容覆盖左边250px内容

margin-right:250px  在左边套用一个div，然后距离后边预留出250px,这样右边覆盖的250px正好布局两栏

三栏式：

同理两栏式后

margin-left:250px  将最左的内容左浮动，留出250px给自己，同时中间的内容自适应，三栏式形成

圣杯布局：

特色，先写中间的部分，圣杯杯体部分，再写两边的左右部分，将父元素定位：padding：0 200px 0 250px

左边：margin-left:-100%  左边的部分相对中间的部分居左覆盖

右边:margin-right:-200% 右边部分相对中间部分居右

中间：position:relative 相对定位，将左边部分移除中间覆盖部分

三栏式布局形成

960栅格式布局法：

在1024*768的分辨率下，当宽为960时其分辨率效果达到最好

通常有12列，16列，24列布局法

12列式： 间距20px，每格60px,三格式布局

16列式：间距20px，每格40px,四格式布局

24列式：间距10px,每格30px，多格式布局

BootStrap框架是目前应用最广泛的框架之一，是基于JQury的一种框架技术

container容器，在一个body中，可以并排多个，但一般情况下只有一个，需要固定宽度

        fluid是100%宽度

row行，必须写在container中，否则会跑出页面

col列，col-xs-1,在超小屏幕小，占1列

        col-xs-push-2，在超小屏幕下，根据兄弟元素，推2格

        col-xs-pull-2,在超小屏幕下，根据兄弟元素，拉2格

        col-xs-offset-2,针对前后定位后的相对前一元素，推动2格

xs超小屏幕  像素小于700，手机    

sm小屏幕       像素在768---900多之间，平板

md中等屏幕    像素在900--1200之间，普通用户

lg超大屏幕    像素在1200以上，高清或宽屏用户