使用CSS网页布局的详细介绍

介绍

到目前为止，您已经注意到，HTML 从上到下显示内容，大多数元素堆叠为块。星辉小编将带大家了解如何使用 CSS 将元素放置在页面中的任何位置，以创建更具视觉吸引力的页面。

网络上的大多数网页设计都属于以下两种布局之一： 固定宽度或液体。

固定宽度设计让您可以更好地控制页面的外观，但会给使用小型显示器设备的用户带来不便(大量水平滚动，人们不喜欢)。流动的设计会随着浏览器窗口的大小而增长或缩小，对用户来说更好，但对设计师来说却让事情变得更加困难。

固定宽度布局的一个完美例子是纽约时报 网站。调整页面大小。一旦你的屏幕变得小于 970 像素，你会看到滚动条出现并且页面没有改变。网络上的大多数网站都有固定的宽度，通常在 1000 像素以下(常用值为 960 像素)。

流动布局的一个完美例子是新的谷歌地图网站。同样，调整浏览器的大小以查看页面内容如何随着窗口大小而缩小或增长。这种类型的设计充分利用了可用空间，但您需要确保它在所有不同尺寸的设备上看起来都很好。我们自己的网站也是流体设计的一个例子。调整窗口大小以体验它。

CSS 布局的工作原理

CSS网页布局涉及将内容放入页面的不同区域。为此，内容需要位于容器标签中，例如：nav、header、section、footer、picture、aside和 ubiquitous div。请记住，如果不需要，则不需要使用div。显示为块的元素，例如ul、 、ol，p也可以在页面中的任何位置移动。

CSS 布局的两种技术

布局有两种通用技术：浮动 和绝对定位。浮动是迄今为止最常用的，因为它允许布局流畅。此外，使用浮动布局，内容永远不会与其他内容重叠，因此即使布局不漂亮，它也很实用。使用绝对定位，您拥有完全控制的力量和负担。我们将在本阅读中同时查看两者。

要使用浮动，您可以从页面上垂直堆叠的框的正常布局开始，但您可以允许某些元素移动到一侧并让其他材料在它们周围流动。为此，HTML 元素有一个属性float，它可以使元素浮动到页面的左侧或右侧(您的选择)。当然，除非它足够窄，否则其他材料无法在它周围流动，因此我们还必须考虑元素的宽度。我们也会看看那个。

绝对定位允许您以类似像素的精度将元素放置在页面上的任何位置。为此，CSS 有一个position 您设置为 的属性，absolute然后使用其他属性(如left和top)来指定元素的位置。这种技术不适用于流畅的设计，但适用于定位需要始终在某个位置的徽标等内容。绝对定位有时以有限的方式使用，作为主要使用浮动的整体布局的一部分。

布局策略

使用 CSS 的网页布局与其说是科学，不如说是一门艺术。没有用于标记 HTML 页面或创建 CSS 的公式。CSS 布局是您将通过经验学习的东西，学习不同的 CSS 属性，遵循教程并进行大量练习。本节后面的内容是一组指导方针，在您开始学习该主题时可能会很有用。

从您的内容开始。设计从您的内容(标题、文本、链接、照片等)开始，而不是颜色、字体或图标。页面信息应该决定设计。例如，如果学生组织页面的目标是让更多学生加入，您可以放一张成员正在做一些有趣或有趣的事情的大照片，以及他们的引言。然后你用风格让它们引人注目。

模拟你的设计。不要从代码开始您的设计，而是从绘图开始。使用绘图程序(Paint、Photoshop、Illustrator 等)可以让您自由探索不同的颜色、字体、图像和定位，而无需编写代码。通过这种方式，您可以更快地尝试多种选择。如果您的页面需要用户界面元素，例如按钮、选项卡等，您可以使用 Yahoo 的免费模板工具包以及 Photoshop。

识别盒子。一旦您对模型感到满意，您就可以开始考虑 HTML 结构。基本上，您需要确定哪些元素看起来像单独的框，因为它们必须位于 HTML 中的容器标签中。

记住背景图片。很多时候，您可以更轻松地放置带有background-image 属性的图像而不是 标签。这是因为您可以在此图像上放置其他信息。但是，您应该知道背景图像不会打印，因此，不要将重要信息(例如地图)作为背景。

分层元素。像 Photoshop 这样的工具使用图层的概念将多个东西浮动在彼此之上。要在网页上做同样的事情，有两种选择：使用该background-image属性将文本放在图像之上，或者使用该position属性将图像或图标放在文本之上。您不能使用float使内容重叠。

