mozilla

Versionen vergleichen

display

Versionsänderungen

Version 499519:

Version 499519 von SJW am

Version 503397:

Version 503397 von SJW am

Titel:
display
display
Adressname:
Web/CSS/display
Web/CSS/display
Schlagwörter:
CSS, CSS Referenz,
CSS, CSS Referenz,
Inhalt:

Version 499519
Version 503397
nn20      Zudem erlaubt einem der Wert <code>none</code> das Element 
 >gänzlich auszublenden.
21    </p>
22    <p>
n31    <dl>n34    <table class="standard-table">
35      <thead>
32      <dt>36        <tr>
33        none37          <td class="header" colspan="1">
38            Modul
39          </td>
40          <td class="header">
41            Wert
42          </td>
43          <td class="header">
44            Beschreibung
45          </td>
34      </dt>46        </tr>
47      </thead>
35      <dd>48      <tbody>
49        <tr>
50          <td colspan="1" rowspan="4">
51            Basic values (CSS 1)
52          </td>
53          <td>
54            <code>none</code>
55          </td>
56          <td>
36        Schaltet die Anzeige eines Elementes aus (das Element hat57            Schaltet die Anzeige eines Elementes aus (das Element
> keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelem> hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kind
>ente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so >elemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird
>gerendert als wenn das Element nicht im Dokumentenbaum existieren> so gerendert als wenn das Element nicht im Dokumentenbaum existi
> würde.<br>>eren würde.<br>
37        Um die Box trotzdem rendern zu lassen, aber den Inhalt un58            Um die Box trotzdem rendern zu lassen, aber den Inhal
>sichtbar zu machen, kann die <a href="/de/CSS/visibility" title=">t unsichtbar zu machen, kann die <a href="/de/CSS/visibility" tit
>de/CSS/visibility"><code>visibility</code></a> Eigenschaft verwen>le="de/CSS/visibility"><code>visibility</code></a> Eigenschaft ve
>det werden.>rwendet werden.
38      </dd>59          </td>
39      <dt>
40        inline
41      </dt>60        </tr>
61        <tr>
42      <dd>62          <td>
63            <code>inline</code>
64          </td>
65          <td>
43        Es werden eine oder mehrere inline Elementboxen generiert66            Es werden eine oder mehrere inline Elementboxen gener
>.>iert.
44      </dd>67          </td>
45      <dt>
46        block
47      </dt>68        </tr>
69        <tr>
48      <dd>70          <td>
71            <code>block</code>
72          </td>
73          <td>
49        Es wird eine Blockbox generiert.74            Es wird eine Blockbox generiert.
50      </dd>75          </td>
51      <dt>
52        inline-block {{ gecko_minversion_inline("1.9") }}
53      </dt>76        </tr>
54      <dd>
55        Mit CSS 2.1 eingeführt. Es wird eine <code>block</code> B
>ox generiert, welche den umliegenden Inhalt umfließen lässt, als  
>wenn es eine einzelne <code>inline</code> Box wäre. 
56      </dd>
57      <dt>77        <tr>
58        list-item78          <td>
79            <code>list-item</code>
59      </dt>80          </td>
60      <dd>81          <td>
61        Es wird eine <code>block</code> Box für den Inhalt und ei82            Es wird eine <code>block</code> Box für den Inhalt un
>ne separate <code>inline</code> Box für die List-Items generiert.>d eine separate <code>inline</code> Box für die List-Items generi
 >ert.
62      </dd>83          </td>
63      <dt>
64        compact
65      </dt>84        </tr>
66      <dd>
67        (Nicht unterstützt, aus dem CSS 2.1 Standard entfernt.)
68      </dd>
69      <dt>85        <tr>
70        run-in86          <td>
87            Extended values (CSS 2.1)
88          </td>
89          <td>
90            <code>inline-block</code>
91          </td>
92          <td>
93            Es wird eine <code>block</code> Box generiert, welche
 > den umliegenden Inhalt umfließen lässt, als wenn es eine einzeln
 >e <code>inline</code> Box wäre.
94          </td>
71      </dt>95        </tr>
96        <tr>
97          <td colspan="1" rowspan="10">
98            Table model values (CSS 2.1)
99          </td>
72      <dd>100          <td>
101            <code>inline-table</code>
102          </td>
103          <td>
104            Verhält sich wie das {{HTMLElement("table")}} HTML El
 >ement, aber es wird ein <code>inline</code> Element generiert.
105          </td>
106        </tr>
107        <tr>
108          <td>
109            <code>table</code>
110          </td>
111          <td>
112            Verhält sich wie das {{HTMLElement("table")}} HTML El
 >ement. Es wird eine Blockbox generiert.
113          </td>
114        </tr>
115        <tr>
116          <td>
117            <code>table-caption</code>
118          </td>
119          <td>
120            Verhält sich wie das {{HTMLElement("caption")}} HTML 
 >Element
121          </td>
122        </tr>
123        <tr>
124          <td>
125            <code>table-cell</code>
126          </td>
127          <td>
128            Verhält sich wie das {{HTMLElement("td")}} HTML Eleme
 >nt
129          </td>
130        </tr>
131        <tr>
132          <td>
133            <code>table-column</code>
134          </td>
135          <td>
136            Verhält sich wie das {{HTMLElement("col")}} HTML Elem
 >ent
137          </td>
138        </tr>
139        <tr>
140          <td>
141            <code>table-column-group</code>
142          </td>
143          <td>
144            Verhält sich wie das {{HTMLElement("colgroup")}} HTML
 > Element
145          </td>
146        </tr>
147        <tr>
148          <td>
149            <code>table-footer-group</code>
150          </td>
151          <td>
152            Verhält sich wie das {{HTMLElement("tfoot")}} HTML El
 >ement
153          </td>
154        </tr>
155        <tr>
156          <td>
157            <code>table-header-group</code>
158          </td>
159          <td>
160            Verhält sich wie das {{HTMLElement("thead")}} HTML El
 >ement
161          </td>
162        </tr>
163        <tr>
164          <td>
165            <code>table-row</code>
166          </td>
167          <td>
168            Verhält sich wie das {{HTMLElement("tr")}} HTML Eleme
 >nt
169          </td>
170        </tr>
171        <tr>
172          <td>
173            <code>table-row-group</code>
174          </td>
175          <td>
176            Verhält sich wie das {{HTMLElement("tbody")}} HTML El
 >ement
177          </td>
178        </tr>
179        <tr>
180          <td colspan="1" rowspan="2">
181            Flexbox model values (<a href="/de/docs/CSS/CSS3" tit
 >le="CSS3">CSS3</a>)
182          </td>
183          <td>
184            <code>flex</code>
185          </td>
186          <td>
187            Es wird ein Flexbox Container als <code>block</code> 
 >Element erzeugt.
188          </td>
189        </tr>
190        <tr>
191          <td>
192            <code>inline-flex</code>
193          </td>
194          <td>
195            Es wird ein Flexbox Container als <code>inline</code>
 > Element erzeugt.
196          </td>
197        </tr>
198        <tr>
199          <td colspan="1" rowspan="2">
200            Grid box model values (<a href="/de/docs/CSS/CSS3" ti
 >tle="CSS3">CSS3</a>) {{experimental_inline}}
201          </td>
202          <td>
203            <code>grid</code>
204          </td>
205          <td>
206            <p>
207              Es wird ein Grid Container als <code>block</code> E
 >lement erzeugt.
208            </p>
209            <div class="note">
210              As this is experimental, <a href="https://developer
 >.mozilla.org/en-US/docs/CSS/display#Browser_Compatibility" title=
 >"https://developer.mozilla.org/en/CSS/display#Browser_Compatibili
 >ty">most browsers don't support it</a>. Especially pay attention 
 >that <code>-moz-grid</code> is not the prefixed version of this, 
 >but a <a class="link-https" href="https://bugzilla.mozilla.org/sh
 >ow_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/sho
 >w_bug.cgi?id=616605#c10">XUL layout model</a> that must not be us
 >ed on a Web site.
211            </div>
212          </td>
213        </tr>
214        <tr>
215          <td>
216            <code>inline-grid</code>
217          </td>
218          <td>
219            Es wird ein Grid Container als <code>inline</code> El
 >ement erzeugt.
220          </td>
221        </tr>
222        <tr>
223          <td>
224            Experimental values {{experimental_inline}}
225          </td>
226          <td>
227            <code>run-in</code>
228          </td>
229          <td>
73        {{ unimplemented_inline() }} in Gecko/Firefox, {{ bug("20230            {{ unimplemented_inline() }} in Gecko/Firefox, {{ bug
>56") }}.>("2056") }}.
74        <ol>231            <ol>
75          <li>Wenn eine <code>run-in</code> Box eine <code>block<232              <li>Wenn eine <code>run-in</code> Box eine <code>bl
>/code> Box enthält, genau wie <code>block</code>.>ock</code> Box enthält, genau wie <code>block</code>.
76          </li>233              </li>
77          <li>Wenn einer <code>block</code> Box eine <code>run-in234              <li>Wenn einer <code>block</code> Box eine <code>ru
></code> Box folgt, wird die <code>run-in</code> Box die erste <co>n-in</code> Box folgt, wird die <code>run-in</code> Box die erste
>de>inline</code> Box der <code>block</code> Box.> <code>inline</code> Box der <code>block</code> Box.
78          </li>235              </li>
79          <li>Wenn eine <code>inline</code> Box folgt, wird aus d236              <li>Wenn eine <code>inline</code> Box folgt, wird a
>er <code>run-in</code> Box eine <code>block</code> Box.>us der <code>run-in</code> Box eine <code>block</code> Box.
80          </li>237              </li>
81        </ol>238            </ol>
82      </dd>239          </td>
83      <dt>
84        table
85      </dt>240        </tr>
86      <dd>
87        Verhält sich wie das <code>&lt;table&gt;</code> HTML Elem
>ent. 
88      </dd>241      </tbody>
89      <dt>
90        inline-table {{ Fx_minversion_inline(3) }}
91      </dt>
92      <dd>
93        Der <code>inline-table</code> Wert hat keinen direkten Be
>zug zu HTML. 
94      </dd>
95      <dt>
96        table-caption
97      </dt>
98      <dd>
99        Verhält sich wie das <code>&lt;caption&gt;</code> HTML El
>ement. 
100      </dd>
101      <dt>
102        table-column | table-column-group
103      </dt>
104      <dd>
105        Diese Werte verhalten sich wie die entsprechenden <code>&
>lt;col&gt;</code> und <code>&lt;colgroup&gt;</code> HTML Elemente 
>. 
106      </dd>
107      <dt>
108        table-header-group | table-row-group | table-footer-group
109      </dt>
110      <dd>
111        Diese Werte verhalten sich wie die entsprechenden <code>&
>lt;thead&gt; | &lt;tbody&gt; | &lt;</code><code>tfoot&gt;</code>  
>HTML Elemente. 
112      </dd>
113      <dt>
114        table-row
115      </dt>
116      <dd>
117        Verhält sich wie das <code>&lt;tr&gt;</code> HTML Element
>. 
118      </dd>
119      <dt>
120        table-cell
121      </dt>
122      <dd>
123        Verhält sich wie das <code>&lt;td&gt;</code> HTML Element
>. 
124      </dd>
125    </dl>242    </table>
126    <h3 id="Mozilla_Erweiterungen">
127      Mozilla Erweiterungen
128    </h3>
129    <p>
130      Diese <code>display</code> Werte sind nicht für den Gebrauc
>h in Webinhalten gedacht. 
131    </p>
132    <dl>
133      <dt>
134        -moz-inline-block {{ obsolete_inline() }}
135      </dt>
136      <dd>
137        Niemals wirklich unterstützt.
138      </dd>
139      <dt>
140        -moz-inline-table {{ obsolete_inline() }}
141      </dt>
142      <dd>
143        Niemals unterstützt.
144      </dd>
145      <dt>
146        -moz-box
147      </dt>
148      <dd>
149        Kindelemente werden horizontal der vertikal angeordnet (b
>asierend auf dem Wert der <code><a href="/de/CSS/-moz-box-orient" 
> title="de/CSS/-moz-box-orient">-moz-box-orient</a></code> Eigens 
>chaft). 
150      </dd>
151      <dt>
152        -moz-inline-box
153      </dt>
154      <dd>
155        &nbsp;
156      </dd>
157      <dt>
158        -moz-groupbox
159      </dt>
160      <dd>
161        &nbsp;
162      </dd>
163      <dt>
164        -moz-grid
165      </dt>
166      <dd>
167        &nbsp;
168      </dd>
169      <dt>
170        -moz-inline-grid
171      </dt>
172      <dd>
173        Kindelemente werden als XUL {{ xulelem("grid") }} Element
> ausgelegt. 
174      </dd>
175      <dt>
176        -moz-grid-group
177      </dt>
178      <dd>
179        Kindelemente werden als eine Gruppe von Spalten oder Zeil
>en eines Grids angezeigt. Das ist das Layout, welches von den Zei 
>len- bzw. Spaltenelementen verwendet wird. Die <code>-moz-box-ori 
>ent</code> Eigenschaft wird verwendet, um die Ausrichtung festzul 
>egen. Zeilen haben normalerweise ein vertikale Ausrichtung und Sp 
>alten eine horizontale Ausrichtung. 
180      </dd>
181      <dt>
182        -moz-grid-line
183      </dt>
184      <dd>
185        Kindelemente werden als einzelne Spalte oder Zeile eines 
>Grids angezeigt. Die Ausrichtung kann über <code>-moz-box-orient< 
>/code> erfolgen. 
186      </dd>
187      <dt>
188        -moz-stack
189      </dt>
190      <dd>
191        Kindelemente werden aufeinander angeordnet wie beim XUL {
>{ xulelem("stack") }} Element. 
192      </dd>
193      <dt>
194        -moz-inline-stack
195      </dt>
196      <dd>
197        Kindelemente, auch <code>inline-block</code>, <code>block
></code>, und <code>-moz-inline-stack</code> werden übereinander a 
>ngeordnet. 
198      </dd>
199      <dt>
200        -moz-deck
201      </dt>
202      <dd>
203        Kindelemente werden aufeinander angeordnet wie beim XUL {
>{ xulelem("deck") }} Element. Im Gegensatz zu <code>-moz-stack</c 
>ode> wird allerdings nur das oberste Elemente angezeigt. 
204      </dd>
205      <dt>
206        -moz-popup
207      </dt>
208      <dd>
209        &nbsp;
210      </dd>
211      <dt>
212        -moz-marker
213      </dt>
214      <dd>
215        &nbsp;
216      </dd>
217    </dl>
nn253    <h2 id="Browser_Compatibility" name="Browser_Compatibility">
254      Spezifikation
255    </h2>
256    <table class="standard-table">
257      <thead>
258        <tr>
259          <th scope="col">
260            Spezifikation
261          </th>
262          <th scope="col">
263            Status
264          </th>
265          <th scope="col">
266            Anmerkung
267          </th>
268        </tr>
269      </thead>
270      <tbody>
271        <tr>
272          <td>
273            {{SpecName('CSS3 Box', '#display', 'display')}}
274          </td>
275          <td>
276            {{Spec2('CSS3 Box')}}
277          </td>
278          <td>
279            <code>run-in</code> hinzugefügt
280          </td>
281        </tr>
282        <tr>
283          <td>
284            {{SpecName('CSS3 Grid', '#grid-declaration0', 'displa
 >y')}}
285          </td>
286          <td>
287            {{Spec2('CSS3 Grid')}}
288          </td>
289          <td>
290            Grid Box-Modell hinzugefügt
291          </td>
292        </tr>
293        <tr>
294          <td>
295            {{SpecName('CSS3 Flexbox', '#flex-containers', 'displ
 >ay')}}
296          </td>
297          <td>
298            {{Spec2('CSS3 Flexbox')}}
299          </td>
300          <td>
301            Flexbox-Modell hinzugefügt
302          </td>
303        </tr>
304        <tr>
305          <td>
306            {{SpecName('CSS2.1', 'visuren.html#display-prop', 'di
 >splay')}}
307          </td>
308          <td>
309            {{Spec2('CSS2.1')}}
310          </td>
311          <td>
312            Table-Model und <code>inline-block</code> hinzugefügt
313          </td>
314        </tr>
315        <tr>
316          <td>
317            {{SpecName('CSS1', '#display', 'display')}}
318          </td>
319          <td>
320            {{Spec2('CSS1')}}
321          </td>
322          <td>
323            <code>none</code>, <code>block</code>, <code>inline</
 >code> und <code>list-item</code> hinzugefügt
324          </td>
325        </tr>
326      </tbody>
327    </table>
n515      [1] Firefox supports only single-line flexbox. To activate n615      [1] To activate flexbox support, for Firefox 18 and 19, the
>flexbox support, for Firefox 18 and 19, the user has to change th> user has to change the about:config preference "layout.css.flexb
>e about:config preference "layout.css.flexbox.enabled" to <code>t>ox.enabled" to <code>true</code>. Multi-line flexbox are supporte
>rue</code>.>d since Firefox 28.
t517    <p>t617    <h2 id="See_also">
518      {{ languages( { "en": "en/CSS/display", "es": "es/CSS/displ618      Siehe auch
>ay", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CS 
>S/display", "zh-cn": "cn/CSS/display" } ) }} 
519    </p>619    </h2>
620    <ul>
621      <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssx
 >ref("position")}}
622      </li>
623    </ul>

Zurück zur Versionsgeschichte