我的一些CSS经验

我的一些经验总结

display

display 属性有许多不同的取值，以下是常用的 display 属性及其说明：

盒子模型的基本值

block: 将元素设置为块级元素，块级元素会占据一整行并从新行开始。常见的块级元素有<div> 和<h1> 等。

inline: 将元素设置为行内元素，行内元素只占据其内容所需的空间，不会导致换行。常见的行内元素有<span> 和 <a> 等。

inline-block: 将元素设置为行内块级元素，元素既可以和其他行内元素并排显示，也可以设置宽高。

Flexbox 和 Grid 布局

flex: 将元素设置为弹性容器（flex container），允许子元素（flex items）根据可用空间自动调整。

inline-flex: 类似于 flex，但容器为内联元素。

grid: 将元素设置为网格容器（grid container），允许子元素（grid items）在一个二维的网格中排列。

inline-grid: 类似于 grid，但容器为内联元素。

表格布局

table: 将元素设置为表格容器（table container），使其子元素表现为表格单元格的样式。

table-row: 将元素设置为表格行（table row）。

table-cell: 将元素设置为表格单元格（table cell）。

table-caption: 将元素设置为表格标题（table caption）。

其他值

none: 隐藏元素，元素在页面上不占据空间。

inherit: 继承父元素的 display 值。

initial: 设置属性为其默认值。

unset: 将属性重置为其自然值，即如果是继承属性则继承，否则设置为初始值。

使用示例

.container {
  display: flex; /* 创建弹性容器 */
}

.item {
  display: inline-block; /* 允许和其他元素并排显示，并能设置宽高 */
}

.table {
  display: table; /* 作为表格容器 */
}

.row {
  display: table-row; /* 作为表格行 */
}

.cell {
  display: table-cell; /* 作为表格单元格 */
}

.hidden {
  display: none; /* 隐藏元素 */
}

flex-direction

flex-direction 属性定义了弹性容器内的主轴方向，从而影响子元素的排列方式。它有四个可能的值：

row: 默认值，主轴为水平方向，从左到右排列。
row-reverse: 主轴为水平方向，从右到左排列。
column: 主轴为垂直方向，从上到下排列。
column-reverse: 主轴为垂直方向，从下到上排列。
示例：

.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

align-items

align-items 属性定义了在交叉轴（与主轴垂直的方向）上对齐弹性子元素的方式。可能的值包括：

flex-start: 子元素在交叉轴的起始位置对齐。
flex-end: 子元素在交叉轴的结束位置对齐。
center: 子元素在交叉轴上居中对齐。（如果左边高右边低，加上后 两个元素就平衡了）
baseline: 子元素的文本基线对齐。
stretch: 默认值，子元素在交叉轴上拉伸以填满容器。
示例：

.container {
  display: flex;
  align-items: center; /* 子元素在交叉轴上居中对齐 */
}

justify-content

justify-content 属性定义了在主轴上分配弹性子元素的空间。可以选择的值包括：

flex-start: 子元素从主轴的起始位置开始排列（默认值）。
flex-end: 子元素从主轴的结束位置开始排列。
center: 子元素在主轴上居中排列。
space-between: 在子元素之间平均分配空间，第一个和最后一个子元素与容器的边缘对齐。
space-around: 在子元素周围平均分配空间，子元素之间的空间相等，且与容器边缘之间的空间也相等。
space-evenly: 在子元素之间和容器边缘之间分配相等的空间。
示例：

.container {
  display: flex;
  justify-content: space-between; /* 在子元素之间平均分配空间 */
}