CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form

/* 使用display: table-row和display: table-cell来模拟表格的行和单元格特性 */
.container {
  display: table; /* 将容器设置为表格 */
  width: 100%; /* 设置宽度 */
}
 
.row {
  display: table-row; /* 设置为表格行 */
}
 
.cell {
  display: table-cell; /* 设置为表格单元格 */
  padding: 10px; /* 单元格内边距 */
  border: 1px solid #ddd; /* 单元格边框 */
  text-align: center; /* 单元格内文本居中 */
  vertical-align: middle; /* 单元格内文本垂直居中 */
}
 
/* 使用table-cell和vertical-align: top实现多行文本顶部对齐 */
.vertical-align-top {
  vertical-align: top;
}
 
/* 使用table-cell和vertical-align: bottom实现多行文本底部对齐 */
.vertical-align-bottom {
  vertical-align: bottom;
}

这段CSS代码展示了如何使用display属性的table-row和table-cell值来模拟表格行和单元格的布局特性，并且演示了如何利用这些特性对块级元素内的多行文本实现顶部对齐和底部对齐的布局。这种技术可以用来创建复杂的布局，并且在响应式设计中有很大的应用价值。