Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

CSS Display(显示) 与 Visibility（可见性）

CSS Display(显示) 与 Visibility（可见性）

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

display属性设置元素如何显示,visibility属性设置了元素的可见性.display:none不占用空间而visibility:hidden虽然元素不可见但是依然占用同样的空间.

块级元素的特点是占用正航宽度强制换行,例如div,p,h1

内联元素只占用需要的宽度并且不强制换行,例如span,a.

可以互相更改两种元素显示方式,例如span{display:block;}或者li{display:inline;}

visibility的属性值可以是hidden或者visible或者collapse,collapse属性可以用来隐藏表格的一行或者一列,并且不影响表格的布局,将隐藏元素的位置用相同的空白代替.

CSS Display - 块和内联元素

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

块元素的例子：

<h1>

<p>

<div>

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

内联元素的例子：

<span>

<a>

如何改变一个元素显示

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>标题</h2>
<span>这是一段内容</span>
<span>这也是一段内容</span>
<h2>标题</h2>
<span>内容</span>
<span>也是内容</span>
</body>
</html>

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

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { display:block; } </style> </head> <body> <h2>标题</h2> <span>这是一段内容</span> <span>这也是一段内容</span> <h2>标题</h2> <span>内容</span> <span>也是内容</span> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492927 spielt ab