CSS数据组合方式总结

1. 表格

表格可以非常快速的部署数据。表格不能设置外边距。

1.1表格绘制

• table标签绘制表格

  <table border="1">
      <caption>This is a caption</caption>
      <thead>
      <tr>
          <td>编号</td>
          <td>标题</td>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>1</td>
          <td>chen</td>
      </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>2</td>
              <td>chen_cheng</td>
          </tr>
      </tfoot>
  </table>
  

• css样式绘制表格

  改变元素的内部显示类型：display:table

  These elements behave like HTML

  element. It defines a block-level box.

  可以看出将父容器内部显示改为table，则其子元素的元素也可以通过不同的table类型来进行格式化设置

  对应规则如下：

  样式规则	说明
  table	对应 table
  table-caption	对应 caption
  table-row	对表 tr
  table-row-group	对应 tbody
  table-cell	对应td
  table-header-group	对应 thead
  table-footer-group	对应 tfoot

html结构代码

<article class="table">
    <nav>奥里给</nav>
    <section>
        <ul>
            <li>序号</li>
            <li>标题</li>
        </ul>
    </section>
    <section>
        <ul>
            <li>1</li>
            <li>今天也要加油呀</li>
        </ul>
    </section>
    <section>
        <ul>
            <li>2</li>
            <li>美好的一天又开始了</li>
        </ul>
    </section>
</article>

css样式代码

article.table {
    /*table*/
    display: table;
    border: 1px solid black;
}

article.table > nav {
    /*thead*/
    display: table-caption;
    text-align: center;
    padding: 10px;
}

article.table section:first-of-type {
    /*thead*/
    display: table-header-group;
    background: linear-gradient(90deg,#cfd8c8,#c3c4c5,#aaaaaa);
}

article.table section:nth-of-type(2) {
    /*tbody*/
    display: table-row-group;
}

article.table section:nth-of-type(3) {
    /* tfoot*/
    display: table-footer-group;
}

article.table section ul {
    /*tr*/
    display: table-row;
    padding: 20px;
}

article.table section ul li {
    /*td*/
    display: table-cell;
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}

效果

1.2 表格标题

表格标题可以通过caption标签进行设置，通过也可以css属性值display:table-caption进行设置。

可以对表格标题的位置进行变化：

caption-side: top/bottom；// 在顶部/底部

注意的是：caption-side控制标题显示位置是相对于table中设置的writing-mode

一般情况下，writing-mode:horizontal-tb（从上往下），则caption:top，则为上面

如果writing-mode:vertical-lr（从左往右），那么caption:bottom，则表现为从左往右的右边

1.3 表格边框合并

默认表格单元格的边框间是有间距的，因此可以通过border-collapse来进行设置适合进行表格单元格边框的合并

The border-collapse CSS property sets whether cells inside a table have shared or separate borders.

该属性在父元素（table）处设置

属性值

属性值	说明
separate	Adjacent cells have distinct borders（相邻的单元格之间有一定距离的边框）
collapse	Adjacent cells have shared borders(相邻的单元格之间共享边框)

1.4 边框间距

The border-spacing CSS property sets the distance between the borders of adjacent table cells. This property applies only when border-collapse is separate.

该属性用于设置相邻单元格之间的距离。且当前只有border-collapse的属性为separate的时候才有效。（原因：一个单元格的组成也包括边框、内边距等，如果相邻之间的单元格的边框重合了，如果在对其进行设置单元格间距，会造成边框分离，与设置矛盾。）

该属性在父元素（table）处设置

属性值：

border-spacing: horizontal vertical;

或者简写

border-spacing: (px/em)

如果只有一个值，则表示horizontal和vertical同时进行设置

且边框间距的设置也会发生类似于外边距重叠的现象。

1.5 单元格隐藏

The empty-cells CSS property sets whether borders and backgrounds appear around border cells that have no visible content.

该属性在父元素（table）处设置

当单元格没有内容的时候，想要单元格隐藏起来，但是其位置是存在的，因此可以使用empty-cells:hide进行隐藏操作。当使用这个属性的时候，该单元格设置的边框，背景都会随着单元格的隐藏而隐藏。

注意：使用该属性，需要当border-collapse:separate的时候方可起作用。

empty: hide; // 隐藏空的单元格

empty-cells: show; // 显示空的单元格

2. 列表

自定义列表

dl > dt > dd

其中dl 类似于ul

dt类似于dd的说明标题

dd类似于单元格

无序列表

ul > li

有序列表

ol > li

ul 和ol都有一个默认的padding-left。

有序与无序的区别在于：默认可表示的列表符号不一样，有序列表默认采取有顺序的符号（1，2，3…）表示，而无序列表则采取没有顺序的符号表示(* …)，但是两者之间的符号是可以相互转换的，因此在一定程度上是没有区别的。

2.1 列表符号

无序列表和有序列表都可以通过list-style-type改变列表符号。

该属性在ul/ol上定义，li标签会继承显示。也可以在li标签上单独定义，修改其中一个列表符号也可以。

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

注：一般情况下，会使用ul来布局数据，但是不想要其的列表符号，所以经常使用list-style-type取消列表符号。

除了内置的列表符号外，还可以自定义列表符号，通过list-style-image

list-style-image: url("../images/2.PNG"); // 通过图片设定 但是如果图片很大，则显示也很大，除非使用小图片，适合的尺寸
list-style-image: linear-gradient(90deg,red 50%,50%,green); // 通过颜色设定
list-style-image: none;// 也可以不设定颜色

除了此外还可以通过设置背景的方式，设定列表符号。

例如：

ul > li {
    list-style-type: none;
    background-image: url("../images/2.PNG");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 0px 5px;
    text-indent: 1em;
    /*复合写法*/
    /*background: url("../images/2.PNG") no-repeat 0px 5px/10px 10px;*/
}

效果

2.2 列表符号位置

伪类::marker用于对列表符号进行再定义，但是必须在list-style-type不为none的时候才起作用，因为该属性直对内置列表符号有效

ul li::marker {
    color: green;
    font-size: 1.5em;
}

效果:

list-type-position用于sets the position of the ::marker relative to a list item.

设置列表符号相对于列表内容的位置

一般情况下，列表符号显示在列表内容的外面

但是可以通过list-type-position:inside进行设置，使其在内容里面进行显示

    list-style-position: inside;

2.3 列表样式复合写法

通过list-style可以一次性设置list-style-type list-style-image list-style-position，不考虑顺序