现代网页设计傻瓜书 第4/12部分

课程介绍

欢迎来到《现代网页设计傻瓜书》。这个包含12个部分的课程将带你从一个普普通通的傻瓜蜕变成网页设计领域的巨星！

第四部分 - 布局你的第一个网页

既然你已经学会了如何创建和使用CSS文档，那我们现在就开始学习网页的布局吧。

<DIV> 和 <SPAN>

在我们深入（并非那么）复杂的CSS概念之前，让我们先了解一些HTML布局特性——<DIV>和<SPAN>的区别。

Div - 定义一个新块。它会为其内容开始一个新行。

Span - 定义div中的一小段文本。它在div中创建一个新的分组，并在此组内保持内联。它会继续显示，不会显示任何换行迹象。请看这个例子

<div>
    My Div
</div> 
<div>
    My sentence has a <span> Span </span> in it
</div>

效果如下

我的句子包含一个 Span

请注意，span没有显示出额外的标签间隔，但这允许我们只将CSS应用于span。

盒子模型

盒子模型是几乎所有元素布局的模型。

Margin - 将元素与其他元素隔开。它有一个透明的背景。

Border - 围绕元素的线。就像元素的边框。边框的颜色会继承自盒子，除非在border:属性中定义。

Padding - 边框与内容之间的空间。背景色与内容相同。

Content - 实际的元素。所有文本、图像等显示的地方。它同时拥有width:和height:属性。

使用盒子模型

在使用盒子模型时，你不必定义所有步骤。例如，如果你只需要一个边框，那么你只需要使用border:

所有盒子模型属性都应以像素（px）为单位定义。所有属性（宽度和高度除外）都可以是面向特定边的。如果某一边未指定，样式将应用于所有边。

例如：

margin: 10px;
border: 10px solid black;
padding: 10px;
width: 240px;
height: 100px;
background-color:yellow;

应该看起来像这样：

请注意，由于左右边距、边框和内边距都是额外测量值，因此盒子的总宽度为300px（左右边距、边框和内边距是宽度上的额外测量值）。高度为160px。

margin: 10px;
border-left: 10px solid red;
padding: 10px;
width: 240px;
height: 100px;
background-color:yellow;

效果如下

请注意，这些是相同的样式——但有2个地方不同。边框只在左侧，边框颜色是红色。（我们将在本部分后面讨论边框样式）请注意，总宽度将是290px，总高度是140px（因为边框只在左侧）。

边框样式

边框与内边距和外边距不同，因为它有自己的样式和颜色。

要定义边框的特定样式或属性，你可以直接命名，如下所示

border-[location]-[property]:[value];

或

border-[location]:[width] [style] [colour];  

或

border-[property]:[value]; 

位置 - 可以是top、left、right或bottom。如果你想定义所有边，只需省略即可。

属性 - 可以是width、style或color。要在一行中定义部分或所有属性，只需省略即可。然后值将在值集中设置。

值 - 可以是单个值，如border-width:5px，也可以是多个值。当有多个值时，它们遵循特定顺序：[宽度] [样式] [颜色]。如果遗漏了一个值，CSS将不起作用！以下是支持的值定义

宽度 - 所选边框的像素大小。

颜色 - 所选边框的颜色。可以是命名颜色（例如red）、RGB颜色（例如rgb(255,0,0)）或十六进制代码（例如#FF0000）。

样式 - 所选边框的样式。以下是可用的样式列表。文本内部是使用的关键字。所有样式都具有5px的宽度和红色作为颜色（以显示某些效果取决于颜色）。

维度

Dimension属性现在可能看起来没什么用，但当你开始构建响应式网站（能响应屏幕宽度的网站）时，它将至关重要。它实际上是一组属性。它们的用法是max-width:100px;而不是dimension:width;但首先是常用的尺寸关键字。

auto - 自动调整大小以适应其内容。

length - 固定值，通常以像素为单位。

% - 父容器的百分比。

inherit - 继承父元素的尺寸属性。所有尺寸属性都支持inherit。例如，如果父元素使用auto，子元素将“继承”auto。

现在是支持的Dimension属性

width & height - 设置默认的宽度和高度。支持auto、length和%。

max-width & max-height - 设置元素的最小宽度和高度。支持none、length和%。

min-width & min-height - 设置元素的最小宽度和高度。支持none、length和%。

显示

