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

傷城~ 2023-06-01 05:53 14阅读 0赞

## CSS列表属性 ##

#### list-style-type ####

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

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>disc</td> 
   <td>圆，默认值</td> 
  </tr> 
  <tr> 
   <td>circle</td> 
   <td>圆环</td> 
  </tr> 
  <tr> 
   <td>square</td> 
   <td>正方形</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>十进制（有序列表）</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>无标记</td> 
  </tr> 
 </tbody> 
</table>

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

#### list-style-position ####

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

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>outside</td> 
   <td>列表项的标记位于文本的左侧并放置在文本以外；默认值</td> 
  </tr> 
  <tr> 
   <td>inside</td> 
   <td>列表项目标记位于文本以内</td> 
  </tr> 
 </tbody> 
</table>

示例：

*  属性值为 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>
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]
 *  属性值为 inside  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

#### 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;` 设置表格的边框线是否合并

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>separate</td> 
   <td>边框会被分开，默认值</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>边框会合并为一个单一的边框</td> 
  </tr> 
 </tbody> 
</table>

示例：

边框不合并：

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>

![在这里插入图片描述][20191002210653985.png]  
边框合并：

border-collapse: collapse;

![在这里插入图片描述][201910022109525.png]

#### border-spacing ####

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/1e862209409f4d1f9e888674cdffce36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/64e9d6242b3e4c4c800e5de8fa42cc9d.png
[20191002210653985.png]: /images/20230601/ab5ec3f50ba5497fbbfe49a01b93eef7.png
[201910022109525.png]: /images/20230601/e9d3185044b84ca9a32c61ff74bd7d9b.png