css面试八股文

CSS八股文是指CSS布局的常用技术和方法。以下是一些常用的CSS布局技术及其简单示例：

1. 浮动布局（Float）：

.float-layout {
  float: left; /* 或者使用 right */
  width: 50%; /* 可以是具体的宽度值或百分比 */
}

2. 定位布局（Position）：

.position-layout {
  position: relative; /* 或 absolute, fixed */
  left: 0; /* 水平位置 */
  top: 0; /* 垂直位置 */
  width: 300px; /* 宽度 */
}

3. Flexbox布局：

.flex-container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 或 column, row-reverse, column-reverse */
}
 
.flex-item {
  flex: 1; /* 可以是具体的数值 */
}

4. Grid布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三个等宽的列 */
}
 
.grid-item {
  grid-column: 1 / 3; /* 占据第一列到第二列的空间 */
}

5. 表格布局（Table）：

.table-layout {
  display: table;
  width: 100%;
}
 
.table-row {
  display: table-row;
}
 
.table-cell {
  display: table-cell;
  width: 100px; /* 可以是具体的宽度值 */
}

以上代码仅展示了CSS布局技术的简单应用，实际应用中可能需要更复杂的样式和逻辑以达到所需的设计效果。