首页 / CSS / CSS中固定宽度布局的详细教程

CSS中固定宽度布局的详细教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS中固定宽度布局的详细教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5319字，纯文字阅读大概需要8分钟。

内容图文

.布局前的认知
1.1 三种基本方案

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。

    固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100 像素宽（最常见的是 960 像素）。

    流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）

    弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。）

1.2 布局高度

多数情况下，布局中结构化元素（乃至任何元素）的高度是 不必或者不应该设定的。因为保持元素 height 属性的默认值 auto 不变，才能使元素根据自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。
1.3 布局宽度

为了使浏览器窗口宽度合理变化，布局能作出适当的调整，我们 需要精细地控制 布局宽度。
2.三栏-固定宽度布局

结构如下：
技术分享

上代码：

XML/HTML Code 复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang= "en" >   
  3. <head>   
  4.     <meta charset= "UTF-8" >   
  5.     <title>三栏-固定宽度布局</title>   
  6.     <style>   
  7.         * {   
  8.              margin : 0;    
  9.              padding : 0;   
  10.         }   
  11.          #wrappe r{   
  12.              width :  960px ;   
  13.              margin : 0  auto ;   
  14.              border : 1px   solid ;   
  15.         }   
  16.         header{   
  17.              background :  #f00 ;   
  18.         }   
  19.         nav{   
  20.              background :  #dcd9c0 ;   
  21.              width :  150px ;   
  22.              float : left ;   
  23.         }   
  24.         article{   
  25.              background :  #ffed53 ;   
  26.              width :  600px ;   
  27.              float :  left ;   
  28.         }   
  29.         aside{   
  30.              background :  #6a6b6c ;   
  31.              width :  210px ;   
  32.              float :  left ;   
  33.         }   
  34.         footer{   
  35.              clear : both ;                
  36.              background :  #6a6b6c ;   
  37.         }   
  38.     </style>   
  39. </head>   
  40. <body>   
  41.     <div id= "wrapper" >   
  42.         <header>   
  43.             This is header.   
  44.         </header>   
  45.         <nav>   
  46.             This is nav<br>   
  47.             This is nav<br>   
  48.             This is nav<br>   
  49.         </nav>   
  50.         <article>   
  51.             This is article.<br>   
  52.             This is article.<br>   
  53.             This is article.<br>   
  54.             This is article.<br>   
  55.             This is article.<br>   
  56.             This is article.<br>   
  57.             This is article.<br>   
  58.             This is article.<br>   
  59.             This is article.<br>   
  60.         </article>   
  61.         <aside>   
  62.             This is aside.   
  63.         </aside>   
  64.         <footer>   
  65.             This is footer.   
  66.         </footer>   
  67.     </div>   
  68. </body>   
  69. </html>  

结果如图：
技术分享

说明几点：

    通过给整个外包装（#wrapper）设定宽度值（960px），并将其水平外边距设定为 auto，就能实现居中。随着向里面添加内容，相关的栏的高度会增加。

    设置宽度并浮动中间三栏（nav、article 和 aside），让它们并排显示。使用属性：width 和 float。

    三栏的总宽度加起来要等于外包装的宽度（150 + 600 + 210 = 960）。同样使用该方法就可以加任意多栏，只要它们的总宽度等于外包装的宽度即可。

    页脚（footer）位于浮动元素后面，所以就会尽量往上移动。解决这个问题的方法就是使用 清除浮动（clear:both;或者使用clear:left;也可以，因为这里只有左浮动元素）。

3.为栏设定内边距和边框

在上面的布局中，只要一调整各栏中的内容，布局就可能超过容器宽度，而右边的栏就可能滑到左边的栏下方。例如为了让内容与栏边界空开距离，为栏添加水平外边距和内边距，或者为了增加爱栏间距，为栏添加外边距，导致布局宽度增大，进而浮动栏下滑；又或者在栏中添加大图片，或者没有空格的长字符串（如长URL），也会导致栏宽大超过布局宽度。

示例：

CSS Code 复制内容到剪贴板
  1. article{   
  2.      background :  #ffed53 ;   
  3.      width :  600px ;   
  4.      float :  left ;   
  5.      padding :  10px   20px ;     /* 添加这一行CSS规则 */   
  6. }  

结果就会变成这样：
技术分享

我们把这种现象称为 浮动滑移，可以使用三种方法来预防发生：

    从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
    在容器内部的元素上添加内边距或外边距。
    使用 CSS3 的 box-sizing 属性切换盒子缩放方式。应该该属性后，给元素添加边框和内边距都不会增大盒子，相反会导致内容变窄。

下面来讨论这三种方法：
3.1 重设宽度以抵消内边距和边框

由于上面给 article 栏添加了左右 20px 的水平边距，故将该栏宽度从 600px 减至 560px，故修改后的 article 栏 css 样式规则如下：

CSS Code 复制内容到剪贴板
  1. article{   
  2.      background :  #ffed53 ;   
  3.      width :  560px ;     /* 这里 */   
  4.      float :  left ;   
  5.      padding :  10px   20px ;    /* 别忘了这里 */   
  6. }  

效果如下：
技术分享

虽然能实现，但每次只要调整内、外边距就要重设布局宽度，非常烦人，而且还可能导致页面错乱。
3.2 给容器内部的元素应用内边距和边框

把外边距和内边距应用到内容元素上确实有效，前提是这些元素没有明确地设定宽度，这样它们的内容才会随着内、外边距的增加而缩小。

    根据盒模型定义，没有宽度的元素在水平方向上会适应其父元素，其内容会随着外边距、边框和内边距的增加而减少。

