CSS一些小总结——个人向

这篇文章总结的是自己觉得必须记住的一些CSS小知识和CSS小技巧等。

1.字体加粗

其实我们用css的font-weight为字体加粗已经很常见了，但是还是有一些我们在用时就很迷惑但却没去搞懂的知识点

注意：使用b元素，实际情况下使用字体的一种加粗变形来显示b元素的字体。因此，如果使用Times字体显示一个段落，而且其中一部分是粗体，那么实际上当前使用了同一字体的两种变形：Times和TimesBold。常规的文本使用Times显示，加粗的问题使用TimesBold显示。

如果一个字体采用了一个数值梯度，它内置了9个加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体级别

但是如果给定的字体系列中定义的加粗度少于9种，用户代理还必须多做一些工作

•如果未指定值500的加粗度，其字体加粗与400的相应加粗相同。

•如果未指定300的加粗度，则为之指定下一个比400更细的变形。如果没有可用的较细变形，为300指定的变形等同于400的相应变形。在这种情况下，通常是Normal或Medium。这种方法同样适用于200和100。

•如果未指定600的加粗度，会为之指定下一个比400更粗的变形。如果没有可用的较粗变形，为600指定的变形则等同于500的相应变形。这种方法同样适用于700、800和900

因此不知道哪个数值梯度才有相应的字体变形，因此我更喜欢用bolder和lighter。

2.轮廓 

CSS2还引入了用户界面样式中的最后一个主要方面：轮廓。轮廓有点类似于边框，不过二者有两个重要的区别。首先，轮廓不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响到文档流，即不会导致文档的重新显示。其次，轮廓可能不是矩形，是梯形。

不过和边框的用法是一样的，只不过只能为一个outline-style值指定一个关键字，而边框最多4个关键字。而且没有outline-top或outline-right之类的属性

另外outline是一个简写属性，但它不支持outline-offset属性，得另外写，它规定边框边缘的距离

兼容性：IE所有版本不支持

参考地址：12条鲜有人知的css事实

3.table-layout属性

定义和用法

tableLayout 属性用来显示表格单元格、行、列的算法规则。

固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

说明

该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。

4.行内替换元素影响行框的高度，但不影响line-height

5.文本溢出

①单行文本溢出

.oneline {
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: hidden;
}

②多行文本溢出

.twoline {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //设置行数的关键
}