欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS设计指南 5章 页面布局

程序员文章站 2022-05-06 23:22:51
...


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>

 
   




 

上一篇： 笑话集原创笑话精品展第四十期

下一篇： c++ primer 3 标准库类型

推荐阅读