Heim > Web-Frontend > HTML-Tutorial > CSS Display(显示) and Visibility(可见性)_html/css_WEB-ITnose

CSS Display(显示) and Visibility(可见性)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:29:21
Original
1866 Leute haben es durchsucht

如何设置一个元素是否显示,visibility属性指定一个元素应可见或隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过display属性设置为"none"或"hidden"属性的可见性。但是,请注意这两种方法产生不同的结果

visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐藏,但仍然会影响布局。

h1.hidden {visibility:hidden;}
Nach dem Login kopieren

display:没有隐藏的元素,它不会占用任何空间。元素将被隐藏,但页面会显示:

h1.hidden {display:none;}
Nach dem Login kopieren

CSS Display - 块和内联元素

块元素是一个元素,占用了全部宽度,在前后都是换行符。

块元素的例子:

内联元素只需要必要的宽度,不强制换行。

内联元素的例子:

如何改变一个元素显示

可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

下面的示例显示为内联元素的列表项:

li {display:inline;}
Nach dem Login kopieren

下面的示例是把span元素作为块元素

span {display:block;}
Nach dem Login kopieren

注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。.

更多实例

如何显示元素的内联元素。

这个例子演示了如何显示一个元素的内联元素。

如何显示元素的块元素。

这个例子演示了如何显示一个元素的块元素。

如何使用一个表的collapse属性

这个例子演示里如何使用表的collapse属性


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage