CSS篇四：常见布局汇总

先语：层模型属性position

简述：这个属性比较特殊，是元素定位的关键属性，决定了元素如何在页面上进行布局。

属性值：

• ‌static‌：默认值，元素按照正常文档流进行布局。
• ‌relative‌：相对定位，元素相对于其正常位置进行偏移，但仍保留在文档流中。
• ‌absolute‌：绝对定位，元素脱离文档流，相对于其最近的已定位父元素进行定位。
• ‌fixed‌：固定定位，元素脱离文档流，相对于浏览器窗口进行定位。

扩展搭配：position属性在一些场景下需要搭配z-index属性来使用。

z-index的作用：控制元素在页面上的层叠顺序（注意：仅当元素的position属性不为static时，z-index才会生效），它接收的是一个正整数，表示层级，层级高的元素会覆盖层级低的元素。

说到层级，肯定需要扩展一下position属性中各属性值的层级关系。

直述：static < relative/absolute/fixed/sticky（后者层级由z-index决定，值越大层级越高，没定义z-index则按照文档流依照顺序来）

• ‌静态定位（static）‌：默认层级，不受z-index影响，层级最低。
• ‌相对定位（relative）‌：可通过z-index提升层级，相对于原位置定位，不脱离文档流。
• ‌绝对定位（absolute）‌：可通过z-index提升层级，相对于最近的非static定位祖先元素定位，脱离文档流。
• ‌固定定位（fixed）‌：可通过z-index提升层级，相对于浏览器窗口定位，脱离文档流。
• ‌粘性定位（sticky）‌：层级行为类似relative和fixed的结合，根据滚动位置变化。

粘性定位（sticky）这个属性值前面没有说，是因为它具有一定的特殊性，是一个特定的、较新的定位方式，有其独特的使用场景和行为表现。

使用该属性值需要满足几个条件：

①、父元素不能有overflow或overflow属性，必须指定top、bottom、left、right四个值之一。

②、父元素的高度不能低于sticky元素的高度。

（出场率一般，需要结合对应场景使用）

一、流式布局

简述：这个没啥说的，按照文档流依次加载构建元素（如读作文，一行接一行自然读下去），没太多鸟用，简单明了，只作为底盘（没添加其他的定位布局情况下遵循的布局方式）。

（适用于简单页面结构（做初级练习这种），不能精确控制复杂布局的元素位置和大小（在商业化项目中不适用），也不用管它，了解即可）

二、浮动布局

简述：通过float属性将元素/标签浮动到页面左侧或右侧，实现多栏布局。（具有一定的应用场景）

优缺点：优→实现导航菜单或多列新闻布局；缺→需要清除浮动，不够灵活（还可能造成浮动塌陷问题）。‌

核心属性：float

1. ‌left‌：元素向左浮动。

2. ‌right‌：元素向右浮动。

3. ‌none‌：默认值。元素不浮动，并会显示在其在文档流中的原始位置。

4. ‌inherit‌：元素从父元素继承float属性的值。

清除浮动：

可以设置clear属性清除浮动。

clear属性用于控制元素的哪一侧不应该紧挨着浮动元素，其属性值包括：

• ‌left‌：元素的左侧不应该紧挨着左浮动的元素。
• ‌right‌：元素的右侧不应该紧挨着右浮动的元素。
• ‌both‌：元素的两侧都不应该紧挨着浮动元素。
• ‌none‌：默认值。元素可以紧挨着浮动元素。
• ‌inherit‌：元素从父元素继承clear属性的值。

浮动塌陷问题（面试经常问到）：

1、首先明白浮动塌陷是什么？

答：正常在文档流中（流式布局），父元素的高度是默认被子元素撑开的，子元素多高，父元素就有多高，但是当设置了浮动后，子元素完全脱离文档流，不再占据原本的位置，就导致父元素高度没有子元素撑起，发生高度塌陷。

2、怎么解决？

答：三种方向！

• ‌使用额外标签‌：

  • 在浮动元素后添加一个空标签，并设置clear: both属性。这种方法简单，但会增加HTML结构的复杂性。‌

