“掌握盒子的显示方式与可见性概念”的版本间的差异
来自CloudWiki
(→元素的显示方式) |
|||
(未显示同一用户的2个中间版本) | |||
第46行: | 第46行: | ||
无父元素的单独元素默认visible可见,子元素默认inherit继承父元素的可见性,若父元素不可见则子元素不可见,需要子元素当地可见时必须设置 visibility:visible覆盖为可见。 | 无父元素的单独元素默认visible可见,子元素默认inherit继承父元素的可见性,若父元素不可见则子元素不可见,需要子元素当地可见时必须设置 visibility:visible覆盖为可见。 | ||
任何元素使用visibility:hidden只是不可见,原来占据的页面空间不变,隐藏后不会影响页面中其他元素的位置,需要动态可见时可通过CSS“:hover”伪类或JavaScript代码设置visibility:visible恢复可见。 | 任何元素使用visibility:hidden只是不可见,原来占据的页面空间不变,隐藏后不会影响页面中其他元素的位置,需要动态可见时可通过CSS“:hover”伪类或JavaScript代码设置visibility:visible恢复可见。 | ||
+ | *试一试:[http://www.w3school.com.cn/tiy/t.asp?f=csse_visibility W3C实例] | ||
+ | *代码: | ||
+ | <nowiki><html> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | h1.visible {visibility:visible} | ||
+ | h1.invisible {visibility:hidden} | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <h1 class="invisible">这是不可见的标题</h1> | ||
+ | <h1 class="invisible">这是不可见的标题</h1> | ||
+ | <h1 class="visible">这是可见的标题</h1> | ||
+ | </body> | ||
+ | |||
+ | </html></nowiki> | ||
+ | |||
+ | 总结: | ||
+ | |||
+ | #display: none 元素不可见,也不占用空间 | ||
+ | #visibility:hidden 元素可见 ,但是占用空间 |
2018年12月4日 (二) 09:51的最新版本
元素的显示方式
display:显示方式; display属性可指定元素的类型以决定元素的显示方式。 行内元素除了通过float浮动后可转换成块级元素外,也可通过display:block;将其设置为块级元素。 通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。
inline 行内元素,在当前区域块内显示不换行(行内元素默认) block 作为块级元素显示一个新段落(块级元素默认) none 隐藏元素不显示,也不再占用页面空间,相当于该元素已不存在 list-itme 添加列表项的项目编号并另起一行显示在下一行—块级元素 inline-block 生成为行内块元素
- 试一试:W3C实例
- 代码:
<html> <head> <style type="text/css"> p {display: inline} div a{display:block;} #hidden {display: none} </style> </head> <body> <p>本例中的样式表把段落元素设置为行内元素。</p> <p>而 div 元素不会显示出来!</p> <div><a> 把a元素转化为块级元素</a> <a> 把a元素转化为块级元素</a> <a> 把a元素转化为块级元素</a> <a> 把a元素转化为块级元素</a> <a> 把a元素转化为块级元素</a> </div> <div id="hidden">div 元素的内容不会显示出来!</div> </body> </html>
元素的可见性visibility
visibility:可见性;
visible 元素可见(独立元素的默认值) hidden 元素隐藏不可见(但仍占据空间,显示为父元素背景色) inherit 使用父元素的可见性(子元素的默认值) collapse 用于表格中可删除一行或一列(不占空间),用于其他元素相当于hidden
无父元素的单独元素默认visible可见,子元素默认inherit继承父元素的可见性,若父元素不可见则子元素不可见,需要子元素当地可见时必须设置 visibility:visible覆盖为可见。 任何元素使用visibility:hidden只是不可见,原来占据的页面空间不变,隐藏后不会影响页面中其他元素的位置,需要动态可见时可通过CSS“:hover”伪类或JavaScript代码设置visibility:visible恢复可见。
- 试一试:W3C实例
- 代码:
<html> <head> <style type="text/css"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="invisible">这是不可见的标题</h1> <h1 class="invisible">这是不可见的标题</h1> <h1 class="visible">这是可见的标题</h1> </body> </html>
总结:
- display: none 元素不可见,也不占用空间
- visibility:hidden 元素可见 ,但是占用空间