Display si Visibility

postat acum 4 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!

Comentariu postate de golden goose sneakers la data de 18.05.2019
I truly wanted to develop a small word to thank you for all of the remarkable advice you are writing on this website. My long internet look up has at the end been recognized with really good points to write about with my two friends. I 'd point out that most of us visitors actually are really lucky to be in a wonderful website with so many marvellous people with valuable hints. I feel truly fortunate to have seen your webpage and look forward to many more entertaining minutes reading here. Thanks a lot again for a lot of things.