css隐藏元素的方法
1、利用opacity透明度来隐藏，opacity设置为0，它只是一种视觉隐藏，元素本身依旧占用它的位置并对 页的布局起到作用，它也同样影响用户交互。在读屏软件中会被识别。
2、visibility：规定元素 是否可见，一般设置为hidden，它可以很好的隐藏，不会影响用户的交互，在读屏软件中不会被识别。（visibility可能的值）
| visible |
默认值。元素是可见的。 |
| hidden |
元素是不可见的。 |
| collapse |
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。 |
| inherit |
规定应该从父元素继承 visibility 属性的值。 |
3、display：当display设置为none，任何对该元素直接打用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。（display可能的值）
| 值 |
描述 |
| none |
此元素不会被显示。 |
| block |
此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline |
默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block |
行内块元素。（CSS2.1 新增的值） |
| list-item |
此元素会作为列表显示。 |
| run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
| compact |
CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker |
CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table |
此元素会作为块级表格来显示（类似
），表格前后带有换行符。
| inline-table |
此元素会作为内联表格来显示（类似
），表格前后没有换行符。
| table-row-group |
此元素会作为一个或多个行的分组来显示（类似
|
）。
| table-header-group |
此元素会作为一个或多个行的分组来显示（类似
）。
| table-footer-group |
此元素会作为一个或多个行的分组来显示（类似
|
|
）。
| table-row |
此元素会作为一个表格行显示（类似
|
）。
| table-column-group |
此元素会作为一个或多个列的分组来显示（类似
）。
|
| table-column |
此元素会作为一个单元格列显示（类似
） |
| table-cell |
此元素会作为一个表格单元格显示（类似
|
和
|
）
|
| table-caption |
此元素会作为一个表格标题显示（类似
）
|
| inherit |
规定应该从父元素继承 display 属性的值。 |
4、position：元素的定位。把position：absolutely；top：-4555px；left：-45545px；top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。(position可能的值）
| 值 |
描述 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
|
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
|
| relative |
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。
|
| static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit |
规定应该从父元素继承 position 属性的值。 |
5、clip-path：可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。它只是一个实验中的功能，兼容性并不是很好， 用法：clip-pach：polygon（0px 0px,0px 0px,0px 0px,0px 0px）;
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！
软件工程：个人阅读作业与总结
下一篇
2018年1月5日
|
|
