1.什么是OPACITY？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

2 什么是DISPLAY：NONE

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

3.什么是VISIBLITY

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

4.RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

5.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

6.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

7.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

8 对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

9　css【disiplay】元素之inline

　　如果该元素设置此元素，那么此元素为内联/行内元素，其主要特点为不独占一行，宽、高、行高不可以进行设置。可以设置padding和margin-right/left不可以设置margin-top/bottom值。ps:替换元素可以设置宽高，比如img\input等。

　　css【disiplay】元素之inline-block

　　如果该元素设置此元素，那么元素拥有block可以设置宽、高、行高的特性。怎么去除该元素带来的间距问题，

一、是移除代码之间的空格

二、是使用margin-right负值

三、去除闭合标签，四、设置父级字体大小为0，

五、设置父级letter-spacing为负值。六、设置父级word-spacing为负值。

　　css【disiplay】元素之block

　　如果设置该元素，可以设置该元素宽、高、行高、margin\padding值，并且另起一行。宽度缺省的话，是该容器父级的100%。

　　css【disiplay】元素之table

　　如果设置属性，那么元素则以表格形式出现，有换行符

　　css【disiplay】元素之inline-table

　　如果设置该属性，那么该元素则内联表格形式出现，没有换行符。

　　css【disiplay】元素之table-caption

　　如果设置该属性，此元素会作为一个表格标题显示

　　css【disiplay】元素之table-cell

　　如果设置该属性， 此元素会作为一个表格单元格

　　css【disiplay】元素之table-row

　　如果设置该属性，此元素会作为一个表格行显示

　　css【disiplay】元素之table-row-group

　　如果设置该属性，此元素会作为一个表格标题显示

　　css【disiplay】元素之table-column

　　如果设置该属性， 此元素会作为一个或多个行的分组来显示(类似 )

　　css【disiplay】元素之table-column-group

　　如果设置该属性， 此元素会作为一个或多个列的分组来显示(类似 )

　　css【disiplay】元素之table-header-column

　　如果设置该属性，此元素会作为一个或多个行的分组来显示(类似 )

　　css【disiplay】元素之table-footer-group

　　如果设置该属性， 此元素会作为一个或多个行的分组来显示(类似 )

　　css【disiplay】元素之table-column-group

　　如果设置该属性，此元素会作为一个单元格列显示(类似 )