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进行限制。

 

2.弹性布局

将固定宽度布局转换为弹性布局：设置基准字号，让1em大致相当于10px 10px/16px=62.5%。

.body{
    font-size: 62.5%;
    text-align: center;
}

.root{
    width: 92em;/* 920px*/
    max-width: 95%;
    margin: 0 auto;
    text-align: left;
}

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

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

　当使用常规文本字号时，产生的布局和固定宽度布局效果一致，它会随着文本字号的增加而增加。并不是所有的浏览器支持页面缩放。

 

参考：《精通CSS高级web标准解决方案》