CSS“隐藏”功能简介

如有不全，还请见谅。

“隐藏”功能

CSS的“隐藏”功能分为两种，一种为真实隐藏“消失不见”，即看不见也点击或者选中不了，另一种“看不见”，就只是看不见文本或者图片；图片或者文档内容还在，甚至还占有原来的位置，只是“看不见”了。

彻底隐藏

我们平时用得最多的属性，隐藏属性， display：none是指不生成盒子，也就是不存在咯，即当前元素盒子在页面（不产生）隐藏，且不占用实际尺寸，完全消失不见，不可点击、不可被选中。
这是我们平时在做页面时，简单动画（点击动画、悬停动画、轮播动画等）常用的属性，即需要将某个元素盒子在不同情况下，产生不同的状态，值或者属性时所用的隐藏属性。

看不见的隐藏

首先看不见的隐藏是指仅仅是看不见，不代表真的消失不见。
第一种，简单的文档内容或者纯色背景的颜色改变，达到“隐藏、消失”看不见的效果；改变文本内容颜色，改变为当前页面的背景色，达到文本的（变色龙的样式效果），融入环境背景，从而“消失、隐藏”也就是“看不见”看不出来的效果；
即color（属性）：（属性值为当前页面背景色），分为两类；一类为管关键词类（直接设定属性值为颜色的关键词），精准度和效果不是很高；一类为颜色设置的进制度（二进制、十进制、十六进制）；即
通常使用color（属性）：（属性值）#号 加上我们需要的值，一般为6位，当然3位也是可以的，只是精准度的不同而已。
第二种就是 rgb（属性）颜色设定（三大主颜色的缩写）：（属性值为3个依次为红（red），绿（green），蓝（blue），中间用“逗号”隔开）取值范围（0~255。）三个值同时为0时为黑色，单独三个值，哪一个值越大，**（红，绿，蓝）**各自占比越大；主要应用于文本内容。
例如：color:rgb( 0, 0, 0);
这种为“看不见的隐藏”，但实际文本内容还依旧在原来的位置，可以点击选中的。
第三种，可以应用于整个文本盒子，即透明，是指将自身样式设置为透明，客户或者用户看到的就只是内容颜色，而不是字体颜色或者图片颜色，让其“眼光”直接穿过我们的文档内容、盒子。即：
opacity（属性）：（属性值）；opactity属性即透明度的设定；
这里的属性值取值范围为（0~1）；0为完全透明，1为不透明；
例如：设置某个盒子透明度为0.5.（半透明）
opacity：0.5；
当前元素或者盒子透明隐藏，但内容依旧在原来的位置，可被点击或者选中。（当然这里面的符号都应该为英文符号），但这里为了能更好的区分和看清楚我用的是中文的标点符号（我们的大多数编辑器是会显示报错的）。
第四种，跟第二种第三种有些相似，准确的说是综合；是颜色加透明度的样式设置方式；
即：color（属性名）：rgba（属性值）（以括号包裹，共4个值，前三个为颜色设定值，最后一个值为透明度设置）；因此说是第二种跟第三种的综合体。
例如：
**color：rgba（0,0,0，0.5)**跟单独的透明度设定相比，rgba主要设定文本内容的样式，或者隐藏。而单独的透明度设定的大多数以盒子为单位整体透明或者隐藏。
第五种，文本隐藏，主要用于文本容太多，或者会发生调整变化时不影响周围盒子，或者内容。
即 visibility：hidden （创建一个BFC环境，不影响周围其他元素或者盒子）
当前元素在页面中隐藏溢出的内容，前面未溢出部分依旧占用原来的位置，但溢出部分，不占用位置和尺寸。
而我们平时使用的HTML就是一个单独的BFC环境。