常用容易混淆的css集合

1.display:inline和display:inline-block

　　inline属性的特点是将一个块状或者内联元素强制更改为一个内联元素，元素不支持width和height属性，且只支持margin以及padding对于横向的也就是左右的能有作用 而对于垂直方向的对于父级高度的填充是无效的。

　　inline-block也是将元素改为内联元素，但是它最终还是一个块级元素支持width和height属性。且对于margin和padding也是inline产生的效果也是不同的

2.transform translate animate transition

　　transfrom 主要是形状的变化，例如缩放scale 旋转rotate 倾斜skew

　　translate 主要是2d位置的偏移2个参数x，y。

　　animate 主要是从flash更变过来的动画它和keyframe帧的概念共同使用。

　　transition 主要是过渡，从一种形态过渡到另外一种形态的表现。

3.position：fixed 和position：absolute 和position：relative；

　　fixed：首先它也是绝对定位。另外它主要是根据浏览器窗口进行定位。

　　absolute：绝对定位的一种。它的参照物是根据本身开始向上查找，找到第一个不是static定位的父级。

　　relative：相对定位，它是根据正常位置进行一个偏移定位。

4.visibility:hidden 和display：none 和 visible

　　2者展现出来的效果都是不可见，只是前者虽然不可见但是还是占用空间。而后者是不占用空间的。

　　display

　　　　隐藏必须使用none值，该隐藏不占位，页面源代码可见。

　　　　显示可使用空或block或inline，意思分别为：无此属性、显示视为div（有换行符）、显示视为span（无换行符）。

　　visibility：隐藏必须使用hidden值，该隐藏占位，页面源代码可见。

　　　　显示可使用空或visible，意思分别为：无此属性、显示。

　　visible（服务器控件）

　　　　隐藏必须使用false值与runat="server"，该隐藏不占位，页面源代码不可见。

　　　　显示可使用空或true，意思分别为：无此属性、可见。

5.　　

转载于:https://www.cnblogs.com/hfzps/p/5710685.html