8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

简单谈下现代一像素表格的实现

一、基础铺垫：

① table元素的部分属性(针对于本话题)：1

2

bgcolor="#ffffff" bordercolordark="" bordercolorlight="" >

border 表格内单元格边框的宽度 [STF][^hello]

[^hello]:注：DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.cellspacing 单元格与单元格之间的 间距 [STF]

cellpadding 单元格的内边距 [STF]

width 表格的宽度 [STF]

bordercolor、bgcolor [TF]但如大家熟知，给border定义为border=”1”，表现缺不符预期，是比一像素粗的边框。

综上这些在元素内用属性定义表现的方式，已被逐渐不推荐——弃用。真正的表现性的东西，应该由css来完成。

但目前可行的，相对科学的、实惠的实现方式究竟如何呢？

② table方面css部分属性(针对于本话题)：table{border-collapse:collapse;border-spacing:0;}

td{padding:0;} 相当于cellpadding

border-collapse 定义相邻单元格边框是否合并

border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别，ie6/7用expression弥补，

见下，管它性能不性能的呢，谁让他用破ie呢)

二、方案(从上到下推荐度逐渐降低)：

① css法(table元素上的一些标签属性不用写)1

2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}

td{border:1px solid

② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)1

2table{ background:#000;border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');}

td{background:#fff;}

③ css边框拼补法(table元素上的一些标签属性不用写)1

2

3

4

5table{

border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');

border-right:1px solid #000;border-bottom:1px solid #000;

}

td{border-left:1px solid #000;border-top:1px solid #000;}

④ css和标签属性结合法1

2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}

⑤ 标签法(原理同②)1

2

3

4

5

6

7

8

9

或

三：注意点

经测试对于单元格边距，单元格间距，单元格边框这三项，如果在元素标签的属性 和 css中的属性 同时定义的情况下：(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是：单元格边距、单元格间距 这两项。也就是说比如以下这种情况下，1

2

3table{border-spacing:0;jerry:expression(cellSpacing='0');}

table td{padding:0;}

实际表现以css定义为准。

css的定义与标签属性的定义累加(如果有相邻合并，则只累加不相邻的单元格边框)的是：单元格边框宽度。也就是说比如以下这种情况下，1

2table td{border:3px solid #000;}

则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义，则只累加不相邻的单元格边框。

附html代码，可以用不同浏览器，及IE的各个版本去测试，及其各种兼容模式，全部没问题。1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

无标题文档

*{margin:0;padding:0;}

body{margin:100px;}

.table{

border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');

table-layout:fixed;word-break:break-all;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;

}

.t1{}

.t1 td{border:1px solid #000;}

.t2{border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');background:#000;}

.t2 td{background:#fff;}

.t3{border-right:1px solid #000;border-bottom:1px solid #000;}

.t3 td{border-left:1px solid #000;border-top:1px solid #000;}

.t4{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档

无标题文档	无标题文档;	无标题文档;
无标题文档	无标题文档	无标题文档