一、单列布局：

这是最简单的一种布局方式，之所以给出该示例，还是为了保证本篇博客的完整性。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>固定宽度布局</title>

<style type="text/css">

#header,#pagefooter,#content {

    border: 1px solid red;

    margin: 10px auto 10px 10px;

    padding: 5px;

    width: 360px;

}

</style>

</head>

<body>

<div id="header">

    <h2>Page Header</h2>

    <p>

        这是一行文本，这里作为样例，显示在布局框中。<br/>

        这是一行文本，这里作为样例，显示在布局框中。

    </p>

</div>

<div id="content">

    <h2>Page Content</h2>

    <p>

        这是一行文本，这里作为样例，显示在布局框中。<br />

        这是一行文本，这里作为样例，显示在布局框中。

    </p>

</div>

<div id="pagefooter">

    <h2>Page Footer</h2>

    <p>这是一行文本，这里作为样例，显示在布局框中。</p>

</div>

</body>

</html>

从CSS代码可以看到，3个div的宽度都设置为固定值360像素，同时将margin设置为margin: 10px auto 10px 10px，从而实现了右侧好像有个弹簧，将他们全部挤到左侧，反之，如果想把他们全部挤到左侧，可以将margin设置为margin: 10px 10px 10px auto。见如下效果图。

二、“1-2-1”固定宽度布局：

该布局也是经常会用到的，这里我们先给出最终的效果图，然后再给出代码，以便大家都能现有一个感官上的认识，再看code就会容易很多。


      下面为与上图匹配的HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>布局固定宽度</title>

<style type="text/css">

div ,p, h2 {

    margin: 2px;

    padding: 5px;

}

#container {

    width: 612px;

    margin: 10px auto;

}

#header,#footer {

    width: 596px;

    border: 1px solid red;

}

#content {

    float: left;

    width: 360px;

    border: 1px solid red;

}

#side {

    float: left;

    width: 220px;

    border: 1px solid red;

}

#footer {

    clear: both;

}

</style>

</head>

<body>

<div id="container">

    <div id="header">

        <h2>Page Header</h2>

    </div>

    <div id="content">

        <h2>Page Content 1</h2>

        <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

    </div>

    <div id="side">

        <h2>Side Bar 1</h2>

        <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>

    </div>

    <div id="footer">

        <h2>Page Footer</h2>

        <p>这是一行文本，这里作为样例，显示在布局框中。</p>

    </div>

</div>

</body>

</html>

这里需要主要关注的是CSS中#content和#side都被设置为向左浮动float: left，二者的宽度相加等于总宽度，例如这里将它们的宽度分别设置为360px和220px。本例出于方便展示的目的，添加了padding/border/margin将各个div的边界显示的分离出来，这样#content和#side每个div的实际所占宽度均为自身宽度 + (5px + 5px) + border(1px + 1px) + margin(2px + 2px)。最后需要注意的是#footer的CSS中添加了clear:both，否则如本例content的高度高于side高度，footer将会被content的底部覆盖，这是因为float为left的div没有在标准流中。如下图为#footer去掉clear:both之后的效果。

三、“1-3-1”固定宽度布局：

和上面的1-2-1固定布局一样，该布局也是经常会用到的，这里我们还是给出最终的效果图，然后再给出代码，以便大家都能现有一个感官上的认识，再看code就会容易很多。

      和上例相比，该示例在代码中只是简单的多出了一个div(#navi)，其CSS中也包含float:left。剩下就是其他相关div的宽度需要重新计算，计算方式等同于1-2-1给出的公式。下面为与改图匹配的HTML代码。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>布局固定宽度</title>

<style type="text/css">

div, p, h2 {

    margin: 2px;

    padding: 5px;

}

div {

    border: 1px solid red;

}

#container {

    width: 788px;

    margin: 10px auto;

    border: 0;

}

#header,#footer {

    width: 772px;

}

#navi {

    float: left;

    width: 160px;

}

#content {

    float: left;

    width: 360px;

}

#side {

    float: left;

    width: 220px;

}

#footer {

    clear: both;

}

</style>

</head>

<body>

<div id="container">

    <div id="header">

        <h2>Page Header</h2>

    </div>

    <div id="navi">

        <h2>Navi Bar 1</h2>

        <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

    </div>

    <div id="content">

        <h2>Page Content 1</h2>

        <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

    </div>

    <div id="side">

        <h2>Side Bar 1</h2>

        <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>

    </div>

    <div id="footer">

        <h2>Page Footer</h2>

        <p>这是一行文本，这里作为样例，显示在布局框中。</p>

    </div>

