Weblapot formázó stílusok, második rész.

Stílus emlékeztető!

overflow

overflow: hidden; Elrejti azon részt, mely kívül esik az általunk meghatározott width: ....px; height: ....px; területen. (Például: div meghatározott területén.) #Normal{width: 140px; height: 60px; border: 1px solid black;} #OverFlow{overflow: hidden; width: 140px; height: 60px; border: 1px solid black;}	<div id="Normal"> Normál. <br /> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br /> x <br /> x </div> Normál. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x x <div id="OverFlow"> overflow: hidden; <br /> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br /> x <br /> x </div> overflow: hidden; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x x

overflow: hidden;
Elrejti azon részt, mely kívül esik az általunk meghatározott
width: ....px; height: ....px; területen.
(Például: div meghatározott területén.)

#Normal{width: 140px; height: 60px; border: 1px solid black;}



#OverFlow{overflow: hidden; width: 140px; height: 60px; border: 1px solid black;}

<div id="Normal"> Normál. <br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br />
x  <br />
x  </div>

Normál.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x
x

<div id="OverFlow"> overflow: hidden; <br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br />
x  <br />
x  </div>

overflow: hidden;
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x
x

visibility

CSS láthatósági tulajdonság. Kiválasztott elemek, láthatóvá vagy rejtetté válnak

CSS visibility szintaxis : 
{ visibility:visible; }         Az elem látható.
{ visibility:hidden; }         Az elem rejtve van (de még mindig helyet foglal)
{ visibility:collapse; }       Csak a táblázatokhoz. (rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>).)
{ visibility:initial; }          Beállíthatjuk ezt a tulajdonságot, az alapértelmezett értékhez.
{ visibility:inherit; }         Ez a tulajdonság, a szülőeleméből származik.

<head>
<style> table, td {border: 1px solid black;}
             tr.collapse { visibility: collapse; } 
</style>
</head>
<body>
<table>
  <tr> <td>Péter</td> <td>Gábor</td> </tr>
  <tr class="collapse"> <td>László</td> <td>Gábor</td> </tr>
  <tr> <td>János</td> <td>Gábor</td> </tr>
</table>
</body>

**Normál tábla.**
Péter	Gábor
László	Gábor
János	Gábor

**visibility: collapse; tábla.**
Péter	Gábor
László	Gábor
János	Gábor

Kiválasztott elemek, láthatóvá vagy rejtetté válnak:

<head>
<style>
    .avis { visibility: visible;}
    .bvis {visibility: hidden;}
</style>
</head>
<body>
     <h3 class="avis">A címsor, visible.(Látható.)</h3>
     <h3 class="bvis">A címsor hidden. (Rejtett.)</h3>
<p>Figyelembe kell venni, hogy a rejtett elem, még mindig helyet foglal az oldalon.</p>
</body>

A címsor, visible

A címsor hidden

Figyelembe kell venni, hogy a rejtett elem, még mindig helyet foglal az oldalon.

A  visibility: hidden;  és a  display: none;   közötti különbség.
A  visibility: hidden;   meghatározás esetén megmarad az elem által elfoglalt hely, csak nem lesz látható az elem.
A  display: none;   meghatározás esetén viszont az elem kirajzolási helye is eltűnik, egyáltalán nem fog teret elfoglalni.

display megjelenítés

Elemek és szövegek megjelenítésére szolgáló tulajdonságok.
Minden elem - display megjelenítés

display: none;
Elemek elrejtése.
A tema tartalmát elrejti. Mozgasd ide az egeret.
.tema {display: none;}

    <div class="tema">
      <p> Első p elem.</p>
      <p> Második p elem.</p>
    </div>

display: block;
Elrejtett elemek megjelenítése.

A tema tartalmának megjelenítése. Mozgasd ide az egeret.
.tema {display: block;}

    <div class="tema">
      <p> Első p elem.</p>
      <p> Második p elem.</p>
    </div>

display: inline;

Kiválasztott elemek, egy sorba.

Így, érvényes minden elemre, 
melyek class="line" azonosítóval rendelkeznek.
.line{display: inline; font-size: 13px; border: 2px solid white;}

Megjegyzés:
A li elemeknél, törli az előjeleket.

Így, érvényes minden li-re, melyek ul elemben vannak.
ul li{display: inline; font-size: 13px; border: 2px solid white;}

Így, csak azon li elemekre érvényes, 
     melyek <ul class="dispul"> elemben vannak.
.dispul li {display: inline; font-size: 13px; border: 2px solid white;}

    <p class="line"> Első p elem.</p>
    <p class="line"> Második p elem.</p>
    <ul>
        <li class="line"> Első li elem.</li>
        <li class="line"> Második li elem.</li>
    </ul>				
    <ul class="dispul">
        <li> Első li elem.</li>
        <li> Második li elem.</li>
    </ul>

Első p elem.

Második p elem.

Első li elem.
Második li elem.

Első li elem.
Második li elem.

Kiválasztott elemben, minden elemre érvényes display: block; meghatározás.

<style>
#displaybox *{display: block; font-size: 13px; color:blue; border: 2px solid white; padding: 2px; margin: 5px;}
</style>
</head>

<body>		  
<div id="displaybox">
    <div>div-1
        <div>div-2
             <div>div-3</div>
        </div>
        <div>div-4
             <div>div-5
                <p class="ameret12">p bekezdés.<span> span</span></p>
             </div>
        </div>
    </div>
</div>
</body>

div-1

div-2

div-3

div-4

div-5

p bekezdés. span

Szövegközi tömb: display:inline-block

Példa:

  <div class="float-box">Float <br /> box</div>

  <div class="float-box">Float <br /> box</div>

  <div class="float-box">Float <br /> box</div>

   <div class="uj-box"> Új box, floattoltak után.</div>

   <p> Új bekezdés. </p>

1.Példa: (clear meghatározás nélkül.)
.float-box { float: left; width: 40px; height: 40px; margin: 5px; 
                    border: 3px solid #73AD21; }
.uj-box { border: 3px solid red; }

Float
box

Új box, floattoltak után

Új bekezdés.

2.Példa: (clear meghatározással.)
.float-box { float: left; width: 40px; height: 40px; margin: 5px; 
                    border: 3px solid #73AD21; }
.uj-box {clear: left; border: 3px solid red; }

Float
box

Új box, floattoltak után

Új bekezdés.

3.Példa: inline-block; clear meghatározás nélkül.
Ugyanez a hatás érhető el display: inline-block; értéke alapján úgy,
hogy nincs szükség clear meghatározásra.

.float-box { display: inline-block; width: 40px; height: 40px; margin: 5px; 
                    border: 3px solid #73AD21; }
.uj-box { border: 3px solid red; }

Float
box

Új box, floattoltak után

Új bekezdés.

Öröklés:display:inherit;

	<div id="apa">
	<p class="gyermeke">Apa örököse.</p>
	<p class="gyermeke">Ez is apa örököse.</p>
	</div>

A <p class="gyermeke"> elemek, "apa" által meghatározott formátumban
  jelennek meg, és nem külön-külön sorban.

    #apa{display: inline;}
    .gyermeke{display: inherit;}

Apa örököse.

Ez is apa örököse.

A következő oldal és itteni példák egyes részeinél vannak eltérések.
https://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=table-caption
Például: display:run-in Megtartja a közvetlen előtte meghatározott display tulajdonságot, De itt, nem!

A span elemeben, egy másik span elem is van:
CSS display kód: span #MSpan{ background-color:yellow; display: típusa; }

display:inline