forked from jgthms/css-reference
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
7 lines (7 loc) · 11.1 KB
/
Copy pathindex.html
File metadata and controls
7 lines (7 loc) · 11.1 KB
1
2
3
4
5
6
7
--- layout: single property_name: display ---<section id="display" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/display/" data-property-name="display" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="display">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/display" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#display"><span>#</span>display</a></h2><div class="property-description"><p>Sets the display behavior of the element.</p></div></header><style type="text/css">.display .block--alpha { padding: 0; }.display .block span { background: hsl(348, 100%, 61%);color: #fff; }.display .block span:last-child { background: hsl(217, 71%, 53%); }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: none;">display: none;</code></p><div class="example-description"><p>The element is completely <strong>removed</strong>, as if it wasn't in the HTML code in the first place.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-none"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Hello world</p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-none .block--alpha { display: none; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline;">display: inline;</code></p><div class="example-description"><p>The element is turned into an <strong>inline</strong> element: it behaves like simple text.</p><p>Any <code>height</code> and <code>width</code> applied will have <strong>no</strong> effect.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-inline"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Hello world</p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-inline .block--alpha { display: inline; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: block;">display: block;</code></p><div class="example-description"><p>The element is turned into a <strong>block</strong> element: it starts on a new line, and takes up the whole width.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-block"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Hello world</p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-block .block--alpha { display: block; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline-block;">display: inline-block;</code></p><div class="example-description"><p>The element shares properties of both an <strong>inline</strong> and a <strong>block</strong> element:</p><ul><li><strong>inline</strong> because the element behaves like simple text, and inserts itself in a block of text</li><li><strong>Block</strong> because you can apply <code>height</code> and <code>width</code> values</li></ul><p>For example, this element has:</p><pre>.element{
height: 3em;
width: 60px;
}</pre></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-inline-block"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Hello world</p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-inline-block .block--alpha { display: inline-block;height: 3em;width: 60px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: list-item;">display: list-item;</code></p><div class="example-description"><p>The element behaves like a <strong>list item</strong>: <code><li></code>. The only difference with <strong>block</strong> is that a list item has a <strong>bullet point</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-list-item"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Hello world</p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-list-item .block--alpha { display: list-item; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table;">display: table;</code></p><div class="example-description"><p>The element behaves like a <strong>table</strong>: <code><table></code>.</p><p>Its content and child elements behave like table cells.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-table"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-table .block--alpha { display: table; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table-cell;">display: table-cell;</code></p><div class="example-description"><p>The element behaves like a <strong>table cell</strong>: <code><td></code> or <code><th></code>.</p><p>Its content and child elements behave like table cells.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-table-cell"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-table-cell .block--alpha { display: table-cell; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table-row;">display: table-row;</code></p><div class="example-description"><p>The element behaves like a <strong>table row</strong>: <code><tr></code>.</p><p>Its content and child elements behave like table cells.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-table-row"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-table-row .block--alpha { display: table-row; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: flex;">display: flex;</code></p><div class="example-description"><p>The element is turned into an <strong>flexbox</strong> container. On its own, it behaves like a block element.</p><p>Its child elements will be turned into <strong>flexbox items</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-flex"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha"><span>First child</span> <span>Second child</span></p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-flex .block--alpha { display: flex; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline-flex;">display: inline-flex;</code></p><div class="example-description"><p>The element shares properties of both an <strong>inline</strong> and a <strong>flexbox</strong> element:</p><ul><li><strong>inline</strong> because the element behaves like simple text, and inserts itself in a block of text</li><li><strong>flexbox</strong> because its child element will be turned into flexbox items</li></ul><p>For example, this element has:</p><pre>.element{
height: 3em;
width: 120px;
}</pre></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div display" id="display-inline-flex"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p class="block block--alpha"><span>First child</span> <span>Second child</span></p>Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div></div></aside><style type="text/css">#display-inline-flex .block--alpha { display: inline-flex;height: 3em;width: 120px; }</style></section></section>