CSS 常用功能总结

位置

• 左右居中

1. margin 法
2. text-align 法
3. 50% 法

[[[pen slug-hash='BKXmyO' height='300' embed-version='2']]]

• 上下居中

1. margin 法
2. line-height 法
3. vertical-align 法
4. 50% 法
   5）表格 法

按钮样式

• 3D按键 (principle: Use element a, when a:active change box-shadow.)

[[[pen slug-hash='OXJaOQ' height='300' embed-version='2']]]

背景图片元素

• 固定产品专用

完美表格养成记

1）基本功能，只需要三行css：上下居中，每列宽度一致

table {
  table-layout: fixed; /* 固定表格布局算法，好处1，可自由控制列宽，好处2，页面下载过程中表格不需要频繁重绘 */
  border-collapse: collapse; /* 边框合并 */
  width: 100%; /* 必须设置一个值！ */
}

2）左右居中

table {
  text-align: center;
}

3）精确控制列宽

/* 情况1，如果没有th的话，设置td即可 */
td {
  width: 20%; // 假如共有四列，我们设置1、3、4为20%，2为40%
  
  td:nth-of-type(2) {
    width: 40%;
  }  
}
/* 情况2，如果有th的话，直接设置 th 即可，td会按照第一行的 th 的宽度来布局 */
th {
  width: 20%; // 假如共有四列，我们设置1、3、4为20%，2为40%
  
  th:nth-of-type(2) {
    width: 40%;
  }  
}

4）溢出变成省略号

td, td p { /* 这里考虑到有时候td中会增加其他元素，类似于p，直接一并写即可 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5）完整demo

[[[pen slug-hash='ZOGOxV' height='300' embed-version='2']]]

6）进阶：使用前端模板生成 table

<!-- here we use jhtmls，@github https://github.com/zswang/jhtmls -->
<script>
var data = [
[
'1st1','1st2'
],[
'2nd1','2nd2'
],[
'row3column1','row3column2'
]
];
<table>
<tr><th>列1</th><th>列2</th></tr>
data.forEach(function(item) {
  <tr>
  item.forEach(function(item) {
    <td>#{item}</td>
  })
  </tr>
})
</table>
</script>

7）进阶：table底部增加一行特殊的‘加载更多’行，点击 加载更多/隐藏 改变table部分行数的隐藏或者显示
方法1 改变table的类名 来通过css控制内部的tr的显示隐藏
方法2 直接控制tr行数的显示隐藏，