CSS3页面布局-三栏-固定宽度布局

阿立聊代码

已于 2024-08-23 17:24:40 修改

阅读量212

点赞数 6

分类专栏：网页设计文章标签： css3 css html 页面布局固定宽度布局

于 2024-08-23 17:09:57 首次发布

本文链接：https://blog.csdn.net/qq_36324341/article/details/141470373

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

布局的基本概念

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

固定宽度布局：大小不会随用户调整浏览器窗口大小。

一版960-1100,960常见，可以被3,4,5,6,8,10,12,16整除。

流动布局：大小会随用户调整浏览器窗口大小而变化。

可以更好适应大屏幕，也叫响应式。

弹性布局：所有元素大小也会变换。

布局高度与布局宽度

布局高度：一般不该设定高度，除非页面上绝对定位的元素。

正常元素保持默认值auto不变，保持垂直居中。

布局宽度：精确控制布局宽度。

总结：一般原则，控制布局宽度，内容决定布局高度。

三栏-固定宽度布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2 三栏-固定宽度布局</title>
    <style>
        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid;
        }

        nav {
            width: 150px;
            float: left;
        }

        nav li {
            list-style-type: none;
        }

        article {
            width: 600px;
            float: left;
            background: #ffed53;
        }

        aside {
            width: 210px;
            float: left;
            background: #3f7ccf;
        }

        header {
            background: #f00;
        }

        footer {
            color: aliceblue;
            clear: both;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            固定宽度布局
        </header>
        <nav>
            <!-- 无序列表 -->
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </nav>
        <article>
            <!-- 文本元素 -->
            <h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
            <p>
                【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电，
                据中央气象台官网信息，截至8月22日17时，在逐小时气温实况排行榜中，
                川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。
                其中，四川合江在17时以42.2℃热到了全国第一。
                而在8月21日下午，四川合江的气温也突破40℃，登顶全国高温榜第一。
            </p>
            <hr />
            <h1>外交部回应黑神话悟空全球大热</h1>
            <p>
                21日，外交部发言人毛宁就“中国的国产游戏《黑神话：悟空》上线后，受到国际玩家青睐”作出回应：反映了中国文化的吸引力。
            </p>
        </article>
        <aside>
            <h1>这是一个侧边栏</h1>
            <p>
                今年是南开大学建校105周年。8月21日，南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元，主要用于支持南开数学研究和人才培养。
            </p>
        </aside>
        <footer>
            这是页脚
        </footer>
    </div>
</body>

</html>

为栏设定内边距和边框

让内容和栏边边界空开距离，为栏添加水平外边距和内边距，栏与栏之间增加间距，导致布局宽度增大，使得浮动栏下滑。
在栏中添加大图片，或者长字符串，导致栏宽超过布局宽度，也会导致右侧栏滑到左下方。

防止浮动栏下滑：

从设定的宽度中减去内外边距加边框和，每次都得调整，容易布局错乱。
容器内部元素加上内外边距，加inner的div，内部div自动填充父元素，给内部div设置内外边距，可以保持内容与栏边界的距离，如果容器上下边框不可见，内部div上下外边距会叠加。
用CSS3的box-sizing切换缩放方式，border-box,内外边距不增大，内容变窄。最简单的一个方法，IE6,7不支持，用的腻子脚本（polyfill）解决。

Paul Irish 前端大神

预防过大的元素，加一条{max-width:100%}不超过父元素，另一个是给父元素添加overflow:hidden。

单词太长，添加word-wrap:break-word进行断词。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2 三栏-固定宽度布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid #000;
            overflow: hidden;
        }

        nav {
            box-sizing: border-box;
            width: 150px;
            float: left;
            background: #dcd9c0;
            padding: 10px;
        }

        nav .inner {
            padding: 10px;
        }

        nav li {
            list-style-type: none;
        }

        article {
            box-sizing: border-box;
            width: 600px;
            float: left;
            background: #ffed53;
            padding: 10px 20px;
        }

        article .inner {
            margin: 10px;
            border: 2px solid red;
            padding: 20px;
        }

        aside {
            box-sizing: border-box;
            width: 210px;
            float: left;
            background: #3f7ccf;
            padding: 10px;
        }

        aside .inner {
            padding: 10px;
        }

        footer {
            text-align: center;
        }

        header {
            background: #f00;
        }

        footer {
            color: aliceblue;
            clear: both;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            固定宽度布局
        </header>
        <nav>
            <!-- <div class="inner"> -->
            <!-- 无序列表 -->
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
            <!-- </div> -->
        </nav>
        <article>
            <!-- <div class="inner"> -->
            <!-- 文本元素 -->
            <h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
            <p>
                【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电，
                据中央气象台官网信息，截至8月22日17时，在逐小时气温实况排行榜中，
                川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。
                其中，四川合江在17时以42.2℃热到了全国第一。
                而在8月21日下午，四川合江的气温也突破40℃，登顶全国高温榜第一。
            </p>
            <hr />
            <h1>外交部回应黑神话悟空全球大热</h1>
            <p>
                21日，外交部发言人毛宁就“中国的国产游戏《黑神话：悟空》上线后，受到国际玩家青睐”作出回应：反映了中国文化的吸引力。
            </p>
            <!-- </div> -->
        </article>
        <aside>
            <!-- <div class="inner"> -->
            <h1>这是一个侧边栏</h1>
            <p>
                今年是南开大学建校105周年。8月21日，南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元，主要用于支持南开数学研究和人才培养。
            </p>
            <!-- </div> -->
        </aside>
        <footer>
            这是页脚
        </footer>
    </div>
</body>

</html>