HTML5和CSS3第4部分：网页布局

引言

在您阅读完前面的三部分并证明您已掌握成为一名优秀网页开发者的基础知识后，战斗就已经基本胜利了。但有一件事能让您成为一名专业人士，那就是如何布局您的网页。

盒子模型

CSS 将每个元素都视为一个包裹着 HTML 元素的盒子，它由外边距、边框、内边距和实际内容组成。这个盒子模型允许我们在元素周围创建边框，并使元素相对于其他元素进行间距，如下所示。

• Border

我们使用边框来定义一个区域、突出一条信息或环绕表格的单元格，以使网站尽善尽美。

边框属性允许我们指定元素的边框。

在这个例子中，我们为文本设置了个性化的边框，如下所示。

 border: double 20px black;

在这里，我们将看到所有边框属性的示例。

border-color: 值;

border-style: 值;

border-width: 值;

border-bottom: 1px solid #333333;

border-bottom-color: 值;

border-bottom-style: 值;

border-bottom-width: 值;

border-left: 1px solid #333333;

border-left-color: 值;

border-left-style: 值;

border-left-width

border-right: 1px solid #333333;

border-right-color: 值;

border-top: 1px solid #333333;

border-top-style: 值;

border-top-width: 值;

• Outline

轮廓（Outline）类似于边框，但它只是围绕元素的线条。它通常绘制在边框区域之外，但不会像边框那样占用空间。

轮廓有 4 个属性：outline-color、outline-style、outline-width 和 inherit。

这是一个简单的例子。

link:hover {
          outline: 1px solid #000;
      }

• Margin

外边距（Margins）与内边距（Padding）非常相似，但有一个简单的区别：外边距定义了 HTML 元素边框周围的空白区域，而内边距定义了 HTML 元素边框内的空白区域。

我们可以为不同侧指定外边距。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

下面展示的代码可以写在一行中。

//50px for the left side then 100px for the top then 50px to right and finally 100px for the bottom side 
      margin:50px 100px 50px 100px;

• 填充

内边距（Padding）是元素边框与其内部内容之间的距离。

我们可以为不同侧指定外边距：

padding-top:10px;
       padding-bottom:10px;
       padding-right:5px;
       padding-left:5px; 

这是一个简单的例子。

#container {
          width: 70%;
          margin: auto;
          padding: 30px 20px 10px 20px;
          border: 1px solid #666;
          background: #ffffff;
      }

定位

一位优秀的网页设计师非常了解如何定位网页元素以及如何精确地操纵它们的位置。

因此，您需要使用四种不同的定位方法来定位所需的元素。

• 固定

使用 top、left、right 或 bottom 的 fixed 值来定位元素。

 #fixedContainer {
          position: fixed;
          width: 600px;
          height: 200px;
          left: 50%;
          top: 0%;
      }

• 相对寻址

相对定位（Relative Positioning）将元素放置在其正常位置。

• 绝对寻址

绝对定位（Absolute Positioning）将元素相对于第一个父元素进行定位。

• 静态

静态定位（Static Positioning）是元素在网页正常流中出现的默认方式。

尺寸

使用尺寸属性，您可以控制元素之间的相互报告行为、它们对内容的反应以及它们默认占用的空间大小。

以下是这些属性的一些示例。

高度	控制元素的高度。
max-height	控制元素的最大高度。
min-height	控制元素的高度最小值。
width	控制元素的宽度。
max-width	控制元素的最大宽度。
min-width	控制元素的最小宽度。

显示

display 指定元素如何向用户显示。您可以将其设置为 none、inline 或 block。

内联元素（Inline Element）是一种只占据必要宽度的元素，而 display 元素则占据全部宽度。

a { display: block; }
    p { display: inline; }
    <a href="http://www.Tunisia.com/" target="_blank">
        Visit Tunisia
    </a>
    <a href="http://www.Sfax.com/" target="_blank">
        Visit Sfax
    </a>
    <br />
    <p>These paragraph </p>
    <p>elements</p>
    <p>have been </p>
    <p>inlined.</p> 

浮动

使用 CSS float，您可以将元素推向右侧或左侧。

img

{

float:right;

}

Align

我们可以使用 margin 属性进行居中对齐，如下所示。

.img

{

margin-left:auto;

margin-right:auto;

width:50%;

background-color:red;

} 

CSS 列表

列表用于显示信息。

我们有两种列表类型：有序列表和无序列表，在本例中已详细说明。

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }    

我们可以通过添加一些图片来修改代码，使其更具个性化，从而使列表比以前更具吸引力，如下面的代码所示。

ul { list-style-image: url("listArrow.gif"); } 
ol { list-style-image: url("listArrow2.gif"); }

CSS 表格

表格用于显示表格数据。因此，通过少量 CSS，我们可以使表格单元格看起来更优雅、更具吸引力。

我们可以使用下面列出的属性来控制表格的样式。

border	border:1px solid green;
border-collapse	border-collapse:collapse;
width	width:100%;
height	height:50px;
text-align	text-align:right;
填充	padding:15px;
color	color:white;

table
    {

    border:1px solid red;

    }

Div 和 Span

Div 和 Span 标签都是用于构建内容的容器，但它们具有互补的角色和不同的渲染规则。

• Div

<div> 和 </div> 用于为内容应用样式。它是一个块级元素，像一个矩形对象，不能跨越多行。

<div id="container"> 
Hello World!
</div> 
#container{
  width: 80%;
  padding: 20px;
  border: 1px solid #666;
  background: red;
} 

• Span

<span> 和 </span> 也用于为内容应用 CSS 样式。它是内联的：它适合内容流，并且可以被拆分成多行。

<span class="italic">Hello world!</span>  
.italic{
  font-style: italic; 
}