Display si Visibility

postat acum 2 ani de Stefanescu Mihai in categorie CSS

In acest tutorial am sa va invat cum sa ascundeti un element fie folosind display: none fie visibility:hidden si diferenta dintre ele.

visibility:hidden va ascunde un elemente, dar spatiul ocupat de acesta va ramane gol ca si cand el inca ar mai fii acolo, iar display: none va ascunde elementul si va elibera spatiul ocupat de acesta, iar pagina va fi afisata ca si cand acel element nu ar fi existat.

Exemplu visibility:

h1.hidden {
    visibility: hidden;
}

Exemplu display:

h1.hidden {
    display: none;
}

Display – Elementele inline si block

Un element de tip block este un element ce ocupa toata latimea disponibila si insereaza un line break inainte si dupa el.

Elemente de tip block:

  • <h1>
  • <p>
  • <li>
  • <div>

Un element inline ocupa decat latimea necesara lui si nu introduce nici-un line break.

Elemente de tip inline:

  • <span>
  • <a>

Schimba tipul unui element

Cand faceti un design HTML/CSS va trebuii  sa schimbati tipul unui element block in inline sau invers pentru a face o pagina sa arate intr-un anumit fel.Cum schimbam un element <li> din block in inline:

li{
display: inline;
}

Cum schimbam un element <span> din inline in block:

span{
display: block;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!