盒子模型

当浏览器渲染 HTML 文件时，它会将每个块元素放在一个框中，这使我们可以更改框的大小、边框以及框内（和框外）的间距。这被称为盒子模型.

每个框都有以下可以设置的属性：内容区域的尺寸（高度和宽度）、填充、边框和边距.

布局决定页面上元素/框的相对位置。默认布局（文档/普通流）只是堆叠块元素并使用“流布局”来定位父元素中的子元素。这是确定元素位置的默认方式。

有三种方法可以更改元素的默认位置：对齐、浮动和定位。要将元素重新定位到所需的位置，我们应该首先尝试使用对齐，因为它是最简单的方法，最后尝试使用定位，因为它最具侵入性。

尺寸

要水平对齐块元素中的内容，我们可以为块元素设置text-align属性。可以通过为内联元素设置vertical-align属性来更改内联元素在其包含元素中的垂直对齐方式。内联元素应垂直对齐，相对于同一包含元素中同一行上的其他内容。

块元素可以通过设置其宽度属性并在页面上居中，并将它们的左右边距设置为“auto”。通过使一个具有设置宽度的块浮动，可以将其推到左侧或右侧。

CSS 定位属性允许我们使用相对于参考点的偏移量来设置元素，这将四种定位方法区分开来。

偏移量可以是 left、right、top 和 bottom。

您可以使用float属性将元素从普通布局（流）中取出，并将其推到左侧或右侧。元素的垂直位置与其在普通布局中的垂直位置相同。如果浮动元素位于某些文本上方，浏览器会将文本环绕在浮动元素周围。浮动元素通常会设置其宽度属性，因为否则它将占据可用的水平空间，而不会出现浮动。

浮动子元素保留在其父元素内，即封闭关系，这是物理性的，不会改变。浮动子元素可能会超出其父元素框，因为它没有考虑浮动子元素。overflow属性决定了当内容超出元素框时会发生什么。clear属性，当设置在元素上时，会将元素向下推，以避免（“保持清除”）左侧或右侧的浮动元素。

要创建多列布局，我们可以使用浮动和清除元素。

这里有一个示例.

如果可能，通过对齐元素的内容来布局元素
- 水平对齐：text-align（使用此属性对齐块元素的内容）
- 垂直对齐：vertical-align（使用此属性在其包含元素中对齐内联元素）
如果对齐不起作用，请尝试浮动元素
如果浮动不起作用，请尝试定位元素
- 绝对/固定定位是最后的手段，不应过度使用