</div>

</body>

</html>

四、“1-((1-2)+1)-1”固定宽度布局：

根据下面的效果图，再结合前面的示例，相信大家能够很快理解该布局的含义。

与上图匹配的代码如下，与前面一个示例相比主要的变化是加入了#left-container和#right-container两个div。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>布局固定宽度</title>

<style type="text/css">

div, p, h2 {

    margin: 2px;

    padding: 5px;

}

div {

    border: 1px solid red;

}

#container {

    width: 788px;

    margin: 10px auto;

    border: 0;

}

#header,#footer {

    width: 772px;

}

#left-container {

    float: left;

    width: 552px;

}

#navi {

    float: left;

    width: 160px;

}

#content {

    float: left;

    width: 360px;

}

#right-container {

    float: left;

    width: 204px;

}

#side {

    width: 188px;

}

#footer {

    clear: both;

}

</style>

</head>

<body>

<div id="container">

    <div id="header">

        <h2>Page Header</h2>

    </div>

    <div id="left-container">

        <div id="banner">

            <h2>Banner</h2>

            <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

        </div><!-- end of banner -->

        <div id="navi">

            <h2>Navi Bar 1</h2>

            <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

        </div>

        <div id="content">

            <h2>Page Content 1</h2>

            <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>

        </div>

    </div><!-- end of left container -->

    <div id="right-container">

        <div id="side">

            <h2>Side Bar 1</h2>

            <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>

        </div>

        <div id="side">

            <h2>Side Bar 2</h2>

            <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>

        </div>

    </div><!-- end of right container -->

    <div id="footer">

        <h2>Page Footer</h2>

        <p>这是一行文本，这里作为样例，显示在布局框中。</p>

    </div>

</div>

</body>

</html>

注：该篇博客源自《CSS设计彻底研究》中的第十三章，书中的例子简明扼要、通俗易懂，因此选取部分主要内容与大家分享，同时也便于今后自己的在线查阅。

web前端学习笔记(CSS固定宽度布局)的更多相关文章

  1. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  2. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  3. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  4. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  5. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  6. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  9. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

随机推荐

  1. 【C-顺序程序结构】

    一.C语句 可分为以下五类: ① 表达式语句 表达式: ②.函数调用语句 函数名(实际参数表); ③.控制语句 条件判断语句:if语句.switch语句: 循环执行语句:do while语句.whil ...

  2. 《Python标准库》 目录

    目录 译者序序前言第1章 文本1.1 string—文本常量和模板1.1.1 函数1.1.2 模板1.1.3 高级模板1.2 textwrap—格式化文本段落1.2.1 示例数据1.2.2 填充段落1 ...

  3. IOS 通过苹果开放API检测更新

    #define APPID @"1067207206" -(void)onCheckVersion { NSDictionary *infoDic = [[NSBundle mai ...

  4. cocos2d-x 2.2.2 android平台移植

    1.完成以上工具的下载安装--cocos2d-x 2.2.2 --eclipse+adt+sdk --ndk 2.创建cocos2d-x工程 在"cocos2d-x-2.2.2\tools\ ...

  5. Blend 2015 教程 （三） 模板

    前一篇讲述了一些基本样式的修改方法,并搭建了Style层的基本框架,本篇将进一步修改ListBox的样式. 1. 首先选中ListBox控件,在美工板导航栏中点击ListBox,选择 编辑其他模板-编 ...

  6. C#中的线程二（Cotrol.BeginInvoke和Control.Invoke）

    C#中的线程二(Cotrol.BeginInvoke和Control.Invoke) 原文地址:http://www.cnblogs.com/whssunboy/archive/2007/06/07/ ...

  7. 设计模式之美：Private Class Data（私有类数据）

    索引 意图 结构 参与者 适用性 效果 实现 实现方式(一):实现对初始化数据的封装. 意图 封装类的初始化数据,控制对类的属性的更改,并保持类数据与使用数据的方法间的隔离. Encapsulate ...

  8. 解决ng界面长表达式(ui-set)

    本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题. 在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时 ...

  9. Cassandra中的数据一致性

       Cassandra中数据一致性指的是数据行在各个复制节点(replicas)上的更新和同步程度.通过提供tunable consistency,Cassandra扩展了eventual cons ...

  10. Silverlight中将WriteableBitmap互转byte数组

    //WriteableBitmap to ARGB ;    , result, , len);    , bmp.Pixels, , buffer.Length); }