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

一、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

时间: 2024-09-30 09:32:22

使用em为单位制作两列弹性布局的相关文章

css 两列自适应布局的4种思路

前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl

布局一 两列自适应布局

<!DOCTYPE html><html>     <head>          <meta charset="UTF-8">          <title>两列自适应布局</title>          <style type="text/css"> .out{ width: 90%; height: 500px; margin: 0 auto; background: ye

CSS两列自适应布局

两列布局,一边固定,一边自适应,很常见,可不见得都能写好,就像我. 在一通搜索后,总结了几种方法. 1.CSS3 Flex-Box 其实我最早知道的是这种方法,之前也记录过. 弹性方框模型 (Flexible Box Model)笔记 2.来自div+css自适应两列布局,一列定宽,一列自适应 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Doc

两列自适应布局

目的: 想要在网页中实现自适应两列布局,即左边一列是固定宽度的,右边一列的宽度等于屏幕宽减去左边的宽度(或相反). 分析: 需要满足三个要求: ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法(不考虑绝对定位): 组合起来,会有很多种实现方式. 方法: <div class="left"></div> <div class="main"></div> 1.floa

css自适应布局(两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应)

1.两列自适应 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> #left{float: left;background: #ccc;height: 40

一个自适应的宽度的两列网页布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

div 两列式布局

<html>    <head>       <style>       #div1{      background-color:green;      height:200px; float:left; width:200px; }    #div2{      background-color:silver;      height:200px;          }     </style>    </head>  <body>

任意列+左右两列等高布局,并要求有最小高度

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

两列布局实现方法

两列布局的实现方式有很多,现根据不同需求列出常用的几种 一.两列固定布局 1.普通的浮动布局 两列固定布局,已知左列和右列内容的宽度,可以用float来实现 html: <div class="wrap clearfix"> <div class="left"> <p>左侧固定宽度</p> <p>左侧固定宽度</p> <p>左侧固定宽度</p> <p>左侧固定