小白学前端08

两列布局：
1.容器div水平居中：定义宽度，将水平外边距设置为auto
    width:920px --适合分辨率1024*768的屏幕(不过920px是怎么肯定出来的呢？)
    margin:0 auto -- 实现水平居中

    用css进行布局有几种不一样的方式，包括绝对定位和使用负的边距值
    基于浮动的布局是最容易使用的，也是最可靠的，只需设置但愿定位的元素的宽度而后将它向左或向右浮动
    但浮动的元素再也不占据文档流中的任何空间，也就再也不对包围它们的块框产生任何影响，故需进行清理
    
    通常将两列都向左浮动，而后使用外边距或内边距在两列之间建立一个隔离带
    为了防止浮动元素一列退到另外一列的下面(太挤了)，不使用水平外边距或内边距来创建隔离带而是一个元素向左一个向右

2. 每一列设置想要的宽度，次要内容向左，主内容向右，主内容添一点内边距，来避免文本紧挨着元素的右边缘

三列布局：

以上布局，宽度都以像素为单位，称为固定宽度的布局，知道了每一个元素的精确度，就可以对它们进行精确的布局，并且知道全部东西在什么地方

缺点：由于它们都是固定的，不管窗口尺寸有多大，它们的尺寸老是不变；高分辨率屏幕下为1024*760建立的会缩小并出如今屏幕中间，在低分辨率的屏幕下，会致使水平滚动，所以被认为是：糟糕的权宜之计

 

>>>流式布局/弹式布局

流式布局:尺寸是用百分比而不是像素，相对于浏览器窗口进行伸缩

缺点：1.在窗口宽度较小时，行变得很是窄，很难阅读，多列布局尤为如此，有必要添加以像素或em为单位的min-width以防布局变得太窄 2.若设计横跨整个窗口，则行变得太长也很难阅读，用百分数设置内边距和外边距使容器只跨越宽度的一部分，如85%

固定宽度转化为流式布局

1.将容器宽度设置为窗口总宽度的百分数（若设计者使用宽度为960像素，而大多数用户的浏览器窗口设置为1250像素，那么使用的百分数为：(960/1250)*100=76.8%）

2.以容器宽度的百分比形式设置主内容区域和次要内容区域的宽度

两列：670/920=72.82% 20/920=2.18% 230/920=25%   三列： 400/670=59.7%   230/670   20/670