考虑到将来修改的时候，一栏中可能包含大量不同内容的元素，如果想重新调整内容与容器边界的距离，就必须每个元素都要进行调整，这样不仅麻烦，而且容易出错。况且，给栏添加边框同样会增大栏宽，不可能通过为其包含的内容元素逐个添加应用样式来做到。

所以说，与其为容器中的元素添加外边距，不如 在栏中再添加一个没有宽度的 div，让它包含所有内容元素，然后再给这个 div 应用边框和内边距。如此一来，只要为内部 div 设定一次样式，就可以把让所有内容元素与栏边界保持一致的距离。而且，将来再需要调整时也会很方便。任何新增内容元素的宽度都由这个内部 div 决定。

还是拿 article 栏来开刀：

XML/HTML Code 复制内容到剪贴板
  1. <article>   
  2.     <div class= "inner" >    <!-- 添加一个div -->   
  3.         This is article.<br>   
  4.         This is article.<br>   
  5.         This is article.<br>   
  6.         This is article.<br>   
  7.         This is article.<br>   
  8.         This is article.<br>   
  9.         This is article.<br>   
  10.         This is article.<br>   
  11.         This is article.<br>   
  12.     </div>   
  13. </article>  

增改样式如下：

CSS Code 复制内容到剪贴板
  1. article{   
  2.      background :  #ffed53 ;   
  3.      width :  600px ;   
  4.      float :  left ;   
  5. }    
  6. article .inner{   
  7.      margin :  10px ;   
  8.      border : 2px   solid   red ;   
  9.      padding :  20px ;   
  10. }     

效果如下：
技术分享

从结果可以看出，中间栏的宽度并未因此有多少变化，因为内容区减少的宽度抵消了应用到内部 div 上的外边距、边框和内边距的总宽度。于是，我们可以这样结论：如果布局中的栏是浮动的，而且都设定了宽度，你就不要去动它！要动，就把内容放在内部 div 里，动这个 div。
3.3 使用 box-sizing:border-box

这是最简单的一个方法。只要在三个浮动的栏的 CSS 规则中分别 加上 box-sizing:border-box 声明，再给栏添加内边距（和边框）就不会导致盒子的宽度变化。此时，既不用调整栏宽去抵消增加的内边距，也不用使用内部 div。添加内边距的结果就是内容收缩。

示例：

以下是简介清晰的没有内部 div 的标记：

XML/HTML Code 复制内容到剪贴板
  1. < div   id = "wrapper" >   
  2.      < header >   
  3.          <!-- 标题 -->   
  4.      </ header >   
  5.      < nav >   
  6.          < ul >   
  7.              <!-- 链接 -->   
  8.          </ ul >   
  9.      </ nav >   
  10.      < article >   
  11.          <!-- 文本 -->   
  12.      </ article >   
  13.      < aside >   
  14.          <!-- 文本 -->   
  15.      </ aside >   
  16.      < footer >   
  17.          <!-- 文本 -->   
  18.      </ footer >   
  19. </ div >   

相应的，CSS 规则如下：

CSS Code 复制内容到剪贴板
  1. * {    
  2.      margin : 0;    
  3.      padding : 0;   
  4. }   
  5. #wrappe r{   
  6.      width :  960px ;   
  7.      margin : 0  auto ;   
  8.      border : 1px   solid ;   
  9. }   
  10. header{   
  11.      background :  #f00 ;   
  12. }   
  13. nav{   
  14.     box-sizing: border -box;     /* 这里！ */   
  15.      background :  #dcd9c0 ;   
  16.      width :  150px ;   
  17.      float : left ;   
  18.      padding :  10px   20px ;        /* 添加内边距 */   
  19. }   
  20. article{   
  21.     box-sizing: border -box;     /* 这里！ */   
  22.      background :  #ffed53 ;   
  23.      width :  600px ;   
  24.      float :  left ;   
  25.      padding :  10px   20px ;        /* 添加内边距 */   
  26. }   
  27. aside{   
  28.     box-sizing: border -box;     /* 还有这里！！ */   
  29.      background :  #6a6b6c ;   
  30.      width :  210px ;   
  31.      float :  left ;   
  32.      padding :  10px   20px ;         /* 添加内边距 */   
  33. }   
  34. footer{   
  35.      clear : both ;      /* 清除浮动，防止页脚往上移动 */         
  36.      background :  #6a6b6c ;   
  37. }  

结果如下：

box-sizing:border-box 确实起作用了。
技术分享

多么好用的一个属性啊！当然也就少不了 但是 —— IE6 和 IE7 不支持该属性。

废话少说，解决方案 如下：

使用一个专门解决这个问题的腻子脚本（polyfill），名叫 borderBoxModel.js.
可以使用 条件注释 把它添加到 HTML 标记之后、结束的 </body> 标签之前，以保证在加载 DOM 之后再执行该脚本：

XML/HTML Code 复制内容到剪贴板
  1. < body >   
  2. <!-- HTML 标记 -->   
  3. <!-- 只让 IE8 之前的 IE 加载它 -->   
  4. <!-- [if It IE 8] -->   
  5. < script   src = "helpers/borderBoxModel.js" > </ script >   
  6. <![endif]-- >   
  7. </ body >   

原文：http://www.jb51.net/css/360658.html

内容总结

以上是互联网集市为您收集整理的CSS中固定宽度布局的详细教程全部内容，希望文章能够帮你解决CSS中固定宽度布局的详细教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1118135.html

来源：【匿名】