CSS学习笔记(八) 页面布局之三栏-固定宽度布局

时间 2019-12-11

标签 css 学习笔记页面布局之三固定宽度栏目 CSS 繁體版

原文原文链接

1.布局前的认知

1.1 三种基本方案

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

固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，通常是 900 到 1100 像素宽（最多见的是 960 像素）。html
流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，可以适应最大和最小的屏幕，业界称之为 响应式设计。）浏览器
弹性。在浏览器窗口变宽时，不只布局变宽，并且全部内容元素的大小也会变化。（实现太过复杂，很少介绍。）app

1.2 布局高度

多数状况下，布局中结构化元素（乃至任何元素）的高度是 没必要或者不该该设定的。由于保持元素 height 属性的默认值 auto 不变，才能使元素根据本身包含内容的增长而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。ide

1.3 布局宽度

为了使浏览器窗口宽度合理变化，布局能做出适当的调整，咱们 须要精细地控制 布局宽度。布局

2.三栏-固定宽度布局

结构以下：spa

上代码：设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏-固定宽度布局</title>
    <style>
        * {
            margin: 0; 
            padding: 0;
        }
        #wrapper{
            width: 960px;
            margin: 0 auto;
            border:1px solid;
        }
        header{
            background: #f00;
        }
        nav{
            background: #dcd9c0;
            width: 150px;
            float:left;
        }
        article{
            background: #ffed53;
            width: 600px;
            float: left;
        }
        aside{
            background: #6a6b6c;
            width: 210px;
            float: left;
        }
        footer{
            clear:both;             
            background: #6a6b6c;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            This is header.
        </header>
        <nav>
            This is nav<br>
            This is nav<br>
            This is nav<br>
        </nav>
        <article>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
            This is article.<br>
        </article>
        <aside>
            This is aside.
        </aside>
        <footer>
            This is footer.
        </footer>
    </div>
</body>
</html>

结果如图：code

说明几点：htm

经过给整个外包装（#wrapper）设定宽度值（960px），并将其水平外边距设定为 auto，就能实现居中。随着向里面添加内容，相关的栏的高度会增长。
设置宽度并浮动中间三栏（nav、article 和 aside），让它们并排显示。使用属性：width 和 float。
三栏的总宽度加起来要等于外包装的宽度（150 + 600 + 210 = 960）。一样使用该方法就能够加任意多栏，只要它们的总宽度等于外包装的宽度便可。
页脚（footer）位于浮动元素后面，因此就会尽可能往上移动。解决这个问题的方法就是使用 清除浮动（clear:both;或者使用clear:left;也能够，由于这里只有左浮动元素）。

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

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

示例：

article{
    background: #ffed53;
    width: 600px;
    float: left;
    padding: 10px 20px;    /* 添加这一行CSS规则 */
}

结果就会变成这样：

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

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

下面来讨论这三种方法：

3.1 重设宽度以抵消内边距和边框

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

article{
    background: #ffed53;
    width: 560px;    /* 这里 */
    float: left;
    padding: 10px 20px;   /* 别忘了这里 */
}

效果以下：

虽然能实现，但每次只要调整内、外边距就要重设布局宽度，很是烦人，并且还可能致使页面错乱。

3.2 给容器内部的元素应用内边距和边框

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

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

考虑到未来修改的时候，一栏中可能包含大量不一样内容的元素，若是想从新调整内容与容器边界的距离，就必须每一个元素都要进行调整，这样不只麻烦，并且容易出错。何况，给栏添加边框一样会增大栏宽，不可能经过为其包含的内容元素逐个添加应用样式来作到。

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

仍是拿 article 栏来开刀：

<article>
    <div class="inner">    <!-- 添加一个div -->
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
        This is article.<br>
    </div>
</article>

增改样式以下：

article{
    background: #ffed53;
    width: 600px;
    float: left;
} 
article .inner{
    margin: 10px;
    border:2px solid red;
    padding: 20px;
}

效果以下：

从结果能够看出，中间栏的宽度并未所以有多少变化，由于内容区减小的宽度抵消了应用到内部 div 上的外边距、边框和内边距的总宽度。因而，咱们能够这样结论：若是布局中的栏是浮动的，并且都设定了宽度，你就不要去动它！要动，就把内容放在内部 div 里，动这个 div。

3.3 使用 `box-sizing:border-box`

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

示例：

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

<div id="wrapper">
    <header>
        <!-- 标题 -->
    </header>
    <nav>
        <ul>
            <!-- 连接 -->
        </ul>
    </nav>
    <article>
        <!-- 文本 -->
    </article>
    <aside>
        <!-- 文本 -->
    </aside>
    <footer>
        <!-- 文本 -->
    </footer>
</div>

相应的，CSS 规则以下：

* { 
    margin: 0; 
    padding: 0;
}
#wrapper{
    width: 960px;
    margin: 0 auto;
    border:1px solid;
}
header{
    background: #f00;
}
nav{
    box-sizing:border-box;    /* 这里！ */
    background: #dcd9c0;
    width: 150px;
    float:left;
    padding: 10px 20px;       /* 添加内边距 */
}
article{
    box-sizing:border-box;    /* 这里！ */
    background: #ffed53;
    width: 600px;
    float: left;
    padding: 10px 20px;       /* 添加内边距 */
}
aside{
    box-sizing:border-box;    /* 还有这里！！ */
    background: #6a6b6c;
    width: 210px;
    float: left;
    padding: 10px 20px;        /* 添加内边距 */
}
footer{
    clear:both;     /* 清除浮动，防止页脚往上移动 */     
    background: #6a6b6c;
}

结果以下：

box-sizing:border-box 确实起做用了。

当咱们取消勾选该属性时，footer 栏就会因为 article栏的推挤产生了浮动滑移，移位到 nav栏下方。

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

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

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

<body>
<!-- HTML 标记 -->
<!-- 只让 IE8 以前的 IE 加载它 -->
<!-- [if It IE 8] -->
<script src="helpers/borderBoxModel.js"></script>
<![endif]-->
</body>

备忘：【关于表现性标记的思考】、【子-星选择符】、【预防过大的元素】。

参考资料

CSS设计指南