Web前端：CSS篇（三）盒子模型，弹性盒子

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型的作用是为了让我们在元素摆放时更容易调整位置和间距。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>

</body>
</html>

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

实例

为 <p> 元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin - 简写属性

为了缩减代码，可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left

1. 如果 margin 属性有四个值：

margin: 25px 50px 75px 100px;
- 上外边距是 25px
- 右外边距是 50px
- 下外边距是 75px
- 左外边距是 100px

p {
  margin: 25px 50px 75px 100px;
}

2. 如果 margin 属性设置三个值：

margin: 25px 50px 75px;
- 上外边距是 25px
- 右和左外边距是 50px
- 下外边距是 75px

p {
  margin: 25px 50px 75px;
}

3. 如果 margin 属性设置两个值：

margin: 25px 50px;
- 上和下外边距是 25px
- 右和左外边距是 50px

p {
  margin: 25px 50px;
}

auto 值

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性布局背后的主要思想是使容器能够改变其物品的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。弹性容器可扩展物品以填充可用空间，或收缩物品以防止溢出。

最重要的是，flexbox 布局与方向无关，而不是常规布局（块基于垂直布局，内联基于水平布局）。虽然这些适用于页面，但它们缺乏灵活性（没有双关语的意思）来支持大型或复杂的应用程序（尤其是在方向更改、调整大小时、拉伸、收缩等时）。

注意：Flexbox 布局最适合应用程序的组件和小规模布局，而grid 布局则适用于较大规模的布局。

flex 模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局：

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

父项（flex 容器）的属性

显示

这定义了一个 flex 容器;inline 或 block，具体取决于给定的值。它为其所有直接子项启用了灵活的上下文。

.container {
  display: flex; /* or inline-flex */
}

请注意，CSS 列对 flex 容器没有影响。

弯曲方向

这样就建立了主轴，从而定义了 flex 物品在 flex 容器中的放置方向。Flexbox 是（除了可选的包装）单向布局概念。将弹性项目视为主要在水平行或垂直列中布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：从左到右;从右到左输入ltrrtl
row-reverse：从右到左 ;从左到右ltrrtl
column：相同，但从上到下row
column-reverse：相同，但从下到上row-reverse

弹性包裹

默认情况下，flex 项目将尝试适合一行。您可以更改该属性，并允许项根据需要使用此属性进行包装。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：所有 Flex 项目将位于一行上
wrap：弹性项目将从上到下包裹在多条线上。
wrap-reverse：Flex 项目将从下到上包裹在多条线上

弹性流动

这是和属性的简写，它们共同定义 flex 容器的主轴和十字轴。缺省值为。flex-directionflex-wraprow nowrap

.container {
  flex-flow: column wrap;
}

justify-content（justify-content）

这定义了沿主轴的对齐方式。当生产线上的所有 flex 项目都不灵活，或者是灵活的但已达到其最大尺寸时，它有助于分配剩余的额外可用空间。当项目溢出行时，它还对项目的对齐方式进行一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start（默认）：物品在朝向弯曲方向的起点进行包装。
flex-end：物品在弯曲方向的末端进行包装。
start：物品在朝方向的起点处打包。writing-mode
end：物品在方向的尽头打包。writing-mode
left：物品被打包到容器的左边缘，除非这与没有意义，否则它的行为类似于。flex-directionstart
right：物品被打包到容器的右边缘，除非这与没有意义，否则它的行为类似于。flex-directionend
center：项目沿线居中
space-between：物品均匀分布在队伍中;第一项在起始行，最后一项在结束行
space-around：项目均匀地分布在行中，它们周围有相等的空间。请注意，从视觉上看，空间并不相等，因为所有项目的两边都有相等的空间。第一项与容器边缘之间的空间单位为一个空间，但下一项之间有两个空间单位，因为下一项有自己的适用间距。
space-evenly：对项目进行分布，使任何两个项目之间的间距（以及到边缘的空间）相等。

请注意，浏览器对这些值的支持是微妙的。例如，从未获得某些版本的 Edge 的支持，并且 start/end/left/right 尚未在 Chrome 中。MDN。最安全的值是、和。space-betweenflex-startflex-endcenter

您还可以将另外两个关键字与这些值配对：和。使用可以确保无论执行哪种定位方式，您都不能推送元素，使其呈现在屏幕外（例如，从顶部），从而使内容也无法滚动（称为“数据丢失”）。safeunsafesafe

对齐项目

这定义了弹性项目在当前线上沿十字轴布局方式的默认行为。将其视为十字轴（垂直于主轴）的版本。justify-content

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch（默认）：拉伸以填充容器（仍尊重最小宽度/最大宽度）
flex-start / start / self-start：项目放置在十字轴的起点。这两者之间的区别是微妙的，是关于尊重规则或规则的。flex-directionwriting-mode
flex-end / end / self-end：将物品放置在十字轴的末端。区别又是微妙的，是关于尊重规则与。规则。flex-directionwriting-mode
center：项目在十字轴上居中
baseline：项目对齐，例如其基线对齐

and 修饰符关键字可以与这些关键字的所有其他关键字结合使用（尽管请注意浏览器支持），并帮助您防止对齐元素以使内容变得无法访问。safeunsafe

对齐内容

当十字轴上有额外空间时，这会将柔性容器的线对齐内部，类似于在主轴内对齐单个物品的方式。justify-content

注意：此属性仅在多行灵活容器上生效，其中设置为 either 或）。单行灵活容器（即 where 设置为其默认值）将不会反映。flex-wrapwrapwrap-reverseflex-wrapno-wrapalign-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

normal（默认）：项目在其默认位置打包，就像未设置任何值一样。
flex-start / start：将物品包装到容器的开头。（支持越多）尊重方向，而尊重方向。flex-startflex-directionstartwriting-mode
flex-end / end：包装到容器末端的物品。（更多的支持）尊重，而结束尊重方向。flex-endflex-directionwriting-mode
center：容器中的项目居中
space-between：物品均匀分布;第一行位于容器的开头，最后一行位于容器的结尾
space-around：项目均匀分布，每行周围空间相等
space-evenly：物品均匀分布，周围空间相等
stretch：线条伸展以占据剩余空间

and 修饰符关键字可以与这些关键字的所有其他关键字结合使用（尽管请注意浏览器支持），并帮助您防止对齐元素以使内容变得无法访问。safeunsafe

间隙、行间隙、列间隙

gap 属性显式控制 flex 项之间的空间。它仅适用于不在外边缘的项目之间的间距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

该行为可以被认为是最小的排水沟，如果排水沟以某种方式更大（因为类似的东西），那么只有当该空间最终变小时，间隙才会生效。justify-content: space-between;

它不仅适用于 flexbox，也适用于网格和多列布局。