媒体查询 @media

使用@media在屏幕变化时调整css

1
2
3
@media only screen and (max-width: 768px) {
    ...
}

css写法

可能需要增加很多样式，要写很多很长的选择器名字
因此需要将每一个部分的写一块，不同部分之间多换几行
在每一个选择器名字旁边写上注释解释，便于查找

display: table

页码组件使用了display: table，没见过

使用 display: table; 会使得元素表现得像HTML中的<table>元素，
而其子元素（类似于 <tr> 和 <td>）可以按照表格的布局规则进行排列。

以下是 display: table; 一些关键的特性：

  • 块级表格：元素会成为块级元素，并且可以拥有宽度和高度。
  • 内联行为：默认情况下，表格的子元素（<tr>）会表现得像内联元素。
  • 单元格合并：类似于HTML表格，可以使用 colspan 和 rowspan 属性来合并单元格。
  • 表格布局：表格的布局不会受到文档流的影响，这意味着它不会影响周围元素的布局。

块元素能让页码组件变单独一行，子元素内联能让每个页码左右相连，挺适合页码组件的