CSS-列表样式属性的用法，表格样式属性border-collapse的使用

CSS列表属性

list-style-type

list-style-type: disc; 用于设置列表项的标记

属性值	说明
disc	圆，默认值
circle	圆环
square	正方形
decimal	十进制（有序列表）
none	无标记

对应的属性值有很多但是不常用；在实际开发中，多数情况是祛除列表项的标记

list-style-position

list-style-position: outside; 设置列表项标记相对于列表项内容的位置

属性值	说明
outside	列表项的标记位于文本的左侧并放置在文本以外；默认值
inside	列表项目标记位于文本以内

示例：

• 属性值为 outside

  ul {
    border: 1px solid gray;
  }
  ul li {
    list-style-position: outside;
    border: 1px dashed red;
  }
  

  <ul>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
    <li>li 列表</li>
  </ul>
  

  
• 属性值为 inside
  

list-style-image

list-style-image: url(./images/list.gif)将图片设置为列表项的标记；属性值为 url()（括号内为图片路径） 或 none

列表属性也可以统一设置

语法：

list-style: list-style-type list-style-position list-style-image;

示例：

list-style: disc outside url(./images/list.gif);

当图片不存在时会自动使用设置的 list-style-type 属性

CSS 表格属性

border-collapse

border-collapse: collapse; 设置表格的边框线是否合并

属性值	说明
separate	边框会被分开，默认值
collapse	边框会合并为一个单一的边框

示例：

边框不合并：

table {
  border: 1px solid gray;
  border-collapse: separate;
}

table tr td {
  border: 1px dashed red;
}

<table>
  <tr>
    <td>表格单元格</td>
    <td>表格单元格</td>
    <td>表格单元格</td>
  </tr>
  <tr>
    <td>表格单元格</td>
    <td>表格单元格</td>
    <td>表格单元格</td>
  </tr>
</table>

边框合并：

border-collapse: collapse;

border-spacing

border-spacing: 0 0; 设置相邻单元格的边框间的距离（仅用于“边框分离”模式）；属性值可设置 1 到 2 个；属性值可以是像素（xp）、厘米（cm）等单位，不允许使用负值

如果定义一个属性值，则设置的时水平和垂直间距；如果定义两个属性值，则第一个设置水平间距，第二个设置垂直间距