编程指南-CSS案例开发-3-CSS布局-2：布局技术

作者：棒棒堂智能运维发布时间：2024-09-13

3.2 布局技术

3.2.1 布局技术概览

CSS布局技术允许开发者拾取网页中的元素，控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，布局技术主要包括常规流布局、弹性盒子、网格、浮动、定位、多列布局，每种技术都有独特的用途，各有优缺点，相互辅助，通过理解各个布局方法的设计理念，构建网页布局方案。

3.2.2 常规流布局

常规流布局是在没有改变布局规则情况下的页面元素布局方式，即在开发者未曾应用CSS规则改变网页中元素的展现方式时，元素会按照常规流布局组织页面。常规流布局的设计初衷在于构建易读、合理的文档，开发者应该遵循这样的指引原则，在对布局做出改动时与常规流布局协同，而不是与之对抗。默认地，块级元素按照基于其父元素的书写模式（默认值“horizontal-tb”）的块流动方向（block flow direction）放置，每个块级元素会在上一个元素下面另起一行，以指定的外边距分隔；行内元素不会另起一行，只要父级块级元素的宽度内有足够的空间，会与其他行内元素放在同一行，空间不够时，溢出的内容会下移到新的一行，代码示例如下。

如图3-2-2-1所示。

3.2.3 弹性盒子

（1）什么是弹性盒子

弹性盒子是一种按行或按列布局的一维布局方式，元素可以膨胀以填充额外的空间，收缩以适应更小的空间。在使用弹性盒子时，指定元素的布局为flexible，给这些flexible元素的父元素的“display”属性设置为“flex”,或者将“display”属性设置为“inline-flex”，但是这种情况下元素的行为类似于行内元素。代码示例如下。

设置了“display：flex;”的父元素被称之为flex容器（flex container），在flex容器中表现为弹性的盒子的元素被称之为flex项（flex item），如图3-2-3-1所示。

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

主轴（main axis）是沿着flex元素放置的方向延伸的轴（例如页面上横向的行、纵向的列），主轴的开始和结束被称为“main start”和“main end”。
交叉轴（cross axis）是垂直于flex元素放置方向的轴，交叉轴的开始和结束被称为“cross start”和“cross end”。

（2）使用弹性盒子

在将元素设置为弹性盒子之后，可以通过一些属性定义弹性子元素如何在弹性容器内布局。

应用在弹性盒子父元素上的属性如下。

flex-direction：指定了弹性子元素在父容器内的位置，取值有“row”（默认值，横向排列）、“row-reverse”（反转横向排列，最后一项在最前面）、“column”（纵向排列）、“column-reverse”（反转纵向排列，最后一项在最上面）。
justify-content：内容对齐属性应用到弹性父容器上，把弹性子元素沿着弹性父容器的主轴线对齐，取值有“flex-start”（默认值，弹性子元素向行头紧挨着填充）、“flex-end”（弹性子元素向行尾紧挨着填充）、“center”（弹性子元素居中紧挨着填充）、“space-between”（弹性子元素平均分布）、“space-around”（弹性子元素平均分布，两边留有一半的间隔空间）。
align-items：设置弹性子元素在交叉轴方向上的对齐方式，取值有“flex-start”（弹性子元素的交叉轴起始位置紧靠交叉轴的起始边界）、“flex-end”（弹性子元素的交叉轴起始位置紧靠交叉轴的结束边界）、“center”（弹性子元素在交叉轴上居中放置）、“baseline”（与基线对齐）、“stretch”（使边距盒的尺寸尽可能接近所在行的尺寸）。
flex-wrap：指定弹性盒子的子元素换行方式，取值有“nowrap”（默认，单行排列）、“wrap”（多行排列）、“wrap-reverse”（反转wrap排列）。
align-content：修改“flex-wrap”属性的行为，类似于align-items，设置各个行的对齐方式，取值有“stretch”（默认，各行伸展以占用剩余的空间）、“flex-start”（各行向起始位置堆叠）、“flex-end”（各行向结束位置堆叠）、“center”（各行向中间位置堆叠）、“space-between”（各行平均分布）、“space-around”（各行平均分布，两端保留子元素于子元素之间间距大小的一半）。

应用在弹性子元素上的属性如下。

