HTML5 & CSS3 新手指南：布局你的第一个网页（系列 4/12）
我们将学习更多关于 CSS 样式的显示、定位、格式化等内容。这一切都围绕着如何使用 CSS 创建视觉外观。
引言
本文致力于理解和学习更多关于网页布局和视觉外观的内容。我们将通过示例重点关注以下主题。在文章结束时，您应该能够学会并在日常工作中应用它们。
背景
如果您是初学者，强烈建议阅读以下文章以更深入地了解 HTML 和 CSS。
1. HTML5 和 CSS3 入门指南 - 编写你的第一个代码（系列 1/12）
2. HTML5/CSS3 入门指南 - 样式化你的第一个网页（系列 3/12）
盒模型（外边距、边框、内边距和内容）
让我们通过一个示例来详细了解 CSS 盒模型。文档中的每个 HTML 元素都有一个盒模型。内容是盒模型的最内部组件，是盒模型必需的部分，其他都是可选的。
下面是 CSS 盒模型的示意图。
外边距 (Margin) – 它是盒模型的最外部区域；是边框周围的区域。请注意 - 外边距完全是透明的，没有任何背景色。
边框 (Border) - 边框就是内边距和外边距之间的区域。可以通过使用 border-width、border-style、border-color 或简单地设置 border 来控制边框区域。
内边距 (Padding) – 内边距是内容周围的区域。可以通过设置适当的内边距样式，如 padding-top、padding-right、padding-bottom、padding-left 来控制内容之间的内边距。
内容 (Content) - 盒模型中的内容是最内部的区域，文本、图像等显示在此处。
这是一个盒模型的示例。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Box model example to demonstrate margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL
{
background: gray;
margin: 10px 10px 10px 10px;
padding: 2px 2px 2px 2px;
}
LI
{
color: white;
background: blue;
margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px;
}
LI.border
{
border-style: dashed;
border-width: medium;
border-color: orange;
background: red;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Blue</LI>
<LI class="border">Red</LI>
</UL>
</BODY>
</HTML>
我们将更详细地了解盒模型。下图显示了一个带有外边距、边框、内边距和内容的 CSS 盒模型。
请注意，当外边距设置为 15 时。左、右、上、下的外边距将分别设置为 15px。我们可以根据需要显式控制盒模型的每个边缘。
这是我们上面盒模型的 CSS 类选择器样式
.CssBoxModel {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid;
margin: 15px;
}
注意：实际内容的宽度设置为 300px，高度设置为 200px，但由于我们设置了盒模型属性，整个盒子的宽度和高度将通过将周围的内边距、边框和外边距的宽度和高度相加来计算，如下所示。
总宽度 = 15px + 1px + 10px + 300px + 10px + 1px + 15px = 352px
总高度 = 15px + 1px + 10px + 200px + 10px + 1px + 15px = 252px
盒外边距示例
让我们通过设置外边距和背景相关属性来定义一个段落样式。之后，我们将在 HTML 文档中使用此样式。
注意 – 我们显式设置了外边距属性，但您不必这样做。
p {
margin-top: 2px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 2px;
background: orange
}
这是我们应用了样式的 HTML 文档。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Box model example to demonstrate margins</TITLE>
<STYLE type="text/css">
p
{
margin-top: 2px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 2px;
background: orange
}
</STYLE>
</HEAD>
<BODY>
<p>
Paragraph with margins.
</p>
<p style = "border: solid black 5px;">Normal paragraph with 5px border</p>
</BODY>
</HTML>
尺寸、显示、定位、浮动、对齐
CSS 尺寸
CSS 尺寸允许我们设置 HTML 元素之间的尺寸。以下是我们可设置的尺寸属性。
引用：CSS 尺寸属性基于 [1]height : 用于设置盒的高度。
width : 用于设置盒的宽度。
line-height : 用于设置文本行的高度。
max-height : 用于设置盒的最大高度。
min-height : 用于设置盒的最小高度。
max-width : 用于设置盒的最大宽度。
min-width : 用于设置盒的最小宽度。
这是一个例子
<html>
<body>
<p style="width:170px; ;border:3px solid green;
padding:5px; margin:3px;">
CodeProject Paragraph Example With Width - 170px
</p>
<p style="max-width:200px; height:100px;border:10px solid red;
padding:8px; ">
This paragraph max width is 100px and 50px height.</p>
</body>
</html>
CSS 显示
CSS display 属性指示元素是否应该显示。display 属性可以设置为 inline、block 或 none 等。display 的默认值始终是 inline。
引用：CSS Display 属性基于 [2]
- display : inline – 当元素需要在同一块内显示在同一行时，我们可以使用 display: inline。
- display : block – 当元素需要像段落一样显示为一个块时，我们可以使用 display: block。注意 – 您总是会看到元素周围有一些空白。
- display : none – 当您希望隐藏某个元素，并且在页面渲染时不想显示它时，我们可以使用 display: none。
- display : list – display: list 用于将元素显示为列表项。元素显示方式与使用 ul（无序列表）完全相同。
- display : table – 用于将元素显示为 <table> 元素。
- display : inline-table – 用于指定元素何时需要显示为内联表格。
- display : table-row-group – 用于显示类似表格的 <tbody> 元素。
- display : table-header-group – 用于显示类似表格的 <thead> 元素。
- display : table-footer-group – 用于显示类似 <tfoot> 的元素。
- display : table-row – 用于显示类似表格的 <tr> 元素。
- display : table-column-group – 用于显示类似 <colgroup> 的元素。
- display : table-column – 用于显示类似 <col> 的元素。
- display : table-cell – 用于显示类似表格的 <td> 元素。
- display : table-caption – 用于显示类似 <caption> 的元素。
我们将在稍后通过构建表格的示例中了解 display 属性的用法。
CSS 定位
CSS 定位允许我们定位元素。可以设置元素在顶部、左侧、右侧、底部的位置。
我们将简要介绍各种定位类型。
静态定位 (Static positioning) : 静态定位不会改变 HTML 元素的位置，意味着它没有任何效果。默认情况下，position 属性值始终设置为 static。
相对定位 (Relative positioning) : 相对定位用于通过设置适当的偏移量（如 top、bottom、left、right 属性）来改变元素相对于其默认位置（元素将显示的位置）的位置，以便您可以在文档中更改 HTML 元素的位置。
这是一个示例。请注意，应用此样式的元素的位置将从其正常位置向左移动 10px，向上移动 -10px。
.relativePosition {
position: relative;
top: -10px;
left: 10px;
background-color: red;
width: 200px;
}
固定定位 (Fixed positioning) : 元素的位置将始终固定。使用 top、right、left 和 bottom 属性。即使您滚动页面，元素的位置也不会改变。
这是一个例子
.fixedPosition {
position: fixed;
bottom: 0;
right: 0;
width: 100px;
background-color: red;
}
绝对定位 (Absolute positioning) : 绝对定位允许我们将任何元素放置在我们想要的确切位置。我们可以通过设置其 top、left、right、bottom 属性来定位元素。请注意，元素的绝对定位是基于其父元素，如果没有父元素，它将默认为根 <html> 元素本身。
这是一个例子
.absolute {
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 100px;
}
让我们通过一个示例了解如何为 HTML 元素设置绝对和相对定位。首先，让我们定义一些必需的样式。
您可以在下方看到“加入”和“登录”按钮的样式已定义为绝对定位。段落、fieldset 设置为相对定位，Bob 图片的位置设置为 Fixed，left 为 30px。
body
{
font-family: 'Tangerine', serif;
font-size: 14px;
background: orange;
}
#bogImage { position: fixed; left: 30px; }
p { font-size: 30px; line-height: 1.3em; }
div#page-wrap { width: 500px; margin: 20px auto; }
p { margin-left: 600px; position: relative;}
form { padding-right: 80px; margin-bottom: 20px; }
fieldset { padding: 10px; position: relative; }
label { display: block; float: left; width: 120px; }
input, textarea { margin-bottom: 5px; }
legend { font-size: 1.8em; }
#signInButton { position: absolute; top: 70px; left: 350px; }
#joinButton { position: absolute; top: 150px; left: 350px; }
#LinksDiv
{
width: 416px;
position: absolute;
right: 100px;
top: 100px;
font: 16px "Lucida Grande", Sans-Serif !important;
}
下方是我们将上述绝对和相对定位样式应用于其中的 HTML 文档。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Absolute and Relative Positioning Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="LinksDiv">
<div>
<a class="header-button" href="https://codeproject.org.cn/script/Articles/Latest.aspx">Latest Articles</a>
<a class="header-button" href="https://codeproject.org.cn/script/Answers/List.aspx?tab=active">Question Answers</a>
</div>
</div>
</div>
<img id="bogImage" title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;">
<p> Welcome to CodeProject !</p>
<div id="page-wrap">
<h1>Absolute and Relative Positioning</h1>
<form action="" method="post" id="signIn" name="signIn">
<fieldset>
<legend>Sign In</legend>
<label for="name">Username</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Password</label>
<input type="text" id="password" name="password" />
<br />
<button type="submit" id="signInButton" name="send">Sign In</button>
</fieldset>
</form>
<form action="" method="post" id="signUp" name="signUp">
<fieldset>
<legend>Sign Up!</legend>
<label for="name">Real Name</label>
<input type="text" id="name" name="name" />
<br />
<label for="city">City</label>
<input type="text" id="city" name="city" />
<br />
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<br />
<label for="email">Username</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Password</label>
<input type="text" id="password" name="password" />
<br />
<button type="submit" id="joinButton" name="send">Join!</button>
</fieldset>
</form>
</div>
</body>
</html>
页面在 Web 浏览器中渲染时的效果如下。
CSS 浮动
在 HTML 文档中，可以应用 float 属性将元素设置为向左、向右浮动或不浮动。
以下是您可以设置的可能浮动属性。
引用：float 定义基于 [3]
- left - 表示元素必须在其包含块的左侧浮动。
- right - 表示元素必须在其包含块的右侧浮动。
- none - 表示元素不得浮动。
- clear - clear 属性设置为 left、right 或 both。它主要用于清除元素向左、向右等的浮动。当应用于 HTML 元素并带有适当的值时，它会将元素推到通常显示的位置下方。
还有另一个名为 clear 的属性，它是 CSS Float 属性的一部分，可用于清除浮动设置。clear 属性可以设置为以下值之一：left、right、both、none、inherit。
float 属性的一个很好的应用场景是使用 CSS 创建页面布局。您可以注意到内容样式设置为 float left，导航设置为 float right。通过将 clear 属性设置为“both”，我们可以轻松清除浮动设置（左侧和右侧）。
.container {
width: 960px;
margin: 0 auto;
}
.content {
float: left;
width: 660px;
background: white;
}
.navigation {
float: right;
width: 300px;
background: blue;
}
.footer {
clear: both;
background: gray;
padding: 10px;
}
CSS 对齐
在 CSS 中，我们可以将文本水平对齐到左、中、右，或垂直对齐到上、下、中、文本顶部、文本底部、下标和上标。以下是 align 的属性。
text-align – 我们可以将 text-align 属性应用于任何块级元素，如文本、数据、内联元素。text-align 属性可以是以下任何值：right、left、center 和 justify。
这是一个我们将段落标签设置为右对齐的示例。
p { text-align: right; }
引用：CSS 垂直对齐属性基于 [4]
- vertical-align - 指定内联元素或表格单元格框的垂直对齐。以下是允许的值。
- baseline – 默认值。将元素的基线与父元素的基线对齐。
- sub – 提高盒子的基线，以便元素显示为下标。
- super – 将元素对齐为上标。
- top - 将元素顶部与行中最高的元素对齐。
- text-top - 将元素顶部与父元素的字体顶部对齐。
- middle - 将元素的垂直中点与父元素的基线加上 x-height 的一半对齐。
- bottom - 将元素底部与行中最低的元素对齐。
- text-bottom - 将元素底部与父元素字体的底部对齐。
- percentage – 百分比指的是元素的 line-height 属性值。它将元素基线相对于父元素基线向上提升指定的量。例如 - 20%。
- length - 特定长度，例如 10px。
- Inherit - 元素应具有与父元素相同的 vertical-align 设置。
示例
<style type="text/css">
img.bogImage {vertical-align:text-top;}
</style>
<img id="bogImage" class=” bogImage” title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;">
CSS 边框
CSS border-style 属性用于在 HTML 元素周围显示边框。可以设置边框样式、宽度、颜色等。
让我们通过一个示例来看各种 border-style 设置。这是一个应用了 border-style 的示例 HTML 文档。
border-style 可以是以下任何值——none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: orange;
}
p.borderNone {border-style:none;}
p.borderDotted {border-style:dotted;}
p.borderDashed {border-style:dashed;}
p.borderSolid {border-style:solid;}
p.borderDouble {border-style:double;}
p.borderGroove {border-style:groove;}
p.borderRidge {border-style:ridge;}
p.borderInset {border-style:inset;}
p.borderOutset {border-style:outset;}
p.borderHidden {border-style:hidden;}
</style>
</head>
<body>
<p class="borderNone">No border.</p>
<p class="borderDotted">Dotted border.</p>
<p class="borderDashed">Dashed border.</p>
<p class="borderSolid">Solid border.</p>
<p class="borderDouble">Double border.</p>
<p class="borderGroove">Groove border.</p>
<p class="borderRidge">Ridge border.</p>
<p class="borderInset">Inset border.</p>
<p class="borderOutset">Outset border.</p>
<p class="borderHidden">Hidden border.</p>
</body>
</html>
CSS 3 支持以下额外的边框属性。
- border-radius – 设置后，为元素添加圆角边框。
- box-shadow – 为盒子添加阴影。
- border-image – 在元素边框周围指定图像。这是一个将 border-radius 设置为 20px 以创建圆角的示例。此外，边框样式设置为 2px solid 红色。
<style type="text/css">
div
{
border:2px solid red;
padding:10px 40px;
background:orange;
width:300px;
border-radius:20px;
}
</style>
<div>The border-radius set to 20px. Allows us to add rounded corners to elements.</div>
让我们通过定义样式和编写 HTML 文档的示例来查看边框阴影。
这是我们使用的样式。请注意，边框阴影通过水平、垂直偏移量设置为 10px，模糊半径设置为 5px，颜色为灰色。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:200px;
background-color:orange;
box-shadow: 10px 10px 5px gray;
}
p
{
font-size: 20px;
}
img
{
padding:5px;
}
</style>
</head>
<body>
<div>
<p>Welcome to Code Project</p>
<img id="bogImage" class=” bogImage” title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;">
</div>
</body>
</html>
CSS 列表和表格
CSS list 属性主要用于设置 HTML 中有序列表和无序列表的样式。我们将通过示例介绍如何使用 CSS 设置列表样式。
- list-style-type – list-style-type 决定列表标记的形状。例如：disc、square、circle 等。列表项的整体外观取决于此属性。
- list-style-image – 当您希望显示图像而不是编号列表或项目符号时，使用 list-style-image。
- list-style-position – list-style-position 指示标记是应显示在框内部还是外部。
- list-style – list-style 属性允许您在一个属性中指定所有列表样式。
现在让我们看一些例子。
示例 1
我们将定义一个简单的列表样式为 none，但列表元素显示为“inline”。
#list1 { background: orange; }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }
这是我们在 HTML 中使用列表样式的方式。
<p>Welcome to CodeProject</p>
<div id="list1">
<ul>
<li><a href="https://codeproject.org.cn/">Home</a></li>
<li><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Articles</a></li>
<li><a href="https://codeproject.org.cn/script/Answers/List.aspx?tab=active">Question Answers</a></li>
<li><a href="https://codeproject.org.cn/script/Forums/List.aspx">Discussions</a></li>
</ul>
</div>
现在我们将定义一个带图片的列表样式。列表的每个项目将显示一个箭头而不是项目符号。
#list2 { background: orange; }
#list2 ul { list-style-image: url("../images/arrow.png"); font-size:18px; }
我们现在将学习如何为列表应用 CSS 变换。下方是使用变换和列表样式定义的列表。
<html>
<head>
<style type="text/css">
body
{
font-family: 'Tangerine', serif;
font-size: 24px;
}
#list3 { background: orange; }
#list3 ul { list-style:none; }
#list3 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list3 ul li a { display:block; width:300px; height:80px;
text-decoration:underline; }
#list3 ul li a:hover { -moz-transform:rotate(-3deg); -moz-box-shadow:10px 10px 10px;
-webkit-transform:rotate(-3deg); -webkit-box-shadow:10px 10px 10px #000000;
transform:rotate(-3deg); box-shadow:10px 10px 10px #000000; }
p
{
font-size:35px;
background: orange;
}
</style>
</head>
<body>
<p>Welcome to CodeProject - CSS List With Transformation</p>
<div id="list3">
<ul>
<li><a href="https://codeproject.org.cn/">Home</a></li>
<li><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Articles</a></li>
<li><a href="https://codeproject.org.cn/script/Answers/List.aspx?tab=active">Question Answers</a></li>
<li><a href="https://codeproject.org.cn/script/Forums/List.aspx">Discussions</a></li>
</ul>
</div>
</body>
</html>
表格
我们将学习如何用 CSS 样式化 HTML 表格。使用 CSS，我们可以控制表格边框、单元格内的文本对齐、表格颜色、高度、宽度等等。
这是一个简单的 HTML 表格 CSS 样式的示例。
<html>
<head>
<style type="text/css">
table {
margin: 1em; border-collapse: collapse;
font-family: 'Tangerine', serif;
font-size: 24px;
}
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: orange; }
tbody { background: white; }
</style>
</head>
<body>
<table class="hilite" id="highlight">
<thead>
<tr><th>Week</th><th>Article</th></tr>
</thead>
<tbody>
<tr><td>Article 1</td><td> Writing Your First Code </td></tr>
<tr><td>Article 2</td><td>Building on the Basics</td></tr>
<tr><td>Article 3</td><td>Styling Your First Web Page</td></tr>
<tr><td>Article 4</td><td>Laying Out Your First Web Page</td></tr>
</tbody>
</table>
</body>
</html>
在上面的示例中，我们已经看到了如何创建和应用 HTML 表格的样式。现在我们将看到如何使用 CSS 创建表格。我们可以使用 div、span 和一些样式轻松创建 CSS 表格。
这是创建表格所需的 CSS 样式。
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
使用 display: table，我们将创建一个简单的表格显示。
<style type="text/css">
.Table{
display: table;
}
.TableRow{
display: table-row;
}
.TableCell{
display: table-cell;
}
div {
background: orange;
width: 200px;
font: 24px;
}
body
{
font-family: 'Tangerine', serif;
font-size: 28px;
}
</style>
我们将在 HTML 中如下使用上述样式。
<div class="Table">
<div class="TableRow">
<div class="TableCell">
<div class="value">47,291</div><div class="title"><a href="https://workspaces.codeproject.com">Workspaces</a></div>
</div>
<div class="TableCell">
<div class="value">10.5 Million</div><div class="title"><a href="https://codeproject.org.cn/lounge.aspx">Members</a></div>
</div>
<div class="TableCell">
<div class="value">3 Billion</div><div class="title"><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Article views</a></div>
</div>
</div>
CSS 表格显示效果如下。
使用 CSS 表格的优点
引用：以下内容受 [5] 的启发和汇编
- 页面加载更快，因为 HTML 不会包含与 HTML 表格相关的任何巨大或垃圾标记，以及一些与表格视觉外观相关的代码。
- 搜索引擎可以轻松爬取 HTML。更小的文件大小和更少的垃圾内容使搜索引擎爬虫更容易识别内容。
- 内容和格式的清晰分离。对于基于 CSS 的表格，实际数据将存储在 HTML 中，格式是独立的，将存储为 CSS 样式。您可以将样式定义在一个文件中，并在多个文档中包含它们。
- 视觉一致性得以保持，而且我们不必深入 HTML 页面修改表格样式。可以轻松修改视觉外观，只需很少的精力。
Div 和 Span
Div 或 divisions 是一个块级容器（在结束 div 标签后有一个换行符），它将内容分成单独的部分。Div 用作包含一个或多个块级元素的容器。使用 Div，我们可以定义 HTML 文档内的部分，以便可以从 CSS 和 JavaScript 访问它们。
示例
<style type="text/css">
#demo
{
background: orange;
}
</style>
<div id=”demo”>
<ul>
<li>Article 1 : Writing Your First Code </li>
<li>Article 2 : Building on the Basics</li>
<li>Article 3 : Styling Your First Web Page</li>
<li>Article 4 : Laying Out Your First Web Page</li>
</ul>
</div>
Span 用于在 HTML 文档中添加视觉外观。Span 本身不会增加价值，在 HTML 文档中也不会做任何事情。我们必须为 Span 包含一个类才能添加视觉外观。Div 和 Span 的主要区别在于 Span 默认不会自己添加格式。而 Div 像段落一样添加换行。
Span 元素的 CSS 样式示例如下
<h2><span style="color : orange;">Welcome to CodeProject!</span></h3>
关注点
虽然 CSS 易于学习和应用，但您仍然可以探索、学习和分享大量内容。我个人很喜欢写这篇文章。我希望这篇文章能帮助任何初学者开始学习网页布局和应用样式。我喜欢 CSS3 对阴影、圆角、变换等的支持。
参考文献
[1] https://w3schools.org.cn/css/css_dimension.asp
[2] https://w3schools.org.cn/cssref/pr_class_display.asp
[3] https://mdn.org.cn/en-US/docs/Web/CSS/float
[4] https://w3schools.org.cn/cssref/pr_pos_vertical-align.asp
[5] http://www.itegritygroup.com/css-vs-tables/
历史
版本 1.0 - 使用样式布局 Web 文档 - 2014/06/04
版本 1.1 - 更新文章并添加了适当的引用 - 2015/08/31