前端开发学习笔记–CSS 表格与列表

发布于 2018-04-20  187 次阅读


一、css 表格

表格样式有以下几点:

1.caption-side 表设置表格的标题位置,其值可以是 top(在上方,默认值)和 bottom(在下方)

例:

table {
       caption-side: bottom;
}
//设置表格的标题在表格的下方

2.border-collapse 表设置单元格边框的样式,即是否合并,其值可以是 separate(单元格边框独立,默认值)和 collapse(单元格相邻边框被合并)

例:

table {
       border-collapse: collapse;
}
//设置表格单元格相邻的边框合并

3.border-spacing 设置表格单元格的间距,其值为长度值(px)

例:

table {
       border-collapse:separate;
       border-spacing:20px;
}
//设置单元格间距为 20 像素,需要在 border-collapse:separate 的状态下使用,即单元格在合并状态下不能使用

4.table-layout 可设置表格内容过长时的状态,其值其值可以是 auto(在上方,内容过长时,拉伸整个单元格,默认值)和 fixed(内容过长时,不拉伸整个单元)

例:

table {
       table-layout: fixed;
}
//内容过长后,不会拉伸整个单元格。

5.empty-cells 可设置表格的边框是否隐藏,其值可以是 show(显示边框,默认值)和 hide(不显示边框)

例:

table {
         empty-cells: hide;
}
//单元格内容为空是隐藏边框。

6.vertical-align 表设置表格的垂直对齐,如:baseline(内容对象与基线对齐);top(内容对象与顶端对齐);middle(内容对象与中部对齐);bottom(内容对象与底部对齐)

例:

table tr td {
vertical-align: baseline;
}
//表将单元格的内容对象与基线对齐

ps:vertical-align 值 sub 可设置垂直对齐文本的下标,super 设置垂直对齐文本的上标

 

二、css 列表

1.list-style-type 表设置列表前缀样式,如:disc(实心圆);circle(空心圆);decimal(阿拉伯数字);lower-alpha(小写英文字母);upper-roman(大写英文字母)等

例:

ul {
    list-style-type: disc;
}
//设置列表前缀为实心圆

2.list-type-image 表可以使用图片作为列表的前缀样式,可用 url 引用图片

例:

ul {
    list-style-image: url(img.png);
}
//使用图片作为前缀的标记。

3.list-type-position 设置标记为与内容框所在的对应样式,其值可以是 outside(标记位于内容框外部,默认值)和 inside(标记位于内容框内部)

例:

ul {
    width: 100px;
    list-style-position: inside;
}
//标记位于内容框内部。

4.list-style 表对列表框设置的简写形式

例:

ul {
    list-style: lower-alpha inside url(img.png);
}
//简写顺序:list-style-type、list-type-position、list-type-image