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时则不受影响；

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

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

3. 对于使用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)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。