不要忘记边距和填充。通常，您可能不需要使用复杂的 CSS 进行布局。很好地使用边距和填充属性可以让你走得很远(尤其是与背景图像属性结合使用时)。

基于浮动的布局

在本节中，我们将通过不同的示例展示如何构建基于浮动的布局。此类布局利用该float 属性将元素并排放置并创建列。您还可以使用浮动来创建环绕效果。这是因为浮动元素已从文档流中移除，并且在它向上移动并环绕浮动之后发生了什么。(注意：你的书对文档的流程有非常详细的描述。)

浮动图像

如您所知，图像是内联元素。为了提醒您这一点，请查看此示例并调整浏览器页面的大小以查看图像会发生什么。您还可以使用 Chrome 的 Inspect Element 来注意嵌套在p.

现在，让我们 在应用以下样式规则后 查看同一页面：

通过以像素为单位指定宽度，使主体具有固定宽度。

通过指定它使身体居中margin: auto; 。

通过指定使图像向右浮动img { float: right; }。

请注意图像现在如何严格位于文档的右侧，并且段落的文本环绕在它们周围。为此唯一需要的步骤是最后一步，但其他步骤也很好。

浮动 DIV(或语义容器)

现在让我们看看当我们浮动一个容器元素时会发生什么，例如 a div、figure、footer等。这是未设置样式的页面，我们将其img放入figure 容器中。请注意这次图像不再是内联的。

如果我们现在将浮动属性应用于figure, 元素，我们将获得与之前相同的效果 ，不同之处在于 figure浏览器分配的边距已经有了一些默认值。

该float属性只接受三个值：left、right和none。最后一个值用于防止元素浮动。(没有属性;我们在盒子模型float: center的阅读中讨论了居中。)

现在我们了解了属性 float，让我们看看如何使用它来创建带有列的布局。

两列布局

为了有一个两列布局，我们需要有两个可以有意义地并排放置的容器;例如，一个section和一个aside。让我们首先在饥饿游戏示例中添加一个aside元素 。内容将是一个标题和一个短行列表：

<aside> <h3>人物</h3> <ul> <li> Katniss Everdeen </li> <li> Peeta Melllark </li> <li> Gale Hawthorne </li> <li> Primrose Everdeen </li> <li>黑密斯·阿伯纳西</li> </ul> </aside>

然后，我们对这个元素应用一些最小的样式，以便在左侧浮动，如下所示，得到这个新版本。

一边{浮动：左；
    边框：1px黑色实心；
    填充：5px ；}

重要提示：每个浮动容器元素的宽度和高度 取决于容器内内容(文本或图像)的数量。这是收缩以适应 模型。如果上面的列表有一些很长的项目，以至于列表与页面一样宽，则该float属性将不起作用。

正如您从下面的屏幕截图中看到的那样，aside可以根据边距、边框、填充和内容大小的值计算框大小(例如宽度：185px = 0 + 1px + 5px + 173px + 5px + 1px + 0)。173px 来自标题和列表中文本的宽度。同样，如果您的浮动元素中有一大段文本，它很可能与其容器一样宽，并且浮动将不起作用。

如果您希望列的大小是您想要的(例如，不是 185 像素的宽度，而是 200 像素)，您可以使用一个简单的公式进行反向计算以找出内容的宽度应该是多少。例如，200px = 0 + 2*1px + 2*5px + X px。解决这个问题，我们得到width=188px. 这意味着在我们的规则中，我们应该设置width: 188px;, 以便在浏览器页面上将列的实际大小设置为 200 像素。

可以对高度做同样的事情，但这不是很有用，因为如果相邻列获得更多内容，我们将需要重新计算。

现在，为了实现我们的两列效果，我们只需为非浮动元素添加一个边距。在这里，我们为该部分添加一个边距，以便旁边浮动。根据浮动列是在左侧还是右侧，我们需要将margin-left或设置margin-right为略大于浮动列宽度的值。由于旁边是 185px 宽，210px 的边距应该看起来不错。因此，我们添加以下规则：

部分{
    边距-左：210px ；} 

摘要：两列布局

例如，将每一列包装在容器中，aside 和section(或div带有id属性的 a)。

aside向左或向右浮动一个容器(在我们的例子中为)。

为浮动元素设置所需的宽度。

向固定元素添加边距(左侧或右侧，与浮动边匹配)。

三栏布局

从两列布局到三列布局是一个相当简单的扩展。您能想到您需要对 HTML 和 CSS 代码进行哪些更改吗?为了挑战自己，现在停止阅读并尝试使用两列布局中的代码(从上面的链接获取文件)。然后，检查我们的解决方案。以下是我们执行的步骤的摘要：

