一、单列布局：

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

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>固定宽度布局</title>
  4. <style type="text/css">
  5. #header,#pagefooter,#content {
  6.     border: 1px solid red;
  7.     margin: 10px auto 10px 10px;
  8.     padding: 5px;
  9.     width: 360px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id="header">
  15.     <h2>Page Header</h2>
  16.     <p>
  17.         这是一行文本，这里作为样例，显示在布局框中。<br/>
  18.         这是一行文本，这里作为样例，显示在布局框中。
  19.     </p>
  20. </div>
  21. <div id="content">
  22.     <h2>Page Content</h2>
  23.     <p>
  24.         这是一行文本，这里作为样例，显示在布局框中。<br />
  25.         这是一行文本，这里作为样例，显示在布局框中。
  26.     </p>
  27. </div>
  28. <div id="pagefooter">
  29.     <h2>Page Footer</h2>
  30.     <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  31. </div>
  32. </body>
  33. </html>

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

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

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


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

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>布局固定宽度</title>
  4. <style type="text/css">
  5. div ,p, h2 {
  6.     margin: 2px;
  7.     padding: 5px;
  8. }
  9. #container {
  10.     width: 612px;
  11.     margin: 10px auto;
  12. }
  13. #header,#footer {
  14.     width: 596px;
  15.     border: 1px solid red;
  16. }
  17. #content {
  18.     float: left;
  19.     width: 360px;
  20.     border: 1px solid red;
  21. }
  22. #side {
  23.     float: left;
  24.     width: 220px;
  25.     border: 1px solid red;
  26. }
  27. #footer {
  28.     clear: both;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="container">
  34.     <div id="header">
  35.         <h2>Page Header</h2>
  36.     </div>
  37.     <div id="content">
  38.         <h2>Page Content 1</h2>
  39.         <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  40.     </div>
  41.     <div id="side">
  42.         <h2>Side Bar 1</h2>
  43.         <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
  44.     </div>
  45.     <div id="footer">
  46.         <h2>Page Footer</h2>
  47.         <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  48.     </div>
  49. </div>
  50. </body>
  51. </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代码。

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>布局固定宽度</title>
  4. <style type="text/css">
  5. div, p, h2 {
  6.     margin: 2px;
  7.     padding: 5px;
  8. }
  9. div {
  10.     border: 1px solid red;
  11. }
  12. #container {
  13.     width: 788px;
  14.     margin: 10px auto;
  15.     border: 0;
  16. }
  17. #header,#footer {
  18.     width: 772px;
  19. }
  20. #navi {
  21.     float: left;
  22.     width: 160px;
  23. }
  24. #content {
  25.     float: left;
  26.     width: 360px;
  27. }
  28. #side {
  29.     float: left;
  30.     width: 220px;
  31. }
  32. #footer {
  33.     clear: both;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="container">
  39.     <div id="header">
  40.         <h2>Page Header</h2>
  41.     </div>
  42.     <div id="navi">
  43.         <h2>Navi Bar 1</h2>
  44.         <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  45.     </div>
  46.     <div id="content">
  47.         <h2>Page Content 1</h2>
  48.         <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  49.     </div>
  50.     <div id="side">
  51.         <h2>Side Bar 1</h2>
  52.         <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
  53.     </div>
  54.     <div id="footer">
  55.         <h2>Page Footer</h2>
  56.         <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  57.     </div>
  58. </div>
  59. </body>
  60. </html>

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

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

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

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>布局固定宽度</title>
  4. <style type="text/css">
  5. div, p, h2 {
  6.     margin: 2px;
  7.     padding: 5px;
  8. }
  9. div {
  10.     border: 1px solid red;
  11. }
  12. #container {
  13.     width: 788px;
  14.     margin: 10px auto;
  15.     border: 0;
  16. }
  17. #header,#footer {
  18.     width: 772px;
  19. }
  20. #left-container {
  21.     float: left;
  22.     width: 552px;
  23. }
  24. #navi {
  25.     float: left;
  26.     width: 160px;
  27. }
  28. #content {
  29.     float: left;
  30.     width: 360px;
  31. }
  32. #right-container {
  33.     float: left;
  34.     width: 204px;
  35. }
  36. #side {
  37.     width: 188px;
  38. }
  39. #footer {
  40.     clear: both;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div id="container">
  46.     <div id="header">
  47.         <h2>Page Header</h2>
  48.     </div>
  49.     <div id="left-container">
  50.         <div id="banner">
  51.             <h2>Banner</h2>
  52.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  53.         </div><!-- end of banner -->
  54.         <div id="navi">
  55.             <h2>Navi Bar 1</h2>
  56.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  57.         </div>
  58.         <div id="content">
  59.             <h2>Page Content 1</h2>
  60.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  61.         </div>
  62.     </div><!-- end of left container -->
  63.     <div id="right-container">
  64.         <div id="side">
  65.             <h2>Side Bar 1</h2>
  66.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
  67.         </div>
  68.         <div id="side">
  69.             <h2>Side Bar 2</h2>
  70.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
  71.         </div>
  72.     </div><!-- end of right container -->
  73.     <div id="footer">
  74.         <h2>Page Footer</h2>
  75.         <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  76.     </div>
  77. </div>
  78. </body>
  79. </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. UITextField 的重写

    在很多产品设计的时候,产品设计人员设计出来的输入框总会要求,文字的内容距离做边框多少像素,编辑区域的其实点,距离左边多少像素,很多人绝的难以适应!其实这些都不存在很大的技术难度,一下这些方式都可以达到 ...

  2. Android ExpandableListView

    ExpandableListView 结合SimpleExpandableListAdapter用法 最终实现效果: activity_main.xml <?xml version=" ...

  3. C#的winform编程入门简单介绍

    C#中事件.事件委托.事件的订阅 例子: using System.Timers; Timer t1 = new Timer(); t1.Tick += new EventHandler(XX); p ...

  4. 对部分Java名词的总结

    对部分Java名词的总结: 前端技术: CSS:是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术. Boot ...

  5. C++混合编程之idlcpp教程Python篇(8)

    上一篇在这 C++混合编程之idlcpp教程Python篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial6中,同样加入了四个文件:Pyt ...

  6. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...

  7. UML-用例图

    用例图是指由参与者.用例以及它们之间的关系构成的用于描述系统功能的视图.用例图是被称为参与者的外部用户所能观察到的系统功能的模型图,呈现了一些参与者和一些用例,以及它们之间的关系,主要用于对系统.子系 ...

  8. 旺信UWP公测邀请

    各位园主好,今天已将旺信Win10版提交到商店Beta测试. 哪位朋友需要邀请码的,请在评论中回复,我给你私信. 数量有限,共10枚. 2016/3/10 14:55 更新 10枚邀请码已发给前10位 ...

  9. JS、LUA都可以开发移动应用

    蓝色互动,大众点评.韩都衣舍.汉庭.携程旅游.华夏基金.中国农业银行等好多知名APP开发商,正在使用, 领先的快速移动应用开发平台 http://www.deviceone.net?00001 应用开 ...

  10. 64位进程池HashCode兼容处理

    背景 net旧项目使用32位生成的HashCode,存储到数据库中.迁移到64位上,就需要对HashCode做兼容处理. 解决方案 1:进程池配置支持32位程序. 2:对Hashcode做兼容处理,[ ...