使用em为单位制作两列弹性布局

标签：style   blog   color   使用   os   strong   io   问题   

一、DIV布局按照定位的方法分为：浮动方法（float），坐标定位方法（position），还有就是两者相结合的方法。


    二、DIV布局按照定义单位的不同可分为：固定宽度布局、流体布局、弹性布局和混合布局。

   　固定宽度布局是将宽度用像素单位定义，它的宽度总保持不变，也被成为“冰布局”。

　　它的缺点是由于宽度固定，无论浏览器窗口尺寸有多大，它的尺寸也不变，无法充分利用空间。

　　当浏览器窗口变小时，会出现水平滚动条。这些缺点可以用其他两种布局方法解决。

　　流体布局的单位是用百分比控制的，不是像素。这使流体布局能够相对于浏览器的窗口进行伸缩。

　　当窗口变大，列变宽，相反，窗口变小，列的宽度也减小，这种布局方法可以有效的利用空间。

　　当然，它也不是没有缺点，当窗口变小时，流体布局中的字体就会挤到一起，很难看清。这种问题可以用弹性布局方法解决。

    弹性布局是用相对于字号来设置元素宽度的，而不是浏览器的宽度，通过用em为单位设置宽度，可以让字号增加时整个布局随之扩大。

　　但它的缺点和固定宽度布局相同，不能很好的利用可用空间，而且在字体过大时，列宽度也会随之变大，导致浏览器中出现滚动条。

    混合布局顾名思意就是将集中布局方法组合起来使用，取各自之所长，这方面的例子我还没有做过，大家可以经过学习自己摸索，万变不离其踪，方法只有这几种，全看自己怎么应用了。


　　布局方法有的宽度单位运用的是像素，有的是百分比，这两种都有各自的优缺点，百分比的布局更适应浏览器窗口大小变化时产生的差异，可以充分利用空间，但当浏览器窗

口过小时，内容会变得太窄。

　　另外一种布局方法可以解决这个问题，它就是弹性布局。弹性布局是用相对于字号来设置元素单位的，而不是浏览器的宽度。

　　通过以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。

    现在我们做个两栏布局例子，将所有像素宽度转换为使用em为单位的弹性布局。

   主要技巧就是设置基础字号，让1em大致相当于12像素（一般做页面时用到的字号），这时需要利用到浏览器默认字体的相关知识。大多数浏览器的默认字号是16像素，12像素大约是16像素的75%，所以将页面上的字号设置为75%：

    body {
    font-size:75%
    }

下面将CSS中的固定宽度转换为弹性布局：

body {font-size:75%;margin:0px;background:#FFF;color:#000;} /*页面层容器*/
    #wrap {width:75em;clear:both;} /*页面头部*/
    #Header {clear:both;height:8.3em;background:#FFCC99;} /*页面主体*/
    #PageBody {clear:both;height:33.3em;background:#CCFF00;}
    #Sidebar {width:16.7em;float:left;}
    #MainBody {width:58.3em;float:right;height:100%;background:#EEE;} /*页面底部*/
  #Footer {clear:both;height:4.2em;background:#00FFFF;}

Html不做修改，还保持以下结构：

<div id="wrap"><!--页面层容器-->
  <div id="Header">页面头部</div>
  <div id="ageBody"><!--页面主体-->
  <div id="Sidebar">侧边栏</div>
  <div id="MainBody">主体内容</div>
  </div>
  <div id="Footer">页面底部</div>
  </div>

在常规文本字号时，页面中的布局和原来基本相似，但当页面中的字体变大时，布局就会随之变大了，缩小时亦然。

使用em为单位制作两列弹性布局,布布扣,bubuko.com

使用em为单位制作两列弹性布局

标签：style   blog   color   使用   os   strong   io   问题   

原文地址：http://www.cnblogs.com/aobingyan/p/3891148.html