这定义了元素相对于其他元素如何显示。我只列出主要值。如果你想查看完整列表，请在此W3C网站上查看。display属性的用法如下。

display: [value]; 

inline - 是默认值。它使元素表现得像一个<span>。它会找到第一个足够大的空间来容纳，即使与其他元素在同一行。

block - 使元素表现得像一个<p>。它会开始新的一行，并将自己尽可能靠左放置。

inline-block - inline和block的组合。元素的子元素将格式化为块，但元素本身将格式化为inline。

none - 使元素消失。不会为其保留空间。

initial - 将属性恢复到页面首次打开时的状态。当JavaScript用于更改页面布局时，这非常有用。

inherit - 继承父元素的display属性。

定位

CSS中有三种定位方式——fixed、absolute和relative。所有定位值的使用方式如下。

position: value; 

CSS positioning属性与top: left: right: 和 bottom: 结合使用。这些属性可以具有正值和负值（px或%），并影响元素的定位。效果因类型而异。

固定

这会将元素固定在浏览器窗口上。即使页面滚动，它也不会移动。top、left、right和bottom属性用于定位它。例如：

如果一个元素被设置为top:100px;和left:100px;，那么该元素将始终位于浏览器窗口的(100,100)位置。

绝对寻址

这将在其父标签上获得绝对定位，该父标签具有除static（默认定位）以外的position。如果没有找到，它将使用html标签作为定位（这将是页面的左上角）。top、left、right和bottom属性将元素相对于其用于定位的点偏移。

相对寻址

这将根据元素的正常位置来定位它。top、left、right和bottom属性将元素从该点偏移。

Z-Index

通常，后面定义的HTML元素会覆盖前面的元素。你可以使用Z-index来改变这一点。Z-index越高，元素在堆叠中的位置就越靠前。你可以这样定义属性。

z-index:[value]; 

浮点

你也可以将元素浮动到其父容器内。元素只能水平浮动。浮动元素之前的元素不受影响，但之后的元素将流动以填补其空间，正如它被定义为那样。元素可以向左或向右浮动，继承其浮动，或者根本没有浮动。浮动也可以用同样的方式清除。清除还有一种额外的值——清除所有浮动。以下是语法。

float:[left/right/none/inherit];
clear:[left/right/both/none/inherit];  

Align

Align类似于float，但不会让其他元素占据其位置。

有几种Align方式，但我们将只关注3种。

horizontal-align - 在其父容器中水平对齐元素。

vertical-align - 在其父容器中垂直对齐元素。

text-align - 在其父容器中对齐文本。

每种都有几种值，但最常见的是left、right和center（Vertical-align有top、middle和bottom）。以下是CSS语法。

horizontal-align:left;
vertical-align:bottom;
text-align:center; 

列表

列表的CSS样式允许你为无序列表和有序列表设置项目标记的缩进，甚至可以使用图像作为项目标记。

要为有序列表或无序列表添加标记，你必须使用list-style-type属性。以下是一些示例。

list-style-type:circle; 

• 示例

list-style-type:upper-roman;

I. II. III. IV. V. 等。

list-style-type:lower-alpha;  

a. b. c. d. e. 等。

有许多不同的样式；这里无法全部包含。所有支持的样式都可以在W3C网站这里找到。

图像作为标记

要使用图像作为标记，只需像这样使用list-style-image属性。

list-style-image: url("myimage.gif");  

还有一个list-style-position属性，它定义了标记是在内容流的内部还是外部。

所有上述属性都可以通过使用简写属性list-style: 在一行CSS代码中组合。它的工作方式与border: 属性相同。

表格与结束

与大多数其他元素一样，表格也可以通过CSS进行操作。你可以应用width: height: Border: padding: colour: text-align: 或几乎任何其他属性到表格上。天空是极限！多玩CSS，熟能生巧。看看什么有效，什么无效。很快你就会确切地知道在哪里使用什么来获得你脑海中的布局。

希望你度过了这个技术性的一章，第五章再见！

jACQUES B-)

历史与笔记

v1 - 为HTML5和CSS3教程比赛发布的原创

注意: 由于比赛的性质，我可能无法在一周内完成两篇文章。因此，下一篇发布的文章可能不是本系列的下一篇。不过，我会记录下被遗漏文章的标准，并希望它们都能在2014年7月1日之前完成。给您带来的不便，敬请谅解。