20.HTML盒模型的布局影响

Web开发中，理解和掌握HTML5盒模型是至关重要的。盒模型不仅是CSS布局的基础，而且它直接影响着页面元素如何在浏览器中呈现。本文旨在深入探讨盒模型的各个组成部分以及它们如何影响网页布局。

盒模型基础

盒模型是CSS布局的核心概念，它决定了文档中的元素如何定位，以及它们之间的空间关系。一个元素的盒模型由以下几部分构成：

内容（Content）：元素的文本和图像等实际内容。
内边距（Padding）：内容区域与边框之间的空间。
边框（Border）：围绕在内边距和内容外的可见线。
外边距（Margin）：元素与其他元素之间的外部空间。

每个部分都对元素的最终尺寸和页面布局有着直接影响。

盒模型的类型

标准盒模型

在标准盒模型中，元素的width和height属性仅包括内容区域。内边距和边框的宽度是额外计算的。

box-sizing: content-box;

IE盒模型（怪异模式）

在IE盒模型中，元素的width和height包括内容、内边距和边框。

box-sizing: border-box;

现代浏览器支持box-sizing属性，允许开发者选择使用哪种盒模型。

布局影响

边距合并

当两个垂直外边距相遇时，它们会合并成一个外边距，这通常称为边距合并（margin collapsing）。这个现象会影响布局，特别是在构建垂直间距时。

盒模型和响应式设计

在响应式设计中，盒模型的理解尤为重要。使用border-box可以简化计算，因为元素的宽度包含了内边距和边框，这使得元素的尺寸更容易控制。

浮动和清除

浮动元素会影响盒模型，因为它们脱离了正常的文档流。清除浮动则是为了防止相邻元素的盒子相互覆盖。

定位

绝对定位和相对定位的元素有着不同的盒模型表现。绝对定位元素的外边距不会与其他外边距合并，而相对定位元素可能会影响其周围元素的布局。

盒子尺寸计算

当涉及到内边距和边框时，计算元素的实际尺寸可能会变得复杂。理解盒模型有助于精确计算和预测元素的实际占位。

最佳实践

为了更好地控制布局，以下是一些推荐的最佳实践：

默认情况下使用box-sizing: border-box;，这样可以让元素尺寸的计算更直观。
明确设置所有元素的外边距和内边距，避免不必要的继承和不确定性。
在进行布局设计时，始终考虑到边距合并的可能性。
使用开发者工具来检查和调试盒模型的尺寸，确保布局按预期进行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Layout Example</title>
<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

  .header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }

  .sidebar {
    background-color: #f9f9f9;
    padding: 20px;
    border-right: 2px solid #ddd;
    float: left;
    width: 20%;
    height: calc(100vh - 40px); /* Full height minus header and footer */
  }

  .main-content {
    padding: 20px;
    float: left;
    width: 80%;
  }

  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    clear: both;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px 0;
    border: 3px solid #0056b3;
  }
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
</div>

<div class="sidebar">
  <h2>Sidebar</h2>
  <p>This is the sidebar area.</p>
</div>

<div class="main-content">
  <h2>Main Content</h2>
  <p>This is the main content area.</p>
  <div class="box">Box Model Example</div>
</div>

<div class="footer">
  <p>Footer Content</p>
</div>

</body>
</html>

结语

盒模型是网页布局的基石，它决定了元素如何在页面上占据空间。作为一名前端工程师，深入理解盒模型的工作原理对于创建精确和灵活的布局至关重要。随着技术的发展，虽然我们有了更多的布局工具和框架，但盒模型仍然是所有布局决策的基础。掌握它，你将能够更加自信和高效地设计和构建现代Web页面。

异盒模型

box-sizing

content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex容器属性

1、display:flex、inline-flex

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2、flex-direction属性决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

3、flex-wrap属性，定义子元素是否换行显示

flex-wrap: nowrap | wrap | wrap-reverse;

4、 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;

5、 justify-content属性定义了项目在主轴（）上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

6、align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch（默认值）;

7、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

flex项目属性

1、align-self属性

Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明：
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
属性值
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。

2、order

说明：
number排序优先级，数字越大越往后排，默认为0，支持负数。

3、flex

说明：
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
详细属性值：
缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

4、flex-xxx

flex-grow
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis
项目的长度

flex布局案例

本文转自知乎号：千锋HTML5学院

者：明明如月

审校：蓝色漂流瓶

本文讲的是啥？

本文为你提供一篇HTML5基本布局模板示例。你可以直接拷贝，粘贴到你的HTML文件中并对其进行修改。

好，说实话，这个本是为我自己准备的html5布局模板，但是你可以拿来用。

译者注：由于无法直接粘贴代码，需要的亲直接进入尾部提供的链接，拷贝下来即可。

虽然本文比较简单（喷子止步），但是还是一个不错的模板，可以存起来，或者参考一下人家的结构。

基本的HTML5 模板布局模板：

代码如下：

图片格式

带头部、尾部和导航的基本的HTML5布局模板