order：设置弹性容器内弹性子元素的排列顺序，数值小的排在前面。可以为负值。
flex-grow：设置弹性子元素的扩展比率，即当容器有多余空间时，子元素如何扩展，默认为“0”（不扩展），如果所有子元素的“flex-grow”值相同，等分剩余空间；如果不同，按“flex-grow”值的比例分配空间。
flex-shrink：定义弹性盒子的收缩比率，即当容器空间不足时，子元素如何收缩，默认值为“1”（子元素可以收缩），如果所有子元素的“flex-shrink”值都相同，则它们将等比例收缩；如果不同，则按“flex-shrink”值的比例收缩。
flex-basis：设置弹性盒子元素在分配多余空间之前，在主轴方向上占据的默认空间大小，默认值为“auto”（元素的本来大小），可以设置为具体的长度值（如px、em等），也可以设置为百分比。
align-self：设置弹性子元素自身在交叉轴方向上的对齐方式，取值有“auto”（计算值为父元素的：align-items的值）、“flex-start”（弹性子元素的交叉轴起始位置紧靠交叉轴的起始边界）、“flex-end”（弹性子元素的交叉轴起始位置紧靠交叉轴的结束边界）、“center”（弹性子元素在交叉轴上居中放置）、“baseline”（与基线对齐）、“stretch”（使边距盒的尺寸尽可能接近所在行的尺寸）。
“flex”指定弹性子元素如何分配空间，是“flex-grow”、“flex-shrink”和“flex-basis”的简写属性，用于同时设置这三个值，默认值为“0 1 auto”（不扩展，可以收缩，大小由元素内容决定），可以简写为单个值（如flex: 1;）、两个值（如flex: 1 1;）或三个值（如flex: 1 1 100px;），可以设置“auto”（计算值为1 1 auto）、“initial”（计算值为 0 1 auto）、“none”（计算值为 0 0 auto）、“inherit”（从父元素继承）以及根据布局需要设置。

以下是一个简单示例，其中“.flex-container”是Flexbox的父容器，“.flex-item”应用于所有子元素，每个子元素平分可用空间，且第二个子元素占据的空间是其他子元素的两倍，代码示例如下。

💡 注意：

大多数浏览器都支持弹性盒子，诸如 Firefox、Chrome、Opera、Microsoft Edge 和 IE 11，较新版本的 Android/iOS 等等，但是仍旧有被人使用的老浏览器不支持弹性盒子（或者只支持老版本的弹性盒子），弹性盒子的浏览器兼容性如下图所示。

3.2.4 网格

网格布局（Grid Layout）是CSS中一种强大的布局系统，允许开发者以二维网格的方式对元素进行布局，同时在两个维度上对元素进行定位和对齐，以下是网格布局中常用的一些属性。

display：将元素设置为网格容器，元素的所有直系子元素将成为网格元素。
grid-template-columns/grid-template-rows：定义网格的列宽和行高，可以使用具体的像素值、百分比、fr单位（等分剩余空间）或minmax()函数。例如，“grid-template-columns: 100px 1fr 2fr;”，表示第一列宽度为100px，第二列和第三列按比例分配剩余空间，第三列是第二列的二倍宽。
grid-row-gap/grid-column-gap：“grid-row-gap”属性用来设置行之间的网格间距，“grid-column-gap”用来设置列之间的网格间距。
grid-gap：“grid-gap”属性是“grid-row-gap”属性和“grid-column-gap”属性的简写。例如，“grid-gap：50px;”可以同时设置行间距和列间距，“grid-gap：50px 100px;”可以设置分别设置行间距和列间距。
grid-column-start/grid-column-end：设置网格元素列开始和结束的位置。
grid-row-start/grid-row-end：设置网格元素行开始和结束的位置。
grid-template-columns：定义网格布局中的列的数量，同时可以设置列的宽度。例如，“grid-template-columns：auto auto auto auto;”设置4列的宽度，且所有列的宽度都是一样的。
grid-template-rows：设置每一行的高度。例如，“grid-template-rows：80px 200px;”。
justify-content：定义了网格项在主轴（默认是水平方向）上的对齐方式，取值有：“stretch”（默认值，网格项拉伸填满容器）、“start”（网格项对齐到容器的起始边界）、“end”（网格项对齐到容器的结束边界）、“center”（网格项在容器中居中对齐）、“space-around”（网格项之间和容器边界之间的空间平均分配）、“space-between”（网格项之间的空间平均分配，但容器边界没有空间）、“space-evenly”（网格项之间和容器边界之间的空间都平均分配）。
align-content：定义网格项在交叉轴（默认垂直方向）上的对齐方式，取值与“justify-content”相同。
grid-area：“grid-area”属性是一个简写属性，同时设置“grid-row-start”、“grid-column-start”、“grid-row-end” 和 “grid-column-end” 的值，定义一个网格项应该占据的区域，例如，“ grid-area: 2 / 1 / 4 / 3; ”，从第2行第1列开始，到“第4行”（实际上是第3行结束）第3列结束；“grid-area”属性还可以接受一个自定义的区域名称作为值，这个名称需要在 “grid-template-areas” 属性中定义使用。
“grid-template-areas”：“grid-template-areas” 属性允许你通过引用网格线名称或网格区域名称来定义网格的模板区域。这个属性使用字符串值，其中每个字符串代表网格的一行，字符串中的每个字符（通常是单引号或双引号括起来的名称，但也可以是点“.”表示空区域）代表该行中的一个网格区域。“grid-area”属性和“grid-template-areas”属性结合使用的代码示例如下。

