CSS
Layoutkontroll

Syntax

• display: ingen | inline | blockera | listobjekt | inline-list-item | inline-block | inline-tabell | bord | bordscell | tabell-kolumn | tabell-kolumn-grupp | tabellfot-grupp | table-header-group | tabellrad | tabell-rad-grupp | flex | inline-flex | rutnät | inline-rutnät | inkörning | rubin | rubinbas | rubin-text | rubin-bas-behållare | rubin-text-container | innehåll;

parametrar

Skärmegenskapen

display CSS-egenskapen är grundläggande för att kontrollera layouten och flödet för ett HTML-dokument. De flesta element har ett display värde av antingen block eller inline (även om vissa element har andra standardvärden).

I kö

Ett inline upptar bara så stor bredd som behövs. Den staplar horisontellt med andra element av samma typ och kanske inte innehåller andra icke-inline-element.

<span>This is some <b>bolded</b> text!</span>

Som visas ovan är två inline , <span> och <b> , i linje (därav namnet) och bryter inte flödet i texten.

Blockera

Ett block upptar den maximala tillgängliga bredden på sitt 'överordnade element. Det börjar med en ny rad och, till skillnad från inline , begränsar den inte typen av element som den kan innehålla.

<div>Hello world!</div><div>This is an example!</div>

div elementet är blocknivå som standard, och som visas ovan staplas de två block vertikalt och till skillnad från inline bryter textflödet.

Inline Block

inline-block värdet ger oss det bästa från båda världar: det smälter in elementet med flödet av texten samtidigt som vi kan använda padding , margin , height och liknande egenskaper som inte har någon synlig effekt på inline .

Element med det här visningsvärdet fungerar som om det är vanlig text och som ett resultat påverkas av regler som styr textflödet, t.ex. text-align . Som standard krymps de också till den minsta möjliga storlek för att rymma innehållet.

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

ingen

Ett element som får inget värde till dess visningsegenskap visas inte alls.

Låt oss till exempel skapa ett div-element som har en id för myDiv :

<div id="myDiv"></div>

Detta kan nu markeras som att det inte visas med följande CSS-regel:

#myDiv {
    display: none;
}

När ett element har ställts in för att display:none; webbläsaren ignorerar alla andra layoutegenskaper för det specifika elementet (både position och float ). Ingen ruta kommer att ges för det elementet och dess existens i html påverkar inte följande elements position.

Observera att detta skiljer sig från att ställa in visibility till hidden . Inställning av visibility: hidden; för ett element skulle inte visa elementet på sidan men elementet skulle fortfarande ta upp utrymmet i återgivningsprocessen som om det skulle vara synligt. Detta kommer därför att påverka hur följande element visas på sidan.

none värde för visningsegenskapen används vanligtvis tillsammans med JavaScript för att visa eller dölja element när som helst, vilket eliminerar behovet av att faktiskt radera och återskapa dem.

För att få gammal tabellstruktur med div

Detta är den normala HTML-tabellstrukturen

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

Du kan göra samma implementering som den här

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>