CSS技巧荟萃：了解CSS页面布局和加载流程

╰半橙微兮° 2022-04-10 08:19 238阅读 0赞

日期：2013-1-28  来源：[GBin1.com][]

[![CSS技巧荟萃：了解CSS页面布局和加载流程][CSS_CSS]][CSS_CSS_CSS_CSS]

如果你开发web相关应用或者网站的话，肯定知道[CSS][]对于页面布局的重要性。在本篇[CSS][]技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。

## 介绍 ##

在我们开始正式的介绍页面流程前，我们需要简单了解几种不同类型的html元素，以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素：

*  block
 *  inline

如果大家关心html5的话，你应该知道在HTML5中也包含了几个新的元素，例如，section，article等等，但是仍旧遵循这里我们介绍的显示类型。

inline类型的元素包括： img，span，a等，用来定义文字或者数据，通常显示方式是“同一行显示”。更具体的说就是，如果很多的inline类型的元素在同一行的时候，它们会显示在同一行，直到宽度不够显示了，再转到下一行。例如，如下代码：

<a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>

[查看在线调试][Link 1]

相 反block类型的元素，例如，div，p或者HTML5中新的元素section，article和article的显示方式和inline类型都不一 样。它们都是典型的结构化的元素，可以包含inline类型的元素。浏览器处理block类型的元素，会在元素前后添加换行，这样你看到它们都是独立成行 显示的。当然，如果你修改它的缺省显示类型为inline，它就会按照inline元素的显示方式显示。

## 样式CSS ##

通常我们都是使用CSS来控制元素的显示：

sometag{
          
      display:inline; /*当然你也可以设置为block，none等等支持的属性*/
    }

虽然上面的属性中我们指定了显示类型，这同时也意味这其它相关的样式，例如，你可以指定显示类型为block的元素的宽和高，但是 inline类型的无法指定。padding（内边距）和margin（外边距）可以被应用到inline显示的元素，但是不会影响包含的元素。看看如下 例子：

[查看在线调试][Link 2]

## 另外一些显示方式  ##

除了inline和block类型的显示，这里还有一个inline-block的显示方式。如下图：

它显示的方式类似于inline，但是它相关的属性，例如，宽度，高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果，但是也有自己的问题。

其它的属性例如，list-item，顾名思义，显示的方式和列表元素类似。

最后还有一个元素需要提一下就是"none"，这个属性可以让元素不显示，并且不占聚任何的document空间。 注意和“hidden”这个属性区别一下。

## 正常Document的加载流程 ##

那 么什么是浏览器正常的加载流程呢？基本上浏览器按照它解析的顺序来显示内容，顶端的先加载，然后加载下面的内容。当大家开始做web设计的时候，可能都不 关心正常的document加载过程，而只醉心于各种不同的绚丽花哨的技巧，如果你能够正确的理解document加载，对于更好的帮助你理解web设计 绝对有利无弊。

## 做一个练习吧！ ##

在这里我们将做一个简单的联系帮助你巩固你的学习，这里我们使用[HTML5 Shiv][]来帮助我们支持HTML5标签，使用[placekitten][]这个图片占位应用来生成图片。

HTML框架代码如下：

<div class="container">
            <h1>An Intro to Normal Document Flow.</h1>
            <figure class="photoGallery">
                <img src="http://placekitten.com/g/100/200" alt="" />
                <img src="http://placekitten.com/g/160/200" alt="" />
                <img src="http://placekitten.com/g/220/200" alt="" />
                <img src="http://placekitten.com/g/180/200" alt="" />
                <img src="http://placekitten.com/g/240/200" alt="" />
                <img src="http://placekitten.com/g/130/200" alt="" />
            </figure>
            <article>
                <h2> 欢迎访问我的喵星人图片画廊</h2>
                <p>如果你也喜欢猫咪的话，来一起看看这些可爱的小生命吧！</p>
            </article>
        </div>
        <footer>
          <section>欢迎访问<a href="http://gbtags.com">gbtags.com</a></section>
        </footer>

CSS布局代码：

body{
       
      font-size:12px;
      font-family: Arial;
    }
    
    .container {
       
        width: 85%;
        margin:0 auto;
        background: #f2f2f2;
    }
    
    figure img {
       
        padding-left: 10px;
    }
    
    h1 {
       
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        color: #707070;
        padding: 10px;
        font-size:14px;
    }
    
    article {
       
        background: #505050;
        color: #f2f2f2;
        padding: 10px;
    }
    
    footer{
       
      width: 85%;
      margin:0 auto;
    }
    
    section{
       
      padding: 20px 0;
    }

[查看在线调试][Link 3]

## 总结 ##

希望通过这篇文章的学习，大家能够更好的了解document的加载和布局，如果你有任何问题或者建议，请给我们留言，谢谢！

来源：[CSS技巧荟萃：了解CSS页面布局和加载流程][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/css/20130128-css-layout/
[CSS_CSS]: http://www.gbin1.com/technology/css/20130128-css-layout/title.jpg
[CSS_CSS_CSS_CSS]: http://www.gbin1.com/technology/css/20130128-css-layout/index.html
[CSS]: http://www.gbin1.com/gb/tag/usertag/56.htm
[Link 1]: http://gbin1.com/gb/debug/8d9677cc-09a7-4320-bc30-272ffceeb6cb.htm
[Link 2]: http://gbin1.com/gb/debug/5fbb328c-63f8-4787-bc00-5f6c63860ffc.htm
[HTML5 Shiv]: http://code.google.com/p/html5shim/
[placekitten]: http://placekitten.com/
[Link 3]: http://gbin1.com/gb/debug/f19a7b2a-5089-4001-a393-60129692ed07.htm