• ‌设置父元素属性‌：

  • 给父元素设置overflow: hidden属性，可以有效防止子元素溢出并清除浮动。‌
  • 另一种方法是设置父元素display: inline-block，但可能导致父元素宽度丢失。‌

• ‌使用伪元素‌：

  • 在父元素的最后添加伪元素:after，并设置display: block; clear: both; content: ""; visibility: hidden; height: 0，以清理所有浮动的尾巴。‌

三、弹性布局 

简述：使用flex容器和flex项目实现灵活的布局方式，适用于各种屏幕尺寸和设备。（使用度很高）

 优缺点：优→可以轻松实现复杂的布局；缺→需要嵌套多个flex容器。

核心属性：flex

注意点：使用弹性布局需要在目标元素上添加（dispaly:flex）这一属性，且该属性只影响元素本身和其直系子元素，不会更加深入的影响后代元素！

‌容器属性‌：

‌flex-direction‌：决定主轴的方向，即项目的排列方向。

属性值包括row（默认值，水平方向，起点在左端）、row-reverse（水平方向，起点在右端）、column（垂直方向，起点在上沿）、column-reverse（垂直方向，起点在下沿）。

‌flex-wrap‌：定义如果一条轴线排不下，如何换行。

属性值包括nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

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

‌justify-content‌：控制项目在主轴上的对齐方式。

属性值包括flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）。

‌align-items‌：控制项目在交叉轴上如何对齐。

属性值包括flex-start、flex-end、center、baseline（项目的第一行文字的基线对齐）、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。

‌align-content‌：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性值包括flex-start、flex-end、center、space-between、space-around、stretch（默认值，轴线占满整个交叉轴）。

‌子元素属性‌：

‌flex-grow‌：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

属性值可以是一个非负数字，表示放大的比例。

‌flex-shrink‌：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

属性值可以是一个非负数字，表示缩小的比例。

‌flex-basis‌：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以设为auto（默认值），表示项目的本来大小，或者设为具体的长度值。

‌flex‌：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

‌align-self‌：允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。属性值还包括flex-start、flex-end、center、baseline、stretch。

‌order‌：定义项目的排列顺序。数值越小，排列越靠前，默认为0。属性值可以是一个整数。

四、网格布局

简述：通过定义网格容器和网格项的属性，实现二维网格布局。（具有一定的应用场景）

优缺点：优→提供了更强大的布局功能，如自适应列宽和自动调整布局；缺→较旧浏览器支持不完善。

如何定义：通过设置CSS属性display: grid或display: inline-grid来实现。

属性使用：

‌grid-template-columns和grid-template-rows‌：定义网格的列和行的宽度和高度，属性值可以是长度单位、百分比、fr单位或auto等‌。

‌gap‌：定义网格线之间的间隙，属性值可以是长度单位‌。

‌grid-template-areas‌：定义网格区域，属性值是一个字符串，用于指定网格区域的名称‌。

项目属性用于控制网格项的位置和对齐，重要的有：

‌grid-column-start、grid-column-end、grid-row-start、grid-row-end‌：定义网格项的开始和结束位置，属性值可以是网格线的编号或网格区域的名称‌。

‌justify-self、align-self‌：定义网格项在单元格内的对齐方式，属性值可以是start、end、center或stretch等‌。

使用时需要注意：

‌容器与项目‌：需明确网格容器（display: grid/inline-grid）和网格项目，容器直接影响其子元素（网格项目）。‌

‌行列设置‌：通过属性设置网格的行数和列数，以及项目的具体位置和对齐方式。‌

‌响应式设计‌：网格布局应适应不同屏幕尺寸和设备，考虑使用可变的行列数或栅格系统。‌

‌单位选择‌：在设计网格时，选择合适的单位（如使用8作为网格的最小单位）以保持页面清晰和易于管理。‌

‌兼容性与回退方案‌：确保网格布局在不同浏览器上的兼容性，并为不支持网格布局的浏览器提供回退方案。‌

布局结束语

简述：布局的坑挺多的，所以需要深入的解析，大多数前端写项目慢就是因为对布局的了解太浅，而且还容易出现各种各样的问题，导致浪费时间的来回调试（建议小白还是找找视频教学自学一下，毕竟文本知识只适合拿来记忆一下）。