添加了一个新aside元素(在 之前section)。

aside为每个元素添加了一个 ID 属性。

在 CSS 代码中使用这两个新的 ID 作为选择器(规则相同，除了float.

添加margin-right: 210px;到部分规则中，以便为新的浮动元素留出空间。

重要提示：使用这种技术(称为正边距)时，浮动元素需要放置在 HTML 文件中的主要内容之前，否则将无法获得预期的效果。

包含浮点数

当另一个元素中包含的浮动元素大于其容器时，会出现另一个问题。当容器具有背景颜色或边框时，这一点变得很明显。在我们正在进行的饥饿游戏示例中，我们将元素的背景颜色更改section为橄榄色，因此现在您可以在下面的屏幕截图中看到浮动元素(图形)已从其容器(部分)中取出。它一直在它的容器之外，但我们只是没有注意到。

这个问题有几种解决方案，但我们将展示两个最简单的。

在容器底部添加一个元素，以便使用 clear. 在我们使用 clear 的解决方案中，我们
在该部分的末尾添加了一个元素并为其添加了 CSS 规则br.clear {clear: both;}。

为容器元素使用专用的 CSS 属性，overflow: hidden;. 这是再次使用溢出隐藏的解决方案。虽然这个 CSS 属性工作得很好，但它的名字可能会让人困惑，因为它的效果不是隐藏溢出(突出的浮动元素)，而是扩大了包含元素，使浮动元素不再突出。

在页面上定位元素

在这些笔记的开头，我们提到浮动是设计布局时最常用的技术。但是，还有另一种技术，定位，它在特定情况下有很好的用途。

我们通过属性来实现元素的定位position，它可以取这些值：

绝对

相对的

固定的

静态(这是默认值)

absolute和fixed的值在语法上非常相似(尽管它们会产生不同的效果)并且更容易理解。相对值有点棘手，因为它的含义与我们在日常语言中使用这个词的方式不同。为了解释这些值，我们将在下面展示每个值的示例。您应该查看每个示例的 HTML 和 CSS 文件，以更好地了解发生了什么。

位置：绝对

我们可以使用此样式将元素设置在页面中的所需位置，方法是使用属性left、right、top和额外指定水平和垂直位置bottom。这些属性指定与某个参考容器的 (0,0) 坐标的距离(以像素或其他一些单位为单位)。通常，引用容器是视口(浏览器查看区域的左上角)。

为了看到这一点，我们有一个饥饿游戏示例的修改版本，我们将尝试将其定位figure到其他位置，如示例的这个样式版本所示。这个效果是用这个 CSS 代码实现的：

数字 {
  位置：绝对；
  顶部：350 像素；
  左：500px；
  边框：1px 黑色实心；
  填充：3px；
}

请注意图形如何位于文本之上。这是因为通过成为 absolute，其他元素不再意识到它，因此它们无法围绕它流动。此外，尝试调整浏览器窗口的大小。图的位置不变。

位置：相对

假设我们想在图形上放置一个标题，坐在它的上面，而不是它的下面。在这种情况下，我们将需要使用相对位置。然而，要实现这一点，我们需要做两件事：

声明哪个是相对于该定位发生的元素。这就是我们在上一节中提到的引用容器。

将我们要定位的元素声明为绝对元素，并指定其相对于引用容器的坐标。

这个新示例使用以下代码在图形上创建标题：

图{
  位置：相对；
  边框：1px 黑色实心；
  填充：3px；
  宽度：400px；
}

figcaption {
  位置：绝对；
  底部：15px；
  左：4px；
  右：4px；
  颜色：黄色；
  背景颜色：黑色；
  不透明度：0.5；
  文本对齐：居中；
  字体粗细：200%；
  填充：5px；
}

因此， 中的bottom和left长度figcaption是从 的左上角测量的figure，而不是从窗口测量的。

位置：固定

这种定位与绝对定位非常相似，不同之处在于元素始终保持在其位置，而页面的其余部分则上下滚动。您可以将其视为相对于屏幕的定位。它对于将导航栏或侧边栏固定在一个位置很有用。在我们的示例中查看aside 元素如何保持固定，代码如下：

在旁边 {
  位置：固定；
  顶部：80 像素；
  边框：1px 黑色实心；
  填充：5px；
  宽度：188px；/* 这个值将确保侧边栏占据 200px */
}

以上就是关于“使用CSS网页布局的详细介绍”，如果大家想了解更多相关知识，不妨来关注一下星辉的Java星辉在线学习，里面的课程从入门到精通，很适合没有基础的小伙伴学习，希望对大家能够有所帮助哦。