Ciao a tutti, è un po' di tempo che non uso scrivere lato client in particolare html e css e ad un primo approccio mi è venuto intuitivo come test iniziale di provare a metterli uno dentro l'altro e vederli con colori diversi.
Ci ho perso 1 giornata buona a curiosare e provare, ho pure cercato su internet ma non ho trovato un argomento specifico che chiarisse i comportamenti.
Dico quanto penso di sapere:
Di default viene ereditata la configurazione del tag html che poi dipende se non erro dalla configurazione di default del browser ed eventuale modifica dell'utente allo stesso.
1) Ci sono dei tag di tipo block e altri di tipo inline.
2) Il div è di tipo block e se non erro il suo comportamento è di mettersi uno sotto l'altro...andare a capo...
3) il div a quanto pare se non metto paragrafi dentro non viene visualizzato.
4) Ho notato che oltre al display:block di default ne esistono una miriade di altri preconfigurati e
probabilmente creano una dipendenza.
5) So che la cache del browser a volte frega negli aggiornamenti, ma non mi pare sia il mio caso.
Ora ho alcuni riscontri da prove fatte che non comprendo e mi viene da supporre che vi siano delle dipendenze lato css da definire al fine che l'una soddisfi la seguente....su questo aspetto sarebbe molto interessante avere qualche linea guida da seguire che chiarisca il tutto...
Ho fatto due semplicissime prove intuitive:
(mostro il codice per far prima)
1)
HTML (in questo caso li ho messi in un div container per provare risolvere, ma vorrei capirlo anche senza.
codice:
<divid="container">
<divid="a">
<p>A</p>
</div>
<divid="b">
<p>B</p>
</div>
</div>
CSS:
codice:
#container{
width: 600px;
height: 600px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
};
#b{
width: 200px;
height: 200px;
background-color: rgb(34, 179, 15);
};
Ora intuitivamente mi aspettavo due quadrati con sfondi colorati uno sotto l'altro, invece solo il primo è corretto, il secondo (anche andando con devTools) noto che il css #b non lo vede proprio e ne mette uno di default neppure modificabile...quello del box model che è 600*19 e suppongo i valori di default di un div (in questo caso si estende a tutto il container in larghezza e il paragrafo in altezza).
Allego una img per confrontare ciò che vedo.
Vorrei appunto capire le dipendenze che intercorrono perché a quanto pare mettere semplicemente altezza e larghezza non è sufficiente. Nelle guide mi pare ci sia un po' di mancanza nel rappresentare le dipendenze che ci sono tra i vari tag rispetto allo scopo che si vuole ottenere, anche il più banale.
Questo è il primo post, per non allungare ne faccio un altro dove vorrei sapere come metterli uno dentro l'altro....così tengo i due argomenti distinti.
Grazie.