E 'sbagliato cambiare un elemento di blocco a in linea con i CSS se contiene un altro elemento di blocco?

StackOverflow https://stackoverflow.com/questions/746531

  •  09-09-2019
  •  | 
  •  

Domanda

Lo so che è sbagliato a mettere un elemento di blocco all'interno di un elemento inline, ma per quanto riguarda il seguente?

Immaginate questo markup valido: 

<div><p>This is a paragraph</p></div>

Ora aggiungere questo CSS: 

div {
   display:inline;
}

Questo crea una situazione in cui un elemento in linea contiene un elemento di blocco (Il div diventa in linea e il p è blocco per default)

Sono gli elementi della pagina è ancora valida?

Come e quando fare giudichiamo se l'HTML è valida - prima o dopo le regole CSS vengono applicate

UPDATE: Da allora ho imparato che in HTML5 è perfettamente valida per mettere gli elementi a livello di blocco all'interno di tag link per esempio: 

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

Questo è in realtà molto utile se si desidera un grande blocco di codice HTML per essere un collegamento.

È stato utile?

Soluzione

CSS 2.1 Spec :

  

Quando una scatola in linea che contiene un quadro a livello di blocco nel flusso, la casella di linea (ei suoi antenati linea all'interno della stessa casella riga) sono rotti intorno alla scatola di blocco (ed eventuali fratelli a livello di blocco che sono consecutivi o separate solo da spazi bianchi pieghevole elementi e / o out-of-flow), suddividendo il testo in linea in due scatole (anche se entrambi i lati è vuoto), uno su ciascun lato della scatola a livello di blocco (es). Le caselle riga prima della pausa e dopo la pausa sono racchiusi in scatole di blocco anonimo, e la casella a livello di blocco diventa un fratello di quelle scatole anonime. Quando tale casella linea è influenzato dal posizionamento relativo, qualsiasi traduzione derivanti influisce anche il testo a livello di blocco contenuto nella scatola in linea.

     

Questo modello si applicherebbe nel seguente esempio se le seguenti regole:

     
p    { display: inline }
span { display: block }
     

sono stati utilizzati in questo documento HTML:

     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>
     

L'elemento P contiene un pezzo (C1) di testo anonimo seguito da un elemento di blocco seguito da un altro pezzo (C2) di testo anonimo. Le scatole risultante sarebbe una casella blocco rappresenta il corpo, contenente un blocco casella anonima intorno C1, la casella blocco SPAN, e un'altra scatola anonimo a blocco intorno C2.

     

Le proprietà di scatole anonime vengono ereditate dalla casella non anonimi racchiude (ad esempio, nell'esempio appena sotto la sottosezione voce "scatole anonimi a blocco", quella per DIV). proprietà non-ereditate hanno il loro valore iniziale. Ad esempio, il carattere della scatola anonimo è ereditato dal DIV, ma i margini sarà 0.

     

Le proprietà impostate su elementi che causano scatole anonime blocco da generare ancora valide per i box e il contenuto di tale elemento. Ad esempio, se un confine era stato fissato sull'elemento P nell'esempio precedente, il bordo sarà definito attorno C1 (aperta alla fine della linea) e C2 (aperto all'inizio della riga).

     

Alcuni agenti utente hanno implementato confina inlines contenenti blocchi in altri modi, per esempio, avvolgendo tali blocchi annidati all'interno "scatole pubblicitari anonimi" e disegnare cornici linea intorno a tali scatole così. Come CSS1 e CSS2 non definiscono questo comportamento, CSS1 sola agenti e CSS2 solo utente possono implementare questo modello alternativo e ancora rivendicazione conformità a questa parte di CSS 2.1. Questo non vale per i programmi utente sviluppate dopo questa specifica è stato rilasciato.

Marchio di che cosa si vuole. Chiaramente il comportamento è specificato in CSS, anche se copre tutti i casi, o è attuato in modo coerente tutti i browser di oggi non è chiaro.

Altri suggerimenti

A prescindere se è valido o no, la struttura di elemento è sbagliato. Il motivo per cui non mettere elementi di blocco all'interno di elementi in linea è in modo che il browser può rendere gli elementi in modo facilmente prevedibile.

Anche se non si rompe le regole di HTML o CSS, ancora crea elementi che non possono essere resi come previsto. Il browser deve gestire gli elementi proprio come se il codice HTML non è valido.

L'HTML e il CSS saranno entrambi ancora valido. Idealmente, non si dovrà fare qualcosa di simile, ma quel particolare po 'di CSS è in realtà un modo pratico (e sintatticamente valido, ma non semanticamente valido) per ottenere doppia bug margine di Internet Explorer senza ricorrere a fogli di stile condizionali o hack che invaliderà il CSS. L'(X) HTML ha più valore semantico del CSS, quindi è meno importante che il CSS è semanticamente valida. Nella mia mente, è accettabile perché risolve un problema del browser fastidioso senza invalidare il codice.

Il codice HTML viene convalidato indipendentemente dal CSS, in modo che la pagina sarebbe ancora valida. Sono abbastanza sicuro che le specifiche CSS non dice nulla su di esso sia, ma non citare me su quello. Tuttavia, sarei molto attenti utilizzando una tecnica di questo tipo, come mentre potrebbe rendere come previsto in alcuni browser, avresti bisogno di provare 'em all-non vedo molte garanzie in corso.

  

Sono gli elementi della pagina è ancora valida?

“Valido” in senso HTML, sì; HTML non sa niente di CSS.

La resa che si ottiene nel browser, tuttavia, è ‘undefined’ dalla specifica CSS, quindi potrebbe sembrare nulla. Mentre si potrebbe includere una tale regola in hack CSS volte a un particolare browser (dove si sa come quel browser rende questo caso), non dovrebbe essere servita ai browser in generale.

Non so fuori dalla parte superiore della mia testa, se questo convalida tutte le regole, ma mi consiglia di utilizzare la W3C HTML Validator e il W3C CSS Validator di determinare che. Spero che questo è utile!

No, non è una scelta sbagliata. Possiamo usare secondo i requisiti.

Se c'è una logica si segue e si finisce per attuare in questo modo, non è sbagliato. funzionare le cose non sono "sbagliato" solo perché sono strano. Sì, è abbastanza insolito ma aiuta e non è un errore. E 'intenzionale. HTML e CSS dovrebbero servire voi, non il contrario, quindi non bisogna mai ascoltare i commenti che ti dice di non farlo solo perché è brutto.

E 'tipico di chiamare una soluzione "non valido" e suggerire un senso lungo intorno al blocco. A volte si può ripensare quello che hai fatto. Ma ci possono essere molti motivi per quello che hai fatto e non li considerano.

.

che faccio usare blocchi all'interno inlines regolarmente E 'valido e che sta funzionando - non è solo necessario nella maggior parte dei casi. E allora. Ricordate quando XHTML ci ha detto di mettere sempre le virgolette intorno proprietà (e tutti urlato voi se non! L'avete fatto), ora HTML5 consente di omettere loro se non c'è spazio all'interno. Quello che è successo a quella ultima barra dopo singolari tag? "
"? Dai. Norme cambiano. Ma i browser continuare a sostenere le cose non standard pure. CENTER è deprecato; siamo nel 2013 e funziona ancora. TABLE per centratura verticale? A volte è l'unico modo. DIV all'interno Un per renderlo librarsi come pianificato? Basta andare avanti.

Focus sulle cose importanti.

Credo, (x) html è valido, CSS è valido. È il risultato valido? Sì, se si è alla ricerca nel browser come si desidera.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top