display: blocca display interno: inline

Voglio capire cosa succede quando un elemento il cui CSS è display:block è un figlio DOM di un elemento il cui CSS è display:inline (in modo che l’elemento block sia figlio di un elemento inline).

Questo scenario è descritto nella sezione delle caselle di blocco anonime per la specifica CSS 2.1: l’esempio include le seguenti regole …

 body { display: inline } p { display: block } 

… e il testo di accompagnamento dice …

L’elemento BODY contiene un blocco (C1) di testo anonimo seguito da un elemento a livello di blocco seguito da un altro blocco (C2) di testo anonimo. Le caselle risultanti sarebbero una scatola di blocco anonima attorno al BODY, contenente un riquadro di blocco anonimo attorno a C1, il riquadro di blocco P e un altro riquadro di blocco anonimo attorno a C2.

Se hai un display:inline elemento padre in display:inline e se questo genitore ha un figlio che è display:block , allora l’esistenza di quel bambino sembra far si che il genitore si comporti quasi come display:block , e ignori il fatto che è definito come display:inline (nel senso che il genitore ora non contiene nient’altro che figli di blocchi anonimi e non anonimi, cioè non contiene più bambini in linea)?

La mia domanda è, in questo scenario (dove c’è un display:block child), allora quali sono le differenze tra la display:inline definita dal genitore display:inline invece di display:block ?


Modifica: sono più interessato a comprendere lo standard CSS 2.1 che a come e se le varie implementazioni del browser si comportano nella pratica.


2a modifica:

C’è una differenza annotata nelle specifiche. Nel seguente documento, il bordo per il 2 ° paragrafo ‘blocco’ circonda l’intero paragrafo e l’intera larghezza della pagina; mentre il bordo per il 1 ° paragrafo inline si trova intorno a ogni riga (anche quando ci sono più righe) all’interno del paragrafo e non più della larghezza esatta di ogni riga (con ogni linea che è più corta della larghezza della pagina).

    p.one { border-style:solid; border-width:1px; display: inline; } p.two { border-style:solid; border-width:1px; }    

Some text. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Some text.

Se aggiungo la seguente regola di stile …

 b { display: block; } 

… poi la “Nota:” nel primo paragrafo inline diventa un blocco, che divide il paragrafo (secondo le specifiche, la prima e l’ultima parte del paragrafo sono ora in un blocco anonimo). Tuttavia, il bordo attorno alla prima e all’ultima parte del paragrafo sono ancora bordi “in linea”: e quindi, non è ancora lo stesso come se p.one fosse stato dichiarato display:block in primo luogo.

C’è una citazione dalla specifica, che dice,

Le proprietà impostate sugli elementi che generano caselle di blocco anonime vengono ancora applicate alle caselle e al contenuto di quell’elemento. Ad esempio, se un bordo era stato impostato sull’elemento BODY nell’esempio precedente, il bordo sarebbe disegnato attorno a C1 (aperto alla fine della riga) e C2 (aperto all’inizio della riga).

La proprietà “border-style” è l’unico tipo di proprietà in cui la differenza è visibile?

quando leggo le specifiche , trovo la tua domanda in realtà abbastanza ben fornita :

Quando una casella in linea contiene una casella di blocco, la casella in linea […] [è] rotta attorno al blocco. Le caselle [in] prima dell’interruzione e dopo l’interruzione sono racchiuse in caselle anonime e la casella di blocco diventa un fratello di quelle caselle anonime.

  This is anonymous text before the P. 

This is the content of P.

This is anonymous text after the P.

Le caselle risultanti sarebbero una scatola di blocco anonima attorno al BODY, contenente un riquadro di blocco anonimo attorno a C1, il riquadro di blocco P e un altro riquadro di blocco anonimo attorno a C2.

o, visivamente:

 +- anonymous block box around body ---+ | +- anonymous block box around C1 -+ | | | + | | +---------------------------------+ | | | | +- P block box -------------------+ | | | + | | +---------------------------------+ | | | | +- anonymous block box around C2 -+ | | | + | | +---------------------------------+ | +-------------------------------------+ 