📌 网格布局的浏览器兼容性如下图所示。

3.2.5 浮动

浮动（Float）可以使元素脱离其正常的文档流，向左或向右移动，直到元素的外边缘碰到包含框或另一个浮动元素的边缘，浮动元素之后的元素将围绕它，浮动元素之前的元素不会受到影响，要使用浮动，可以通过为元素设置“float”属性来实现，有三个取值，“none”（默认值，不浮动）、“left”（向左浮动）、“right”（向右浮动）。浮动的影响如下。

脱离文档流，浮动元素不再占据空间，后续的非浮动元素会向上移动到浮动元素原本占据的空间。
围绕效果，浮动元素旁边的文本或行内元素会围绕它排列（这是浮动原本的设计目的）。
高度塌陷，如果容器内部只有浮动元素，那么容器的高度可能会塌陷，因为浮动元素脱离了文档流。

由于浮动可能导致父容器高度塌陷等问题，因此通常需要清除浮动，清除浮动主要有以下几种方式。

① 使用伪元素清除浮动，通过为父容器添加一个伪元素，并设置“clear: both;”属性来清除浮动，示例代码如下。

② 设置父容器“overflow”属性，为父容器设置“overflow: hidden;”或“overflow: auto;”也可以清除浮动。

③ 为浮动元素后的元素设置“clear”属性，直接在浮动元素后面的元素上设置“clear: left;”或“clear: right;”或“clear: both;”，这通常不是最推荐的做法，因为它依赖于文档结构。

💡 注意：

在现代布局技术中，虽然浮动在CSS布局中仍然有用，但现代CSS提供了更强大和灵活的布局工具，因此，在创建新的Web项目时，建议优先考虑使用Flexbox或Grid布局，而不是浮动。

3.2.6 定位

定位允许开发者精确控制元素在页面上的位置，通过“position”属性实现，有多个取值，每种取值对应不同的定位方式，结合“top”、“bottom”、“left”、“right”四个属性改变定位元素位置，以下是CSS布局中主要的定位方式及其特点。

static定位，元素的默认定位方式，遵循正常的文档流对象，不会受到“top”、“bottom”、“left”、“right”的影响。
fixed定位，元素的位置相对于浏览器窗口是固定位置，即使窗口滚动元素也不会移动，固定定位的元素位置与文档流无关，不占据空间，和其他元素重叠。
relative定位，相对定位元素的定位是相对其正常位置，移动相对定位元素，原本所占空间不会改变，经常被用来作为绝对定位元素的容器块。
adsolute定位，绝对定位的元素的位置是相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于“<html>”，绝对定位使元素脱离标准流，不占据空间，和其他元素重叠。
sticky定位，粘性定位是基于用户的滚动位置定位，依赖于用户的滚动，在“relative定位”和“fixed定位”之间切换，即在一个特定阈值前粘性定位元素的行为就像相对定位，跨越特定阈值之后的行为就像固定定位，固定在目标位置，这个特定阈值指的是“top”、“bottom”、“left”、“right”之一，只有指定了四个阈值其中之一，粘性定位才能生效。

🔔 注意：

Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 “-webkit- prefix”。

元素的定位与文档流无关，所以定位后的元素可以覆盖页面上的其他元素，“z-index”属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面），取值可以为正值或负值，具有更高堆叠顺序的元素在较低的堆叠顺序元素的前面，如果两个定位元素重叠，且没有指定“z-index”属性，最后定位在HTML代码中的元素将被显示在最前面。

3.2.7 多列布局

多列布局是一种将内容分割成多个列并排显示的方法，这种布局方式非常适合于报纸、杂志、博客文章等内容的展示，因为多列布局可以自动处理内容的流动和列之间的平衡，多列布局的基本属性如下。

column-count，指定列的数量，如果设置为“auto”，浏览器会根据容器的宽度和“column-width”的值自动决定列数。
column-width，指定每列的宽度，如果设置了“column-count”，则“column-width”是一个建议值，浏览器会尝试遵守，但如果与“column-count”冲突，可能调整列宽或列数保持内容的最佳展示。
column-gap，指定列与列之间的间隙。
column-rule，用于设置列之间的边框，实际上是“column-rule-width”属性、“column-rule-style”属性和“column-rule-color”属性的简写，例如，“column-rule: 1px solid #ccc; ”，为列与列之间的分隔线设置了一个1像素、实线样式、灰色的边框。
column-span，指定元素跨越多少列，通常用于标题或图片等元素，使它们不受多列布局的限制。
column-fill，指定如何填充列，取值有“auto”（默认值，列的高度由内容决定）、“balance”（所有列的高度相等，内容少的列会填充空白以匹配最高的列）。

🔔 注意：