HTML CSS布局 二

基于浮动的布局

基于浮动的布局是最容易使用，也是最可靠的，只需要设置元素的宽度，然后设置为左或者右浮动即可。

1.两列浮动布局

假设页面总的宽度920px，两个元素间距20px。（display:inline 防止IE双外边距浮动产生的bug）；由于元素是浮动的，

将不再文档流中占据空间，将父节点 overflow:hidden;

css代码：

.right {
    width: 650px;
    padding-left: 10px;
    float: right;
    display: inline;
}

.left {
    width: 230px;
    float: left;
    display: inline;
}

2.三列布局

原理和两列布局一致，可以在右元素里面添加两个元素。同理可以实现。

固定宽度、流式布局和弹性布局

以上的例子都是以像素为单位，称为固定宽度的布局。是最简单和最常用的布局方法。

固定宽度布局 缺点：

大屏幕下无法充分利用空间；小屏幕下显示不全；固定宽度的布局适合浏览器默认的文字字号，如果将文本字号增加，会影响界面显示。

1.流式布局

使用流式布局，尺寸是用百分数设置。可以根据浏览器窗口进行伸缩，通常会设置min-width，以免缩放页面造成内容的挤压。

如果设计者使用的宽度是960px,大多数用户的屏幕是1250px来计算。百分比为960/1250=76.8%；

css代码如下：

.root{
    width: 76.8%;
    margin: 0 auto;
    text-align: left;
}

.right {
    width:72.82%;
    float: right;
    display: inline;
}

.left {
    width: 25%;
    float: left;
    display: inline;
}

　　由于页面有伸缩 可以增加 max-widht和min-width进行限制。