CSS中固定不动宽度合理布局的详尽实例教程

日期：2021-01-20 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

.合理布局前的认知能力
1.1 3种基础计划方案

多栏合理布局有3种基础的完成计划方案：固定不动宽度、流动性、延展性。

    固定不动宽度。合理布局的尺寸不容易随客户调剂访问器对话框尺寸而转变，1般是 900 到 1100 像素宽（最多见的是 960 像素）。

    流动性。合理布局的尺寸会随客户调剂访问器对话框尺寸而转变。（融合 CSS 新闻媒体查寻，可以融入最大和最少的显示屏，业界称之为 回应式设计方案。）

    延展性。在访问器对话框变宽时，不但合理布局变宽，并且全部內容元素的尺寸也会转变。（完成太过繁杂，很少详细介绍。）

1.2 合理布局高宽比

大部分状况下，合理布局中构造化元素（甚至任何元素）的高宽比是 无须或不可该设置的。由于维持元素 height 特性的默认设置值 auto 不会改变，才可以使元素依据自身包括內容的提升而在竖直方位上拓展。这样拓展的元素会把正下方的元素向下推，而合理布局也能随內容数量的增减而竖直伸缩。
1.3 合理布局宽度

以便使访问器对话框宽度有效转变，合理布局能作出适度的调剂，大家 必须细致地操纵 合理布局宽度。
2.3栏-固定不动宽度合理布局

构造以下：

上编码：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>3栏-固定不动宽度合理布局</title>   
  6.     <style>   
  7.         * {   
  8.             margin: 0;    
  9.             padding: 0;   
  10.         }   
  11.         #wrapper{   
  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，就可以完成垂直居中。伴随着向里边加上內容，有关的栏的高宽比会提升。

    设定宽度并波动正中间3栏（nav、article 和 aside），让它们并排显示信息。应用特性：width 和 float。

    3栏的总宽度加起来要等于外包装的宽度（150 + 600 + 210 = 960）。一样应用该方式便可以加随意多栏，要是它们的总宽度等于外包装的宽度便可。

    页脚（footer）坐落于波动元素后边，因此就会尽可能往上挪动。处理这个难题的方式便是应用 消除波动（clear:both;或应用clear:left;还可以，由于这里仅有左波动元素）。

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

在上面的合理布局中，要是1调剂各栏中的內容，合理布局便可能超出器皿宽度，而右侧的栏便可能滑到左侧的栏正下方。比如以便让內容与栏界限空开间距，为栏加上水平外边距和内边距，或以便提升爱栏间隔，为栏加上外边距，致使合理布局宽度增大，进而波动栏下滑；又或在栏中加上大照片，或沒有空格的长标识符串（如长URL），也会致使栏宽敞超出合理布局宽度。

示例：

CSS Code拷贝內容到剪贴板
  1. article{   
  2.     background: #ffed53;   
  3.     width: 600px;   
  4.     float: left;   
  5.     padding: 10px 20px;    /* 加上这1行CSS标准 */  
  6. }  

結果就会变为这样：

大家把这类状况称为 波动滑移，可使用3种方式来防止产生：

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

下面来探讨这3种方式：
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 给器皿內部的元素运用内边距和边框

把外边距和内边距运用到內容元素上的确合理，前提条件是这些元素沒有确立地设置宽度，这样它们的內容才会伴随着内、外边距的提升而变小。

    依据盒实体模型界定，沒有宽度的元素在水平方位上会融入其父元素，其內容会伴随着外边距、边框和内边距的提升而降低。

考虑到到未来改动的情况下，1栏中将会包括很多不一样內容的元素，假如想再次调剂內容与器皿界限的间距，就务必每一个元素都要开展调剂，这样不但不便，并且非常容易错误。更何况，给栏加上边框一样会增大栏宽，不能能根据为其包括的內容元素逐一加上运用款式来保证。

因此说，与其为器皿中的元素加上外边距，比不上 在栏中再加上1个沒有宽度的 div，让它包括全部內容元素，随后再给这个 div 运用边框和内边距。这般1来，要是为內部 div 设置1次款式，便可以把让全部內容元素与栏界限维持1致的间距。并且，未来再必须调剂时也会很便捷。任何新增內容元素的宽度都由这个內部 div 决策。

還是拿 article 栏来开刀：

XML/HTML Code拷贝內容到剪贴板
  1. <article>   
  2.     <div class="inner">    <!-- 加上1个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

这是最简易的1个方式。要是在3个波动的栏的 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. #wrapper{   
  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 的确起功效了。

多么的功能强大的1个特性啊！自然也就少不上 可是 —— IE6 和 IE7 不适用该特性。

空话少说，处理计划方案 以下：

应用1个专业处理这个难题的腻子脚本制作（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>  
上一篇：CSS3的Flexible Boxes详尽应用实例教程 返回下一篇：没有了