CSS设计指南 5章页面布局

5.1 布局的基本概念

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

固定宽度
固定宽度布局的大小不会随用户调整浏览器窗口大小变化，一般是900到1100像素宽度。其中960像素是最常见的，因为这个宽度适合所有现代浏览器。
960 Grid http://www.960.gs

流动布局
流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制。
这种可变的固定布局能够适应最大和最小屏幕，业界称为响应式设计。

弹性布局

布局高度与布局宽度
布局高度：多数情况下，布局中结构化元素的高度是不必设定的。
布局宽度：需要精细控制布局宽度

控制布局宽度，内容决定布局高度

为栏设定内边距和边框
为固定宽度的元素添加水平外边距、边框、内边距，会导致元素盒子变宽。
1)重设宽度以抵消内边距和边框
2)给容器内部的元素应用内边距和边框
没有宽度的元素在水平方向上会适应其父元素，其内容会随着外边距、边框、内边距的增加而减少。

得出一个结论：如果布局中的栏是浮动的，而且都设定的宽度，你根本不需要去动它！要动，就把内容放在内部div里，动这个div。
3)使用box-sizing:border-box

类应该用于标记具有相同特征的元素

使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行多栏布局,实战</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Microsoft Himalaya", "Microsoft Himalaya", snog;
            font-size: 15px;
        }

        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: grey solid 1px;
        }

        #header {
            background-color: lightslategray;
        }

        #nav {
            background-color: #486B02;
        }

        #banner img {
            height: 300px;
            width: 960px;
        }

        #product .product_area {
            width: 320px;
            float: left;
            padding: 10px 0;
        }

        #product .inner {
            margin: 10px;
            border: green solid 1px;
        }

        #content .content_area {
            width: 240px;
            float: left;
            padding: 10px 0;
        }

        #content .inner {
            margin: 0 10px;
            border: darkgreen solid 1px;
        }

        #footer {
            float: left;
            border: green solid 1px;
            margin: 10px 10px;
        }

    </style>
</head>
<body>

<div id="wrapper">
    <div id="header">
        <h1>Full-width content</h1>
    </div>
    <div id="nav">
        <h1>Navigation menus go here</h1>
    </div>
    <div id="banner">
        <img src="../images/black.jpg">
    </div>

    <div id="product">
        <div class="product_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
        <div class="product_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
        <div class="product_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
    </div>


    <div id="content">
        <div class="content_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
        <div class="content_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
        <div class="content_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
        <div class="content_area">
            <div class="inner">font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体，则会尝试下一个。
                请以您喜欢的字体开始，并以通用字体系列结束，以便使浏览器在通用系统中挑选相似的字体，如果没有
            </div>
        </div>
    </div>

    <div id="footer">
        <h1>font-family 属性应该使用若干种字体名称作为回退系统，以确保浏览器/操作系统之间的最大兼容性。如</h1>
    </div>
</div>





</body>
</html>

CSS设计指南 5章 页面布局

相关推荐

CSS设计指南 5章页面布局