HTML 和 CSS 入门 - 第 4/12 部分 - 布局您的第一个网页
5.00/5 (9投票s)
本文是为 HTML 和 CSS 新手提供的入门套件。
引言
本文是本系列 12 篇文章中的第四篇，将带我们学习 HTML5 和 CSS3。
本文旨在介绍以下概念
背景
与 HTML 和 CSS 基础相关的文章将有助于更好地理解本文。以下是链接。
HTML5 & CSS3 初学者指南 - 第 2/12 部分 (引用 James Jensen 的文章) ，
盒子模型（边框、轮廓、外边距、内边距）
“在 HTML 或通用的网页设计中，每个元素都是一个矩形框”。我们都曾多次听过或读过这句话。这句话的真正意思是，渲染引擎（如浏览器）的主要目标是确定这些框的大小、颜色、背景、边框和位置等属性。而框内的内容无关紧要。
作为回顾，W3C 对盒子模型的定义如下：“CSS 盒子模型描述了文档树中为元素生成的矩形框，并根据视觉格式化模型进行布局”。
如果您想知道网页上的所有内容如何变成盒子，让我们做一个小实验。
我们在上一课中有一个（当然是好看的 ;) ）网页。它看起来是这样的，对吗？
现在，让我们在 CSS 文件中添加一个通用边框。
* {
border: 1px solid red !important;
}
保存 CSS 并刷新您的页面。您可以看到每个元素都有一个边框，并且所有元素都是矩形框。
理解上述事实将极大地帮助您设计网页。现在让我们深入了解这个模型。
四巨头
这些框有 4 个组成部分，会影响框在页面上的大小和表示，它们是
- 内容 - 框中实际内容（如文本、图像等）所在区域
- 内边距 - 清除容器框与主要内容之间的空白区域
- 边框 - 包围内容和内边距
- 外边距 - 清除框与其他框（元素及其包装器）在页面上的透明空间。
- 我们这里还有一个成员叫“先生”轮廓。但轮廓更多是一种不影响框大小的属性。因此，我们暂时将它排除在此“巨头”之外。（稍后会作为属性讨论）
我相信一张图片在这里会有帮助。请看下面。假设我们有
- 一个 300x200px 的 div
- 15px 的内边距
- 5px 的边框
- 30px 的外边距
- 那么这个 div 在页面上占用的总面积将是
- 宽度将是以下的总和（400px）
- 300px 的内容区域
- 两侧各 2*15px = 30px 的内边距
- 2*5px= 10px 的边框
- 2*30px = 60px 的外边距
- 同样，总高度将等于 300px
- 宽度将是以下的总和（400px）
让我们看看盒子模型中的每个属性，以及它们如何使用，在多大程度上应该使用。
填充
内容之后、边框之前的区域由内边距属性定义。内边距属性在边框（或没有边框时的外边距）内为元素的周围内容创建空间。
与其他元素一样，内边距的值可以使用长度或百分比来设置，请使用非负值。内边距从值 0 开始（我们中的许多人也是从零开始的，不是吗？ :)）。
让我们创建一个快速的 HTML 表格，添加一行和一些单元格……
<!DOCTYPE html>
<html>
<head>
<title>We are BOX-ing (CSS)</title>
<style>
body
{
background-color:lightgoldenrodyellow;
}
table.BoxModel tr td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table class="BoxModel">
<tr>
<td colspan="4"> <b>Note:</b>CodeProject - HTML CSS : BoxModel
</td>
</tr>
<tr>
<td>Padding</td>
<td>Border</td>
<td>Margin</td>
<td>Outline</td>
</tr>
</table>
</body>
</html>
这样它看起来会是这样的
我们可以看到边框离内容很近。所以让我们添加一些内边距，看看有什么不同。
您可以使用简写方式添加内边距，这意味着在一行中定义所有四个边，或者您可以单独为每个边添加内边距。简写语法如下，值中边的顺序是“上-右-下-左”。它是顺时针方向，所以容易记住。所以让我们将以下代码添加到您的 HTML 页面。
table.BoxModel tr td
{
border: 1px solid red;
padding-bottom : 2px;
padding-top: 5px;
padding-left: 5px;
padding-right: 2px;
padding
/*padding: 5px 5px 5px 5px; -->Shorthand, details below*/
/*padding: top right bottom left --> Clockwise */
/*padding: 5px; --> this will set all four sides to 5px*/
}
区别是，内容与边框之间有了舒适的距离。
边框
在上面的例子中，我们的边框已经设置为 1px 和红色。让我们看看其他的边框属性并尝试一下。
边框的基本值是
- 边框宽度
- 边框样式
- 边框颜色
- 初始和继承与其他属性一样。通过点击链接阅读更多关于 Initial 和 Inherit 的信息。
- CSS3 支持以下 3 个与边框相关的属性，并且大多数当代浏览器都支持它们。我们将在下面的示例中包含它们。
- border-radius
- box-shadow
- border-image
以下是一些可用的边框样式及其描述。
| 值 | 描述 |
|---|---|
| none | 默认值。指定无边框 |
| hidden | 与“none”相同，除了表元素中的边框冲突解决 |
| dotted | 指定一个点状边框 |
| dashed | 指定一个虚线边框 |
| solid | 指定实线边框 |
| double | 指定双边框 |
| groove | 指定一个 3D 凹槽边框。效果取决于 border-color 值 |
| ridge | 指定一个 3D 脊状边框。效果取决于 border-color 值 |
| inset | 指定一个 3D 嵌入式边框。效果取决于 border-color 值 |
| outset | 指定一个 3D 外凸式边框。效果取决于 border-color 值 |
| initial | 将此属性设置为其默认值。 |
| inherit |
从此父元素继承此属性。 |
边框的简写语法是
border: border-width border-style border-color;
让我们定义 5 个不同的类并将其应用到上面的 5 个框中：我们将使用以下类名以及它们所代表的含义。我们将使用简写语法来保持简洁。
- bdGroove：此类将边框样式设置为 groove，颜色设置为绿色，宽度设置为 5px。宽度还支持一些枚举值，如 thin、medium 和 thick。
- bdImage：使用图像的边框
- bdShadow：带阴影的边框
- bdradius：边框半径为 25px，应使那些尖角圆润
- bdDotted：点状边框
现在，让我们像下面一样准备类。
.bdGroove
{
border-style:groove;
border: 5px groove red;
}
.bdImage
{
border-image:url(border.png) 30 30 round;
}
.bdShadow
{
box-shadow: 10px 10px 5px #888888;
border: 5px solid red;
}
.bdradius
{
border-radius:25px;
border: 5px solid red;
}
.bdDotted
{
border-style:dotted;
border: 5px dotted red;
}
并将这些类应用于表格元素，代码如下。
<table class="bdShadow">
<tr>
<td colspan="4" class="bdGroove"> <b>Note:</b>CodeProject - HTML CSS : BoxModel
</td>
</tr>
<tr>
<td class="bdImage">Padding</td>
<td class="bdradius">Border</td>
<td class="bdDotted">Margin</td>
<td class="bdGroove">Outline</td>
</tr>
</table>
您将看到的结果。图片如下。
Margin
正如我们之前提到的，外边距只是在元素/框周围添加了空白。外边距可以使用简写方式编写，遵循相同的顺时针规则。所以让我们为上面的表格添加一个 50px 的外边距。
由于我们为类使用了 bdShadow，因此添加外边距的代码如下所示
.bdShadow
{
box-shadow: 10px 10px 5px #888888;
border: 5px solid red;
margin: 50px 50px 50px 50px;
}
结果。
Outline
轮廓可以被认为是边框，但它们不占用空间。它们会挤占外边距，让我们为 bdShadow 类添加一个轮廓来看看我的意思。
outline: 25px solid green;
您将得到以下结果。您现在可以看到外边距是 50px，但其中 25px 被轮廓占据。实际上使外边距变为 25px。
如果轮廓是 50px 而外边距是 25px 呢？好问题，答案是“先生”轮廓调整自己，将自己缩小到 25px。最终结果是，轮廓不会单独占用空间。
尺寸、显示、定位、浮动、对齐
尺寸、显示、定位、浮动、对齐是极大地影响您的网页设计和网页文档外观的属性。随着越来越多的联网设备出现，您在页面上管理空间以明智且舒适地显示内容变得越来越重要。在我们的示例中使用它们之前，让我们逐一看看这些。
维度
顾名思义，尺寸属性用于控制元素的尺寸/大小。我们知道在网页文档的二维空间中，尺寸属性可以是高度和宽度。但是，您可以在这两个属性上定义最大值和最小值。让我将它们全部列在一个表格中并附带描述。
| 属性 | 描述 | 值 |
|---|---|---|
| height | 设置元素的高度 | auto length % inherit |
| max-height | 设置元素的最大高度 | none length % inherit |
| max-width | 设置元素的最大宽度 | none length % inherit |
| min-height | 设置元素的最小高度 | length % inherit |
| min-width | 设置元素的最小宽度 | length % inherit |
| width | 设置元素的宽度 | auto length % inherit |
Display
可以说，Display 是控制布局最重要的属性之一。每个元素的默认显示值大多为 inline 或 block，此默认值取决于元素的类型。
在我们的示例中，我们将使用一些 span 元素来应用 display 属性，这将使示例保持简短。span 元素用于对文档中的内联元素进行分组，它本身不提供视觉变化，是一种为文本的一部分或文档中的简单一部分添加句柄的方法。
下面是一个表格，解释了所有最常见的 display 属性值以及它们在分配这些值时有何不同。
| 值 | 描述 | 代码及其显示方式 |
|---|---|---|
| inline | 这是默认值，它将元素显示为内联元素 |
<p>Property : <span style="display:inline;background-color:#ff7722;">Inline</span> : Text after span</p>
|
|
Property : Inline : Span 后的文本 |
||
| block | 将元素显示为块级元素，如段落 <p> |
<p>Property : <span style="display:block;background-color:#ff7722;">Block</span> : Text after span</p>
|
|
Property : Block : Span 后的文本 |
||
| inline-table | 将元素显示为内联表格元素 |
<p>Property : <span style="display:inline-table;background-color:#ff7722;">Inline Table </span> : Text after span</p>
|
|
Property : Inline Table : Span 后的文本 |
||
| inline-block | 将元素显示为块级元素（如段落），但处于内联级别。 |
<p>Property : <span style="display:inline-block;background-color:#ff7722;">Inline Block </span> : Text after span</p>
|
|
Property : Inline Block : Span 后的文本 |
||
| list-item | 将元素显示为块级元素，如列表项 <li> |
<p>Property : <span style="display:list-item;background-color:#ff7722;">List Item</span> : Text after span</p>
|
|
Property : List Item : Span 后的文本 |
||
| table | 将元素显示为块级元素，如表格 <table> |
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ff7722;">My row1-cell1</div>
<div style="display: table-cell; background-color: #ff7722;">My row1-cell2</div></div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ff7722;">My row2-cell1</div>
<div style="display: table-cell; background-color: #ff7722;">My row2-cell2</div></div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ff7722;">My row3-cell1</div>
<div style="display: table-cell; background-color: #ff7722;">My row3-cell2</div></div></div>
我的行 1-单元格 1
我的行 1-单元格 2
我的行 2-单元格 1
我的行 2-单元格 2
我的行 3-单元格 1
我的行 3-单元格 2
|
| table-row | 将元素显示为块级元素，如表格行 <tr> | |
| table | 将元素显示为块级元素，如表格单元格 <td> | |
| none | 使元素不可见并释放空间，与 visibility:hidden 不同，后者即使元素被隐藏也占用空间 |
<p>Property : <span style="display:none;background-color:#ff7722;">NONE</span> : Text after span</p> <p>Property : <span style="visibility:hidden;background-color:#ff7722;">Hidden</span> : Text after span</p>
|
|
Display none 示例 Property : : Span 后的文本 Visibility Hidden 示例 Property : : Span 后的文本 |
定位
position 属性定义了元素将如何定位以及相对于哪个元素。以下是属性值及其描述
- Static：这是默认值。所有元素都将按照它们在文档流中的定义顺序出现。
- Absolute：顾名思义，此值定义了元素的绝对位置，但相对于其第一个已定位（非 static）的祖先元素。
- Fixed：类似于 Absolute，它们出现在一个定义好的位置，但在这种情况下相对于浏览器窗口。
- Relative：元素相对于其正常位置进行定位，例如，“left:20”会为元素的 LEFT 位置添加 20 像素。
以下代码片段将有助于演示上述值的用法
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 300px;
border: 1px solid red;
background-color: #ffd800;
}
.rel-left
{
position: relative;
left: 10px;
bottom: 5px;
z-index: -1;
}
.abs
{
position: absolute;
top: 35px;
left: 205px;
}
.fixed
{
position: fixed;
top: 105px;
left: 155px;
}
</style>
</head>
<body>
<div>The first DIV</div>
<div>Div positioned Static</div>
<div class="rel-left">Div positioned Relative</div>
<div class="abs">Div positioned Absolute</div>
<div class="fixed">Div positioned fixed</div>
<div>The last DIV</div>
</body>
</html>
以及以下是结果。
Float
浮动属性用于将元素向左或向右移动到容器中。浮动通常与图像一起使用，当我们希望文本围绕图像流动时。浮动元素之前的元素不受影响，只有之后的元素才会围绕浮动元素流动。如前所述，元素可以水平流动，但不能垂直流动。
当多个元素在同一方向并排浮动时，它们会堆叠在一起，直到填满一行，一旦填满，它们就会向下移动。例如，您的图像以缩略图视图显示。
我们可以使用 clear 属性阻止其他浮动项向左或向右。浮动基本上只有两个属性，下面将进行描述。
Float：此属性接受 left、right、none 和 inherit 的值。left 和 right 值基本上告诉元素向哪个方向浮动；none 表示不浮动，这是默认值，inherit 值将从其父元素继承值。
Clear：此属性接受 left、right、both、none 和 inherit 的值。如前所述，此属性定义是否在当前元素的任一侧浮动其他项。
我们将在最终的 HTML 页面中将其作为一个示例。
Align
在 HTML 中对齐文本使用两个属性，即
- Text-Align
- Vertical-Align
Text Align
Text align 用于在容器内对齐文本。它接受以下值，我们大多数人可能已经熟悉这些术语，因此我将尽量保持简短。
语法
text-align: left|right|center|justify|initial|inherit;
示例
<div style= “text-align: center;”>
居中显示在 div 中的文本
</div>
- Left：文本左对齐容器。
- Right：文本左对齐容器。
- Center：文本在容器内居中。
- Justify：拉伸行，使每行宽度相等（如报纸和杂志）
- Initial：将此属性设置为其默认值。
- Inherit：从此父元素继承此属性。
Vertical-Align
vertical-align 的行为取决于使用它的位置，可以有两种截然不同的行为。
当 vertical-align 用于表格单元格等元素时，它的作用类似于 float 属性，但垂直而非水平。这可能是大多数开发人员期望它的作用。但是，当它用于 span 等内联元素（在段落内）时，它会相对于行对齐该部分。
当用于块级元素时，它将不起作用，例如：在一个大 div 内有一个小 div，并且您想将小 div 垂直居中，vertical-align 无法提供帮助。
牢记这些，让我们快速查看此属性的一些常见值以及它们的含义。
- Baseline：作为默认值，它将元素的基线与父元素的基线对齐。
- Length：根据长度值增加和减少位置。允许使用负值。
- %：根据“line-height”属性的值增加和减少位置。允许使用负值。
- Sub：下标对齐
- Super：上标对齐
- Top：元素的顶部与行中最高元素的顶部对齐。
- Middle：元素放置在父元素的中间。
- Bottom：元素的底部与行中最低的元素对齐。
边框
在本文的第一部分，我已涵盖了边框和边框样式的基础知识。所以让我们看看使用边框的其他一些方法。
我实现过的边框的一个有趣用法是将它们应用于宽度和高度为零的元素。这将得到一个我们正在寻找的形状。让我们直接进行演示，这应该能清楚地说明我们所谈论的内容。
假设我们创建一个宽度和高度为零但边框为 100px 的 div 样式，并为每个边框侧设置不同的颜色。您能猜出结果会是什么吗？这是代码。
div.something-interesting
{
width: 0;
height: 0;
border: 100px solid;
border-top-color: #4cff00;
border-right-color: #0094ff;
border-bottom-color: #ff006e;
border-left-color: #ff6a00;
}
看到下面的结果会很有趣 :)。出现此结果的原因是这是颜色对齐的唯一方式。
现在，虽然这是边框的一个有趣用法，但在实践中我们会在哪里需要/使用它呢？
我可以向您展示几种使用方法，您也可以自由发挥想象力将其推向下一步。
#1：假设我们在页面顶部有一个菜单列表，并且我们想使用一个指示器来显示当前活动哪个菜单。然后我们可以使用上述边框样式并进行修改，使其中一侧有颜色，其他侧透明。以下是实现此目的的代码和图片。
div.something-interesting
{
width: 0;
height: 0;
border: 100px solid;
border-color:white;
border-top-color: #4cff00
}
以下是我们看到的效果
如果我们在页面上使用了类似的 div，它会是这样的
另一个例子是制作一个对话气泡。
让我们创建两个类，分别称为 bubble 和 arrow
.bubble {
width: 150px;
height: 100px;
background-color: #ff006e;
border-radius: 10px;
}
.arrow
{
width: 0;
height: 0;
position: absolute;
left: 50px;;
border: 10px solid;
border-color: white;
border-top-color: #ff006e;
}
现在在 HTML 中添加两个 div。
<div class="bubble"><p style="padding:20px;">Hello there</p></div>
<div class="arrow"/>
结果：一个对话气泡。
CSS 列表和 CSS 表格
CSS 列表
在我们上一篇文章中，我们了解到 CSS 中有两种列表：有序列表（<ol>）和无序列表（<ul>）。让我们更深入地了解这些列表的属性。
四个基本的 CSS 列表属性是
- List-style：这是简写，可以在一行中设置列表的所有属性。
- List-style-image：用于为列表（项目符号）分配图像。
- List-style-position：定义项目符号相对于实际列表文本的位置。
- List-style-type：定义列表项类型（项目符号、数字等）。
由于 List-style 是一个简写，我们将首先查看其他三个属性及其值，然后查看简写的语法。
- List-style-image：最常用的值是 none 和 url。None 只是让列表没有项目符号，url 会指定在项目符号处使用的图像。
- 语法
-
list-style-image: none|url|initial|inherit;
-
- 语法
- List-style-position：这里 inside 和 outside 是最常用的值，outside 是默认值。下面的图片更能说明这些的含义。
- List-style-type：此属性的值非常详尽，此属性定义了您希望显示的项目符号或数字的类型。以下是一些值及其描述
- circle：标记是圆形的
- decimal：标记是数字
- decimal-leading-zero：标记是带前导零的数字（01、02、03 等）。
- georgian：标记是传统的格鲁吉亚数字。
- lower-alpha：标记是小写字母（a、b、c、d、e 等）。
- lower-roman：标记是罗马数字小写（i、ii、iii、iv、v 等）。
- none：不显示标记。
- square：标记是方形的。
- upper-alpha：标记是大写字母（A、B、C、D、E 等）。
- upper-latin：标记是大写拉丁字母（A、B、C、D、E 等）。
- upper-roman：标记是罗马数字大写（I、II、III、IV、V 等）。
- List-style：如前所述，这是声明上述 3 个属性的简写。语法如下。
-
List-style: list-style-type list-style-position list-style-image;
-
CSS 表格
尽管我没有一个令人信服的答案来解释为什么使用 CSS 表格，而我们可以使用更受欢迎且易于使用的 HTML 表格。我将尝试解释什么是 CSS 表格以及如何使用它们。CSS 表格是使用 display 属性的 table 值构建的。我在 这里 涵盖了与 table 相关的 display 属性的不同值。
CSS 的一个优点是能够使用 visibility:collapse 属性，该属性可以帮助折叠一个或多个列。在我看来，目前 CSS 表格在布局方面并没有比 HTML 表格带来足够的优势。
现在，让我们看一个快速示例，说明如何构建一个 CSS 表格，然后继续我们的下一个主题。下面的示例定义了 3 种样式，分别用于 table、cell 和 row。正如您所见，我们正在将样式应用于使用 display 属性构建的 div。
<!DOCTYPE html !>
<html >
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Table Example</title>
<style type="text/css">
div
{
background-color: brown;
width: 5px;
height: 5px;
}
.cell
{
display: table-column;
float: left;
width: 200px;
border:2px solid yellow;
}
.row
{
border:2px solid red;
display: table-row;
}
.table
{
border:2px solid green;
display: table;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
</div>
<div class="row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
</div>
<div class="row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
</div>
<div class="row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
</div>
</div>
</body>
</html>
以下是结果。
Divs 和 Spans
Div
Div 是 division 的缩写。Div 通常用作一个容器，用于分离一组元素，并对一组元素应用样式和操作。Div 是一个块级容器，这意味着在 div 标签的末尾会有一个新行。本课盒子模型章节中解释的大部分属性都可以应用于 div，并且 div 可以嵌套。要使用 div，我们将元素用 <div> 和 <\div> 包围，例如下面
<div>
<p>para 1</p>
<div> nested div
<p> para 2</p>
<p>para 3</p>
</div>
</div>
Div 可以分配一个id，例如 <div id="Div1">和一个 class，例如 <divclass="mainDiv">。然后可以使用 CSS 选择这两个属性，或使用 JavaScript 修改它们。
这种安排使我们能够定义 HTML 整个部分的样式。
Span
span 元素与 Div 非常相似，这意味着与 div 一样，span 也可以一次对它包含的所有元素应用样式。span 和 div 的主要区别在于 span 是一个内联元素，而 div 是一个块级元素，因此 span 本身不做任何格式化，不像 div 在结尾包含段落和换行。以下是如何使用 span 配合 <span> 和 </span> 标签的示例：
<div id="Div1">
<p><span class=”highlight”>within Span</span> Outside span.</p>
</div>
我附上了使用上述大部分属性的静态 HTML 和 CSS 的源代码。请看下面如何使用源代码。
使用代码
下载 zip 文件并将内容解压到 C 盘。然后您可以在任何浏览器中直接查看您的 html。图像在 image 文件夹中，CSS 样式表位于 CSS 文件夹下。
关注点
学到了一个重要的教训。CSS 不能通过一篇文章来涵盖或学习。尽管最常见的东西可以很快学会，但有很多 CSS 的有趣用法值得探索和实现。我最享受写这篇文章，尽管我无法避免让它比我想要的更长。本文仅介绍概念，绝非详尽指南。本文的目标是帮助初学者快速入门，探索 CSS 的世界。
历史
初始版本 - 2014/6/4 - Guruprasad.kb