可以改变页面布局的属性有哪些？

改变页面布局的 CSS 属性有很多，可以大致分为以下几类：

1. 布局模型相关：

• display: 这是最基本的布局属性，它决定了元素如何被显示和布局。常用的值包括：

  • block：块级元素，独占一行，可以设置宽度和高度。
  • inline：内联元素，不换行，宽度和高度由内容决定。
  • inline-block：结合了 inline 和 block 的特性，既可以设置宽度和高度，又不换行。
  • flex：弹性布局，用于创建灵活的、响应式的布局。
  • grid：网格布局，用于创建二维的、类似表格的布局。
  • none：隐藏元素。

• position: 决定元素的定位方式。

  • static：默认值，元素按照正常的文档流排列。
  • relative：相对定位，相对于元素自身原本的位置进行偏移。
  • absolute：绝对定位，相对于最近的非 static 定位的祖先元素进行偏移。
  • fixed：固定定位，相对于浏览器窗口进行偏移。
  • sticky：粘性定位，在屏幕范围内滚动到特定位置时，元素会固定在该位置。

• float: 使元素浮动，环绕其他内容。

  • left：左浮动。
  • right：右浮动。
  • none：不浮动。

• clear: 清除浮动。

  • left：清除左浮动。
  • right：清除右浮动。
  • both：清除左右浮动。
  • none：不清除浮动。

2. 尺寸和间距相关：

• width: 元素的宽度。
• height: 元素的高度。
• margin: 元素的外边距。
• padding: 元素的内边距。
• border: 元素的边框。

3. Flexbox 布局相关 (当 display: flex 时)：

• flex-direction: 主轴方向。
• flex-wrap: 是否换行。
• justify-content: 主轴上的对齐方式。
• align-items: 交叉轴上的对齐方式。
• align-content: 多根轴线的对齐方式。
• flex-grow, flex-shrink, flex-basis: 定义 flex 项目的尺寸和如何分配空间.

4. Grid 布局相关 (当 display: grid 时)：

• grid-template-columns: 定义列的宽度。
• grid-template-rows: 定义行的高度。
• grid-gap: 网格项之间的间距。
• grid-template-areas: 使用名称定义网格区域。
• justify-items, align-items, place-items: 控制网格项在单元格内的对齐方式.
• justify-content, align-content, place-content: 控制整个内容在网格容器内的对齐方式.

5. 其他:

• box-sizing: 决定 width 和 height 是否包含 padding 和 border。
• visibility: 控制元素的可见性。
• overflow: 处理内容溢出容器的情况。
• columns: 创建多列布局。
• transform: 旋转，缩放，移动或倾斜元素.

这只是一些常用的 CSS 属性，还有很多其他的属性可以影响页面布局。选择合适的属性取决于具体的布局需求。 建议结合查阅 MDN Web Docs 等权威文档，以便更深入地理解和运用这些属性。