ora alla tua domanda: è diverso da ?

sì. mentre è ancora 4 caselle ( casella di blocco anonima attorno al corpo che ora è una casella di blocco BODY ), la specifica indica la differenza :

Le proprietà impostate sugli elementi che generano caselle di blocco anonime vengono ancora applicate alle caselle [blocco anonimo generato] e al contenuto di tale elemento. Ad esempio, se un bordo era stato impostato sull’elemento BODY nell’esempio precedente, il bordo sarebbe disegnato attorno a C1 (aperto alla fine della riga) e C2 (aperto all’inizio della riga):

 +-------------------------------------- | This is anonymous text before the P. +-------------------------------------- This is the content of P. --------------------------------------+ This is anonymous text after the P. | --------------------------------------+ 

questo è diverso da :

 +--------------------------------------+ | This is anonymous text before the P. | | | | This is the content of P. | | | | This is anonymous text after the P. | +--------------------------------------+ 

Un contenitore in linea non può contenere un contenitore di blocchi. Il solito risultato quando si verifica una cosa del genere è che il contenitore in linea viene convertito in blocco per adattarsi al suo contenuto. Se hai bisogno di un contenitore che appare in linea per contenere qualcosa che sembra essere un blocco, usa quanto segue:

 display: inline-block; 

La proprietà inline-block è una modalità di visualizzazione che posiziona il contenitore in modo in linea con le proprietà e le definizioni immediate di un contenitore in linea applicato solo al contenitore stesso senza limitare i suoi figli a tali vincoli. Il risultato è che un contenitore di blocchi figlio di un genitore di blocco in linea è limitato alle dimensioni del genitore se il genitore ha definizioni definite o può allungare le dimensioni dei genitori per accogliere un figlio più grande. Un contenitore impostato su blocco in linea può ricevere proprietà solo per blocchi, come larghezza o altezza, senza perdere il posizionamento predefinito associato a un contenitore in linea.

Quella proprietà non è supportata da FF2 e, di conseguenza, non è supportata dal browser Ice Weasel. Quasi tutti gli altri browser supportano tale proprietà, incluso IE6, quindi dovresti usarlo perché quasi nessuno usa FF2 o Ice Weasel tranne per un minor numero di utenti confinati nelle distribuzioni Linux pronte all’uso.

A volte dipende dall’esatto css definito o dal browser.

Più comunemente, ho visto due comportamenti:

  • Il display:block elemento del display:block all’interno del display:inline elemento display:inline rende il display:inline comporta come un display:block con width:100% .

  • Un display:inline elemento in display:inline che contiene solo display:block float:left o float:right elementi float:right non hanno spazio ed è come se non ci fossero elementi al suo interno. Il display:block elementi di display:block si comportano come se fossero all’interno di un altro display:block elemento di display:block , a volte con azioni funky a seconda della position .

Sia la position che il float fanno sì che gli elementi del bambino abbiano a volte comportamenti bizzarri, ma evitandoli li fanno funzionare generalmente come se fossero in inline .

Penso di aver capito la differenza, finalmente, e c’è una differenza fondamentale.

Quando l’elemento di primo livello (ad es. ) è definito con display: block, quindi:

  • C’è un blocco associato all’elemento

  • Questo blocco contiene (cioè funge da blocco contenitore per) blocchi anonimi (es. Nodi di testo) e per elementi figlio non anonimi (ad es.

    blocchi)

  • Gli attributi di stile dell’elemento di livello superiore, ad esempio il padding, sono associati a questo blocco contenitore

Quando l’elemento di livello superiore (ad es. ) è definito con display: inline, quindi:

  • Non esiste un singolo blocco associato all’elemento

  • I contenuti dell’elemento (nodes di testo in un blocco anonimo e elementi figlio in un blocco non anonimo) non hanno un blocco contenitore associato all’elemento di livello superiore

  • Gli attributi di stile dell’elemento di livello superiore, ad esempio il riempimento, sono associati al suo contenuto in linea