CSS笔记

###CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

• 单行溢出实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
```

• 显示效果
  

  ---

• 多行溢出实现方法：

display: -webkit-box;
-webkit-box-orient: vertical;
/设定显示的行数/
-webkit-line-clamp: 3;
overflow: hidden;
```

• 注意问题
  需要给容器设置高度及行高，如需显示3行则设置容器的高度为行高的3倍，否则在页面大小调整
  的时候会出现省略号的下一行又出现不完整的文字。

• 显示效果
  

  ---

块级元素宽度、高度继承

对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。

1. 父元素有宽高，子元素若不设定宽高会继承，继承宽的100%，高度靠自己内容撑开，如果父元素
   有padding和border，只会继承content部分的宽度。

2. 子元素没有设置宽度值，设置padding时宽度不受影响，设置了宽度100%后，自身的宽度等于继
   承父元素的宽加上设置padding的宽，box-sizing值为border-box时则不受影响；

3. margin/padding/border如果设置了50%，是参考什么计算这个50%？其实也是以父元素的width为参考来计算；

4. 高度继承父元素时是父元素的整体高度，包含padding、border的值（不建议使用高度100%继承）；

5. 对于使用position:relative的子类元素而言，width:100%也始终是基于基父级元素而并不会基于其上层元素中的relative。
   对于绝对定位的子无素，要是其外层的所有元素中都没有用position:relative，则width:100%是基于body，否则就是离基最近的一个position:relative的元素。
   而对于position:fixed的元素，其一直是基于body,所以其宽度100%就是基于body。

---

CSS3 calc()计算属性

width: calc(100% - (10px + 5px) * 2);

使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。

colgroup标签使用

colgroup标签可设置table中某一列的样式，如果只需要统一td的宽度，在表格的第一行的td设置宽度即可，其它行自然跟随这个设定值，如需设置样式、字体这些colgroup标签就大显身手了，以前不知道这个标签就只能js遍历设置了。

jQuery的宽高获取

$(selector).height() content 高度
$(selector).innerHeight() content + padding 高度
$(selector).outerHeight() content + padding + border 高度
$(selector).outerHeight(true) content + padding + border+margin 高度