Altezza e larghezza dell'elemento sono valori calcolati. Ogni elemento di una pagina web forma un'area rettangolare, che a sua volta è costituita da diverse aree − aree di contenuto (contenuto)., aree di imbottitura, zona del telaio E aree di campo elemento.
Tra il contenuto dell'elemento e il suo bordo ci sono trattini padding , fuori dal bordo dell'elemento - campi margine. Ogni elemento ha un'area di contenuto, altre aree sono facoltative.
Riso. 1. Modello a blocchi dell'elemento La proprietà height imposta l'altezza del contenuto dell'elemento block e non ha effetto sugli elementi inline display: inline; . L'altezza degli elementi inline è uguale all'altezza del loro contenuto. I valori negativi non sono ammessi. La proprietà non è ereditaria.
Sintassi
P (altezza: 100px;)
La proprietà width imposta la larghezza del contenuto dell'elemento block e non ha effetto sugli elementi inline display: inline; . La larghezza degli elementi inline è uguale alla larghezza del loro contenuto. I valori negativi non sono ammessi. La proprietà non è ereditaria.
Sintassi
P (larghezza: 100px;)
Imposta la larghezza e l'altezza di un elemento posizionato in modo assoluto position: absolute; non sempre necessario, perché questo caso l'altezza e la larghezza sono implicitamente determinate dall'offset dell'elemento. Se l'elemento ha un border e margin , restringono l'area del contenuto della quantità appropriata.
Div ( background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; ) /*in questo caso altezza elemento 100%, larghezza 50% del blocco genitore*/ Riso. 2. Altezza e larghezza di un elemento posizionato in modo assoluto
Usando la proprietà padding, puoi impostare il padding su più lati di un elemento contemporaneamente, nel seguente ordine: . Se l'elemento ha uno sfondo, si estenderà anche al riempimento. I valori negativi non sono ammessi. La proprietà non è ereditaria.
Se vengono forniti tre valori, ad esempio div (padding: 10px 20px 30px;) , verranno distribuiti nel seguente ordine: il primo valore è il padding superiore, il secondo è il padding destro e sinistro, il terzo è l'imbottitura inferiore.
Se vengono forniti due valori, ad esempio div (padding: 10px 20px;) , il primo imposterà il riempimento superiore e inferiore, il secondo - destro e sinistro.
Un valore, come div (padding: 10px;) , imposterà lo stesso padding per tutti i lati dell'elemento.
Sintassi
P (imbottitura: 5px 10px 15px 10px;)
Per impostare il padding solo su un lato di un elemento, devi utilizzare una delle proprietà padding-top , padding-right , padding-bottom , padding-left , ad esempio:
P (padding-sinistra: 10px;)
La maggior parte degli elementi sono separati l'uno dall'altro da campi. La proprietà margin è una scorciatoia per i margini di un elemento, nel seguente ordine: in alto, a destra, in basso, a sinistra. Viene utilizzato quando è necessario impostare i margini su più lati, ma non necessariamente su quattro. Campi verticalmente adiacenti elementi di blocco collassa e i margini superiore e inferiore non hanno effetto sugli elementi in linea. Sono ammessi valori negativi. La proprietà non è ereditaria.
Se vengono forniti tre valori, ad esempio div (margin: 10px 20px 30px;) , verranno distribuiti nel seguente ordine: il primo valore è il margine superiore, il secondo sono i margini destro e sinistro, il terzo è il margine inferiore.
Se vengono forniti due valori, ad esempio div (margin: 10px 20px;) , il primo imposterà i margini superiore e inferiore, il secondo imposterà i margini destro e sinistro.
Un singolo valore, come div (margin: 10px;) , imposterà lo stesso margine per tutti i lati dell'elemento.
(margin: 0 auto;) funzionerà solo se la larghezza dell'elemento è impostata esplicitamente.
Riso. 3. margine: automatico; per un elemento assolutamente posizionato Sintassi
Div (margine: 5px 10px 2px 5px;)
Le proprietà margin-top , margin-right , margin-bottom , margin-left controllano i rispettivi margini su ciascun lato di un elemento, ad esempio:
P (margine sinistro: 10px;)
I CSS supportano anche alcune altre proprietà relative all'impostazione dell'altezza e della larghezza degli elementi della pagina web: min-height , min-width , max-height e max-width . Queste proprietà consentono di impostare i valori minimo e massimo per la larghezza o l'altezza di un elemento, dando all'elemento la possibilità di riempire lo spazio disponibile. Le proprietà sono spesso utilizzate per la progettazione di pagine Web reattive. Si applica a tutti gli elementi tranne gli elementi inline e table. Vieni sempre dopo la regola principale, ad es. dopo aver impostato l'altezza o la larghezza dell'elemento . Non ereditato.
È possibile impostare le dimensioni normali utilizzando un'unità di misura e le restrizioni sulle dimensioni utilizzando altre unità, ad esempio:
Div ( larghezza: 400px; larghezza massima: 50%; )
L'elemento avrà una larghezza di 400px solo se questo valore è inferiore al 50% della larghezza del blocco contenitore, altrimenti sarà ridotto in larghezza.
Ultimo aggiornamento: 21/04/2016
Le dimensioni degli elementi vengono impostate utilizzando le proprietà width (larghezza) e height (altezza).
Il valore predefinito per queste proprietà è auto , il che significa che il browser determina la larghezza e l'altezza dell'elemento. Puoi anche impostare esplicitamente le dimensioni utilizzando unità (pixel, em) o percentuali:
Larghezza: 150 pixel larghezza: 75% altezza: 15 cm;
I pixel definiscono la larghezza e l'altezza esatte. L'unità em dipende dall'altezza del carattere nell'elemento. Se la dimensione del carattere di un elemento è, ad esempio, 16 pixel, allora 1 em per quell'elemento sarebbe 16 pixel. Cioè, se l'elemento ha una larghezza di 15em, in realtà sarà 15 * 16 = 230 pixel. Se l'elemento non ha una dimensione del carattere definita, verrà preso dai parametri ereditati o dai valori predefiniti.
I valori percentuali per la proprietà width sono calcolati in base alla larghezza dell'elemento contenitore. Se, ad esempio, la larghezza dell'elemento body in una pagina Web è di 1000 pixel e l'elemento è nidificato al suo interno
I valori percentuali per la proprietà height funzionano in modo simile alla proprietà width, solo che ora l'altezza viene calcolata dall'altezza dell'elemento contenitore.
Per esempio:
Allo stesso tempo, le dimensioni effettive dell'elemento potrebbero risultare diverse da quelle impostate nelle proprietà width e height. Per esempio:
Come puoi vedere nello screenshot, in realtà, il valore della proprietà width - 200px - determina solo la larghezza del contenuto interno dell'elemento, e sotto il blocco dell'elemento stesso verrà allocato lo spazio, la cui larghezza è uguale alla larghezza del contenuto interno (proprietà width) + padding (proprietà padding) + larghezza del bordo (proprietà border-width) + margins (proprietà margin). Cioè, l'elemento avrà una larghezza di 230 pixel e la larghezza del blocco dell'elemento, tenendo conto dei margini, sarà di 250 pixel.
Tali calcoli dovrebbero essere presi in considerazione quando si determinano le dimensioni degli elementi.
Utilizzando un set aggiuntivo di proprietà, puoi impostare le dimensioni minime e massime:
min-width : larghezza minima
max-width : larghezza massima
min-altezza : altezza minima
max-altezza : altezza massima
In questo caso la larghezza dell'elemento è pari al 50% della larghezza dell'elemento contenitore, tuttavia non può essere inferiore a 200 pixel e superiore a 300 pixel.
La proprietà box-sizing consente di eseguire l'override dimensioni fisse elementi. Può assumere uno dei seguenti valori:
content-box : il valore predefinito della proprietà, in cui il browser aggiunge la larghezza del bordo e il riempimento ai valori delle proprietà di larghezza e altezza per determinare la larghezza e l'altezza effettive degli elementi
padding-box: dice al browser web che la larghezza e l'altezza dell'elemento dovrebbero includere il padding come parte del suo valore. Ad esempio, supponiamo di avere il seguente stile:
Larghezza: 200px altezza: 100px; margine: 10px imbottitura: 10px bordo: 5px solido #ccc; colore di sfondo: #eee; dimensionamento della scatola: scatola di imbottitura;
Qui la larghezza effettiva del contenuto interno del blocco sarà 200px (larghezza) - 10px (padding-sinistra) - 10px (padding-destra) = 180px.
Vale la pena notare che la maggior parte browser moderni non supportano questa proprietà.
border-box: dice al browser web che la larghezza e l'altezza dell'elemento dovrebbero includere riempimento e bordi come parte del suo valore. Ad esempio, supponiamo di avere il seguente stile:
Larghezza: 200 pixel altezza: 100px; margine: 10px imbottitura: 10px bordo: 5px solido #ccc; colore di sfondo: #eee; dimensionamento della scatola: border-box;
Qui la larghezza effettiva del contenuto interno del blocco sarà 200px (larghezza) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170 pixel.
Ad esempio, definiamo due riquadri che differiscono solo per il valore della proprietà box-sizing:
Nel primo caso, quando si determina la dimensione del blocco, allo spessore del bordo verranno aggiunte le proprietà di larghezza e altezza, oltre a riempimento e imbottitura, quindi il primo blocco sarà grande.
IL altezza La proprietà CSS specifica l'altezza di un elemento. Per impostazione predefinita, la proprietà definisce l'altezza dell'area del contenuto. Se box-sizing è impostato su border-box , tuttavia, determina invece l'altezza dell'area del bordo .
L'origine per questo esempio interattivo è archiviata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clona https://github.com/mdn/interactive-examples e inviaci una richiesta pull.
Le proprietà min-height e max-height eseguono l'override di height .
Assicurati che gli elementi impostati con un'altezza non vengano troncati e/o non oscurino altri contenuti quando la pagina viene ingrandita per aumentare le dimensioni del testo.
| Specifica | Stato | Commento |
|---|---|---|
| Modulo di dimensionamento intrinseco ed estrinseco CSS livello 4 |
Bozza dell'editore | |
| Modulo di dimensionamento intrinseco ed estrinseco CSS livello 3 La definizione di "altezza" in quella specifica. |
Progetto di lavoro | Aggiunte le parole chiave max-content , min-content , fit-content. |
| Transizioni CSS La definizione di "altezza" in quella specifica. |
Progetto di lavoro | Elenca l'altezza come animabile. |
| CSS Livello 2 (Revisione 1) La definizione di "altezza" in quella specifica. |
Raccomandazione | Aggiunge il supporto per il tipo di dati CSS rappresenta un valore di distanza. Le lunghezze possono essere utilizzate in numerose proprietà CSS, come width, height, margin, padding, border-width, font-size e text-shadow."> |
| CSS Livello 1 La definizione di "altezza" in quella specifica. |
Raccomandazione | definizione iniziale. |
| valore iniziale | auto |
|---|---|
| Si applica a | tutti gli elementi tranne gli elementi in linea, le colonne della tabella e i gruppi di colonne non sostituiti |
| Ereditato | NO |
| Percentuali | La percentuale viene calcolata rispetto all'altezza del blocco contenitore del box generato. Se l'altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall'altezza del contenuto) e questo elemento non è posizionato in modo assoluto, il valore calcola ad auto .Un'altezza percentuale sull'elemento radice è relativa al blocco contenitore iniziale. |
| Media | visivo |
| Valore calcolato | una percentuale o auto o la lunghezza assoluta |
| Tipo di animazione | un tipo di dati CSS sono interpolati come numeri reali in virgola mobile.">length , i tipi di dati CSS sono interpolati come numeri reali in virgola mobile.">percentuale o calc(); |
| ordine canonico | l'unico ordine non ambiguo definito dalla grammatica formale |
La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, controlla https://github.com/mdn/browser-compat-data e inviaci una richiesta pull.
Aggiorna i dati di compatibilità su GitHub
| Scrivania | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cromo | bordo | Firefox | Internet Explorer | musica lirica | safari | visualizzazione Web Android | Chrome per Android | Firefox per Android | Opera per Android | Safari su iOS | Samsung Internet | |
| altezza | Chrome Supporto completo 1 | Edge Supporto completo 12 | Firefox Pieno supporto 1 | IE Pieno supporto 4 | Supporto completo per Opera 7 | Safari Pieno supporto 1 | WebView Android Supporto completo 1 | Chrome Android Supporto completo 18 | Firefox Android Supporto completo 4 | Opera Android Pieno supporto 10.1 | Safari iOS Supporto completo 1 | Samsung Internet Android Supporto completo 1.0 |
| contenuto adatto | Chrome Supporto completo 46 | Bordo Nessun supporto No | Firefox Nessun supporto No | IE Nessun supporto No | Opera Pieno supporto 33 | Safari Supporto completo 11 Supporto completo 11 Supporto completo 9 Prefisso Prefisso | Opera Android? | Safari iOS Supporto completo 11 Supporto completo 11 Supporto completo 9 Prefisso Prefisso Implementato con il prefisso del fornitore: -webkit- | ||||
| contenuto massimo | Chrome Supporto completo 46 | Bordo Nessun supporto No | Prefisso Prefisso | IE Nessun supporto No | Opera Pieno supporto 44 | Safari Pieno supporto 11 | WebView Android Supporto completo 46 | Chrome Android Supporto completo 46 | Prefisso Prefisso Implementato con il prefisso del fornitore: -moz- | Samsung Internet Android Supporto completo 5.0 | ||
| contenuto minimo | Chrome Supporto completo 46 | Bordo Nessun supporto No | Firefox Supporto completo 66 Supporto completo 66 Supporto completo 3 Prefisso Prefisso Implementato con il prefisso del fornitore: -moz- | IE Nessun supporto No | Opera Pieno supporto 44 | Safari Pieno supporto 11 | WebView Android Supporto completo 46 | Chrome Android Supporto completo 46 | Firefox Android Supporto completo 66 Supporto completo 66 Supporto completo 4 Prefisso Prefisso Implementato con il prefisso del fornitore: -moz- | Opera Android Pieno supporto 43 | Safari iOS Supporto completo 11 | Samsung Internet Android Supporto completo 5.0 |
| stirata | Chrome Supporto completo 28 webkit-fill-disponibile">Nome alternativo Assistenza completa 28webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo | Bordo Nessun supporto No | Firefox Nessun supporto No | IE Nessun supporto No | Supporto completo per Opera 15 webkit-fill-disponibile">Nome alternativo Assistenza completa 15webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available | Safari Pieno supporto 9 webkit-fill-disponibile">Nome alternativo Supporto completo 9webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available | WebView Android Supporto completo 4.4 webkit-fill-disponibile">Nome alternativo Pieno supporto 4.4webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available | Chrome Android Supporto completo 28 webkit-fill-disponibile">Nome alternativo Assistenza completa 28webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available | FirefoxAndroid | Opera Android? | Safari iOS Supporto completo 9 webkit-fill-disponibile">Nome alternativo Supporto completo 9webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available | Samsung Internet Android Supporto completo 5.0 webkit-fill-disponibile">Nome alternativo Pieno supporto 5.0webkit-fill-disponibile">Nome alternativo webkit-fill-disponibile">Nome alternativo Utilizza il nome non standard: -webkit-fill-available |
Ciao cari lettori! Oggi vedremo come impostare la dimensione degli elementi di blocco di una pagina web utilizzando proprietà CSS e configurare la visualizzazione del contenuto nel caso in cui non si adatti all'elemento.
Usando gli attributi di stile width e height, puoi impostare rispettivamente la larghezza e l'altezza degli elementi del blocco:
larghezza: auto|<ширина>| ereditare
altezza:auto|<ширина>| ereditare
Come valori, puoi utilizzare qualsiasi unità di misura disponibile in css, ad esempio pixel (px), pollici (in), punti (pt), ecc.:
p(larghezza:200px; altezza:150px)
Oltre alle unità assolute, è possibile impostare il valore relativo della dimensione degli elementi in percentuale. In questo caso, la larghezza e l'altezza dell'elemento dipenderanno dalla larghezza e dall'altezza dell'elemento genitore. Se il genitore non è specificato in modo esplicito, le dimensioni dipenderanno dalla finestra del browser.
div (larghezza: 40%;)
Il valore auto dà il controllo della dimensione dell'elemento al browser web ed è il valore predefinito. In questo caso, le dimensioni dell'elemento saranno tali da adattarsi completamente a tutto il suo contenuto.
Diamo un'occhiata ad alcuni esempi.
Benvenuti nel nostro sito automobilistico. Qui troverai molti articoli interessanti e utili sulle auto, sui loro specifiche tecniche e caratteristiche.
Risultato:
In questo esempio, abbiamo creato un blocco div e annidato un paragrafo p con del testo al suo interno. Per il div, impostiamo rigorosamente le dimensioni a 300 per 300 pixel. L'elemento p ha i valori delle proprietà width e height impostati su auto, quindi come puoi vedere nello screenshot, la sua larghezza è impostata uguale alla larghezza dell'elemento genitore e la sua altezza è impostata per adattarsi a tutto il testo contenuto nel paragrafo.
Ora cambiamo le impostazioni css per il paragrafo p e impostiamo dimensioni fisse:
livello2(
sfondo: #eee;
larghezza: 250px;
}
Risultato:
Come puoi vedere, la larghezza del paragrafo è diventata più stretta e pari a 250 pixel e la sua altezza è aumentata in modo che il testo si adatti, poiché il parametro altezza rimane uguale ad auto.
Ora impostiamo l'altezza e la larghezza del paragrafo in percentuale:
livello2(
sfondo: #eee;
larghezza: 50%;
altezza:50%;
}
Risultato:
Come puoi vedere nell'immagine, la larghezza dell'elemento p è diventata uguale alla metà della larghezza dell'elemento div. E l'altezza è aumentata al 75 percento dell'altezza del div.
Quando si imposta la larghezza e l'altezza di qualsiasi elemento in unità relative, potrebbe essere necessario specificare le dimensioni minime e massime possibili. Dopotutto, ad esempio, quando si ridimensiona la finestra del browser, la dimensione dell'elemento può diminuire e aumentare a una dimensione tale che la leggibilità del sito diventerà molto bassa.
È possibile definire la larghezza e l'altezza minime utilizzando gli attributi min-width e min-height:
larghezza minima:<ширина>
altezza minima:<высота>
Gli attributi di stile simili max-width e max-height consentono di impostare le dimensioni massime:
larghezza massima:<ширина>
altezza massima:<высота>
È chiaro che quando si impostano i valori massimo e minimo per l'altezza e la larghezza, le dimensioni dell'elemento non possono diventare maggiori del massimo e minori del minimo.
Vale la pena chiarire che il task i parametri di altezza e larghezza hanno senso solo per i tag di blocco, poiché per gli elementi in linea questi parametri non vengono elaborati dal browser.
Può succedere che quando si impostano rigidi parametri di altezza e larghezza su un elemento, il contenuto in esso contenuto potrebbe non rientrare nell'area limitata.
Ad esempio, riduciamo la dimensione del paragrafo p dagli esempi precedenti a 100 pixel:
livello2(
sfondo: #eee;
larghezza: 100px;
altezza: 100px;
}
Risultato:
Come puoi vedere, il testo è andato oltre i limiti del paragrafo e non sembra molto carino. Per evitare tali situazioni, esiste una regola css: overflow.
L'overflow del contenuto può verificarsi quando sia la larghezza che l'altezza di un elemento sono vincolate. Consideriamo due paragrafi:
Testo del primo paragrafo
Testo del secondo paragrafo
Risultato:
Poiché né la larghezza né l'altezza sono specificate per i paragrafi, il browser li calcola autonomamente in base alla propria comprensione del valore automatico. Di conseguenza, i paragrafi in larghezza occupavano tutto lo spazio disponibile e in altezza secondo il contenuto in essi contenuto.
Ora limiteremo la larghezza del primo paragrafo:
Testo del primo paragrafo
Testo del secondo paragrafo
Risultato:
La larghezza del paragrafo è prevedibilmente ridotta e l'altezza è impostata per adattarsi a tutto il testo.
Bene, ora limiteremo l'altezza del primo paragrafo:
Testo del primo paragrafo
Testo del secondo paragrafo
Di conseguenza, si è scoperto che il testo non rientra in un paragrafo così limitato, e quindi si è imbattuto nell'area del vicino inferiore. Di conseguenza, è praticamente impossibile leggere il testo sia nel primo che nel secondo paragrafo. È per controllare il comportamento del contenuto in tali situazioni che c'è regola di overflow:
overflow: visibile|nascosto|scroll|auto|inherit
Per impostazione predefinita, l'overflow è impostato su visibile, che indica al browser di visualizzare il contenuto che non rientra nel contenitore. Il risultato può essere visto nell'esempio sopra.
La regola nasconde tutto ciò che non rientra nel contenitore:
Il valore di scorrimento visualizzerà barre di scorrimento verticali e orizzontali sull'elemento, anche se tutto il contenuto si adatta:
Testo del primo paragrafo
Testo del secondo paragrafo
La soluzione più popolare e logica, se è necessario creare barre di scorrimento per il contenitore, è il valore auto. In questo caso sarà il browser stesso a determinare quando e su quali assi visualizzare le barre di scorrimento:
Testo del primo paragrafo
Testo del secondo paragrafo
Risultato:
Le barre di scorrimento possono anche essere personalizzate utilizzando gli attributi di stile overflow-x e overflow-y, che consentono di personalizzare la visualizzazione dello scorrimento sui singoli assi. Così responsabile di asse orizzontale, ma per Asse verticale.
Pertanto, se, ad esempio, hai bisogno che lo scorrimento orizzontale non appaia mai in un paragrafo e lo scorrimento verticale appaia solo quando necessario, allora è sufficiente scrivere la seguente regola css:
p(overflow-x:nascosto;overflow-y:auto;)
E il problema sarà risolto.
È tutto. Ci vediamo. Non dimenticare di iscriverti agli aggiornamenti del blog e ti sarò grato se utilizzi i pulsanti dei social network.
