css相关知识整理

1.可以使用background-clip裁剪背景色，默认为content-box，还可设置padding-box，border-box例如可实现轮播时下面圆轮的点击选中效果。

2. clip属性可用于裁剪(元素的position必须是fixed或absolute)，最主要的是设置rect(top,right,bottom,left)，解释为以源图左上角为参考点，最终裁剪的元素：上边距离原图上面，右边距离原图左边，下边距离原图上边，左边距离原图左边的距离，示例如下图所示（图转自：https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/）

（可用于fixed定位元素的裁剪）

rect(30px 200px 200px 20px)：

3.当不设置元素的宽度或高度时，元素可以自动填充容器(效果即：width：100%)。

<div></div>

<p></p>

//或者如下
div{
    position:absolute;
    left:0
    right:0
}

4.想让块级元素右对齐时，不一定要浮动：对，可以设置保证margin-left:auto;

   absolute元素居中的流体布局方式：left，right，top，bottom均设置为0，然后margin：auto自动分配剩余空间

5.  两种情况跨度的行高都是100像素，原因是跨度前面有“空白节点”，.box的的高度是较大的行高的高度，可为跨度设置显示：块多行文本居中

6. div含img元素，下方还存有间隙原因，由于存在“空白节点”，下面的像素是由于font-size，line-height，vertical-align三者造成的。解决方法有：

1. img设置为display：block；
2. 设置line-height为0；
3. 设置font-size为0；
4. 更改基线对齐方式，如设置vertical-align：top

7. 内联absolute的元素（如img）居中：

不改变父元素定位的方法是父元素设置text-align：center，然后定位元素设置margin-left为自身宽度的一半（不兼容IE）

8. absolute和overflow的关系：

absolute的元素不一定会被overflow裁剪，当overflow的元素不是定位元素，同时overflow容器和absolute的元素之间也没有定位元素，overflow无法进行裁剪。overflow对absolute的元素设置无效。

9. text-indent相对于当前元素的包含块计算（百分比的时候需注意）；

10. @font-face是css3的新属性，可以设置字体信息为服务器上的相关字体，它会在需要时被自动下载到用户的计算机上。