Il layout CSS è sempre stato rettangolare. Eventuali linee morbide sono di competenza dello sviluppatore. Le regole di stile forniscono opzioni sufficienti per conferire alla pagina forme morbide all'interno della risoluzione dello schermo. Ma qualsiasi elemento del layout è sempre un rettangolo in cui la posizione delle informazioni è regolata dalle regole CSS.
Il riempimento a tutto tondo è importante per ogni elemento di una pagina quando è posizionato in modo assoluto e il riempimento superiore è definito specificamente nei CSS poiché è importante per vari elementi, in particolare per gli elementi in linea.
Un elemento blocco ha una regola di riempimento dai lati dell'elemento in cui si trova (margine), una regola di riempimento per gli elementi al suo interno (padding) e una larghezza del bordo (border) che può essere utilizzata.
Di particolare importanza è la rientranza in alto. I CSS all'interno di un blocco mettono in relazione le regole di riempimento con le regole per gli elementi posizionati in modo assoluto e relativo all'interno di quel blocco.
La pratica abituale delle regole CSS: puoi specificare il riempimento su tutti i lati equamente, a coppie in alto/in basso e a destra/sinistra, o per ciascun lato separatamente. Per esempio,
Nel primo caso viene impostata la rientranza dell'elemento dai lati del contenitore esterno in cui si trova. Nel secondo caso, i rientri superiore e inferiore sono 10px, sinistro e destro - 20px. Nel terzo caso vengono indicate le dimensioni delle rientranze su tutti i lati: superiore, destra, inferiore e sinistra.
In tutti questi casi, il trattino il CSS superiore è 10 px.
Se l'elemento del layout non è posizionato in modo assoluto, si trova nell'ordine generale della pagina.
Se definiamo rientro dalla parte superiore del CSS nell'elemento scCurrInfo, l'obiettivo verrà raggiunto e, se a livello li, non lo farà.
In questo esempio, utilizzando il riempimento: 40px; richiede un'adeguata riduzione delle regole di larghezza e altezza di 80px. In caso contrario, la dimensione del blocco scCurrInfo si estenderà oltre i limiti del blocco esterno.
Se rimuoviamo la regola di riempimento dalla descrizione scCurrInfo, ma la aggiungiamo con un valore di 20px alla descrizione dello stile dell'elemento della lista, otteniamo solo trattino superiore. I CSS non applicheranno questo valore ad altri lati.
Naturalmente, questo uso della regola del rientro si applica a ciascun elemento li.
Alcuni sviluppatori raggiungono la perfezione disponendo le pagine con elementi a blocchi. Apparentemente, questa è una pratica classica: iniziare con le tabelle e completare il proprio processo educativo sui blocchi.
La libertà insita nel layout a blocchi è affascinante e l'immaginazione dello sviluppatore potrebbe non essere limitata da rigide regole della tabella: solo righe, solo celle, che si uniscono solo orizzontalmente e verticalmente. Niente di peculiare delle idee relazionali.
Nel frattempo, le tabelle, oltre alle evidenti carenze, presentano molti vantaggi qualitativi. Quando si creano rientri dall'alto, i CSS tengono conto dei rientri a sinistra, a destra (in basso è un momento speciale). Le regole delle celle della tabella ti consentono di controllare l'allineamento sia verticalmente che orizzontalmente. Utilizzando gli stili di riga, combinati con gli stili di cella, è possibile creare visualizzazioni complesse del contenuto.
La consueta rappresentazione della pagina sotto forma di rettangoli non impedisce affatto di presentarla sotto forma di tabella. Anche questi sono rettangoli, ma sono anche celle di tabella, cioè hanno le proprie regole che integrano le regole del blocco.
Blocco con regola POSIZIONE: assoluta ; si troverà nel luogo stabilito dalle sue coordinate relative al blocco in cui si trova.
Una caratteristica delle regole CSS è "la pratica è il miglior criterio di verità" nella maggior parte dei casi, soprattutto quando è richiesta la compatibilità tra browser e il layout viene eseguito manualmente, è preferibile studiare manuali completi su fogli di stile a cascata.
L'uso delle tabelle porta spesso a problemi di cell shift. Un offset simile all'interno di un blocco non sempre influisce su tutti gli elementi. Sperimentando è possibile ottenere il risultato desiderato. Un compito banale: come rimuovi il riempimento superiore, i CSS non sempre lo risolvono in modo banale.
In alcuni casi, quando devi comporre gli elementi della pagina nelle profondità di un popolare sistema di gestione dei contenuti del sito, devi comunque prestare attenzione non solo alla pratica sperimentale, ma anche guardare all'esperienza dei colleghi.
I margini e il riempimento sono stili molto importanti quando si crea una pagina HTML. Permettono di posizionare gli elementi con maggiore precisione, creare una cornice con gli spazi necessari, ecc. Entrambi gli stili sono molto simili e svolgono funzioni simili. Ma ci sono ancora delle differenze.
Gli elementi possono essere nidificati o adiacenti tra loro. Diamo un'occhiata al seguente esempio:
Abbiamo due tavoli, limone e blu, posizionati uno sotto l'altro. Le tabelle sono costituite da una cella. C'è un blocco rosso nella cella della prima tabella. In questo esempio, vediamo come funzionano i margini e il riempimento.
I campi sono impostati in base allo stile imbottitura. Questo stile si applica solo agli elementi contenitore che possono contenere altri elementi. Stile consente di impostare il valore dei margini tra i bordi dell'elemento e il suo contenuto. Stile margine ti consente di impostare il riempimento da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore genitore, così come i bordi della pagina stessa.
Esistono diversi modi per impostare questi stili. Ad esempio, specifica direttamente la dimensione di tutti i margini o i rientri con un argomento in un'unità di misura (px, ex, em, pt, cm e così via):
imbottitura: 3px margine: 3px;In questo caso, i margini e il riempimento saranno gli stessi su tutti e quattro i lati. Quando si specificano due argomenti separati da uno spazio:
imbottitura: 3px 5px; margine: 3px 5px;il primo determinerà la quantità di margini/rientri in alto e in basso, il secondo a sinistra e a destra. Quando vengono forniti tre argomenti:
imbottitura: 3px 5px 2px; margine: 3px 5px 2px;il primo è il margine/rientro superiore, il secondo è sinistro e destro allo stesso tempo, il terzo è inferiore. Con quattro argomenti:
imbottitura: 3px 5px 2px 6px; margine: 3px 5px 2px 6px;il primo è il margine/imbottitura superiore, il secondo è quello destro, il terzo è quello inferiore, il quarto è quello sinistro. È facile da ricordare: il primo è in alto, poi in senso orario. Inoltre, puoi impostare separatamente i margini e il riempimento per un particolare bordo, utilizzando gli stili appropriati: parte superiore imbottita, imbottitura a destra, fondo imbottito, imbottitura-sinistra, margine superiore, margine destro, margine-inferiore, margine sinistro. Il valore di questi stili può essere un solo argomento, che specifica la quantità di margine/imbottitura per un dato lato.
Nella figura, il blocco rosso si trova all'interno della cella della tabella e confina con i suoi bordi, ovvero la cella non ha margini. Impostiamo i margini della cella utilizzando lo stile:
imbottitura: 5pxDi conseguenza, la pagina cambierà come segue:
Ora diamo un'occhiata agli offset. Due tabelle sono adiacenti tra loro, se vogliamo allontanarle un po' possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il rientro inferiore della prima tabella o il rientro superiore della seconda tabella. Usiamo il secondo:
margine superiore: 5px;Tieni presente che impostiamo il rientro sulla tabella e non sulla cella della tabella, come nel caso dei campi. Ecco il risultato:
A proposito, nel primo caso (lo spazio tra il blocco rosso e i bordi della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i rientri del blocco. In generale, se qualcosa non è chiaro, cancellati nei commenti.
Codice HTML della pagina sperimentale:
<html> <testa > <titolo > Test</titolo> <meta http-equiv = "Tipo di contenuto" content = "text/html;charset=utf-8" > </testa> <corpo> <stile > tabella (larghezza: 200px; altezza: 150px; bordo: 1px solido #555; collasso bordo: collasso) td (allineamento verticale: superiore; imbottitura: 0px) div (larghezza: 100px; altezza: 100px; sfondo: rosso)</stile> <stile tabella="sfondo:lime"> <tr > <tdstyle="padding:5px"> <div style="margine:0px"></div> </td> </tr> </tabella> <stiletabella = "sfondo: azzurro; margine superiore: 5px"> <tr > <td ></td> </tr> </tabella> </corpo> </html>Imposta la quantità di riempimento dal bordo destro di un elemento. Il rientro è la distanza dal bordo esterno del bordo destro dell'elemento corrente al bordo interno del suo elemento genitore (Fig. 1).
margine destro: valore | automatico | ereditare
La quantità di riempimento destro può essere specificata in pixel (px), percentuali (%) o altre unità CSS accettabili. Il valore può essere positivo o negativo.
Auto Specifica che la dimensione del riempimento verrà calcolata automaticamente dal browser. ereditare Eredita il valore del genitore.
HTML5 CSS2.1 IE Cr Op Sa Fx
Il risultato di questo esempio è mostrato in Fig. 2.
Riso. 2. Applicazione della proprietà margin-right
document.getElementById("elementID ").style.marginRight
Internet Explorer 6 raddoppia il riempimento sinistro o destro per gli elementi mobili nidificati all'interno degli elementi principali. La spaziatura adiacente al lato del genitore viene raddoppiata. Il problema viene solitamente risolto aggiungendo display: inline all'elemento mobile.
Internet Explorer fino alla versione 7.0 non supporta il valore ereditario.
Succede che quando creiamo un elemento o un layout, dobbiamo creare un rientro orizzontale in modo che sia relativo l'uno all'altro. Può trattarsi di blocchi o di vari elementi, o meglio, si tratta di fare in modo che la distanza fosse originariamente fissata tra i blocchi posti orizzontalmente. Esistono diversi modi per creare spaziatura interna sugli elementi di progettazione. Tuttavia, per compatibilità con diversi browser moderni, qui toccheremo l'argomento attuale del rientro di un testo o di un blocco su una pagina.La proprietà specifica quanto spazio di testo orizzontale deve essere disposto prima dell'inizio della prima riga di un elemento di testo. La spaziatura viene calcolata dall'inizio dal bordo dell'elemento e dal contenitore per il livello del blocco.
Poiché la maggior parte del contenuto di una pagina web è sotto forma di testo, la capacità di rendere quel testo attraente ed efficace è un'abilità importante per diventare un web designer. Per indentare la descrizione e il paragrafo, il metodo più comunemente utilizzato e consigliato è utilizzare i CSS. Qui ti verranno forniti vari esempi di come i CSS possono essere utilizzati per il testo e l'elemento di riempimento.
Imposta l'imbottitura superiore con CSS
Per creare il top viene utilizzato il riempimento, poi ovviamente non possiamo fare a meno delle proprietà CSS, perché abbiamo bisogno del margin-top, questo è un valore che può essere impostato in diversi modi, sia in px che standardmente su pixel, em, % e così via on, che tutto avviene in stile CSS in unità di misura.
Esempio di utilizzo:
blocco margine(
margine superiore:50px;
}
Cosa si vede nella foto:
Puoi anche usarlo per rilasciare blocchi, qui puoi usare una proprietà chiamata margine sinistro Anche margine destro E margine-inferiore. Laddove specifichiamo semplicemente la proprietà del margine, dove è possibile impostare inizialmente 4 parametri sotto di essa, qui considereremo il concetto in senso orario, dove inizieremo dal lato superiore e continueremo sotto ciascuno dei lati.
margine: 20px 50px 30px 50px;
C'è anche un rientro dall'alto sui CSS
Succede che devi allineare l'elemento di contenuto verticalmente, questo è relativo al blocco genitore, qui è possibile utilizzare altre proprietà, come il riempimento-top , che fa, o meglio, per impostazione predefinita, imposta il rientro verso l'alto. Se parliamo di proprietà simili, che possono anche essere scritte e impostate in modo simile, allora ecco il margine in px, em, % e altre unità.
Esempio:
Blocco di riempimento(
imbottitura superiore: 47px;
}
Ora possiamo considerare un analogo della proprietà margine E imbottitura, che viene utilizzato per impostare i rientri sugli altri lati dell'elemento blocco, ma va già separatamente: imbottitura-sinistra, imbottitura a destra, fondo imbottito. Dove puoi impostare immediatamente la distanza che ti serve, solo per tutti i lati, e tutto sarà allo stesso tempo.
imbottitura: 10px 20px 40px 50px;
Qui è possibile impostare inizialmente il valore come per margine cominciando come avete capito dall'alto, ma poi va tutto in senso orario, questo è a destra, sotto, a sinistra e così via.
Ora, a seconda della diversa situazione, hai la possibilità di rientrare la parte superiore degli stili CSS, dove utilizziamo le proprietà margine E imbottitura che è possibile impostare gli elementi necessari sulla pagina della tua risorsa Internet, come hai pianificato e devi fare.
Per una visualizzazione più bella degli elementi su una pagina Web, vengono utilizzati i rientri esterni e interni nei CSS e ora lo analizzeremo utilizzando degli esempi.
Ogni elemento, sia esso un paragrafo, un div, un'immagine o un video, è una sorta di blocco in cui è possibile rientrare sia all'interno utilizzando la proprietà padding che all'esterno utilizzando margin .
Queste proprietà per i rientri sono scritte nei css in questo modo (un paragrafo è preso come esempio):
Invece del tag P, scrivi ovviamente il tuo elemento, per il quale verranno applicati i rientri.
Assicurati di comprendere e ricordare che per i parametri margine e riempimento, la costruzione dei rientri per ciascun lato è la stessa.
Cioè, abbiamo 4 valori in ogni trattino:
Valori del rientro.
In questo esempio, ho creato un margine in CSS in questo modo: ho scritto 20px in alto, 10px a sinistra e a destra (di solito sono uguali per la simmetria) e 30px in basso.
E per il riempimento, ho specificato il riempimento: 10px dall'alto, da sinistra e da destra e 14px dal basso.
Il valore del riempimento nelle proprietà margine e riempimento può essere ridotto, a condizione che abbiano lo stesso importo.
Dal mio esempio, la notazione abbreviata sarà già simile a questa:
Cioè, quando non c'è l'ultima voce numerica, in questo caso per il rientro a sinistra, il browser sostituisce automaticamente lo stesso valore del rientro a sinistra con il valore a destra.
E nel mio caso, i rientri a destra e a sinistra saranno 10px sia nel margine che nel riempimento.
E se hai gli stessi valori per i margini superiore e inferiore (ad esempio: 16px ), e gli stessi valori per i margini sinistro e destro (ad esempio: 20px ), allora la voce avrà un formato ancora più abbreviato modulo:
Di conseguenza, per l'indentazione CSS, la voce è identica a questa.
Applicazione dei singoli trattini: per ciascun lato separatamente.
Le seguenti proprietà a valore singolo vengono utilizzate per specificare un singolo rientro:
Proprietà di imbottitura per ciascun lato.
Allo stesso modo, le voci vengono scritte per i rientri interni, solo che è necessario sostituire margin con riempimento .
Ad esempio, hai tutti i rientri in CSS per tutte le immagini img.
Cioè (per chiarimenti) il margine ha i seguenti valori: top 10px , sinistra e destra: 20px ciascuno e bottom 14px .
E l'imbottitura è di 6px su tutti e 4 i lati.
Diciamo che decidi di mettere un'altra immagine sulla pagina, ma per questa vuoi cambiare solo il margine superiore e lasciare il resto così com'è. E per portare a termine questo compito, è sufficiente registrare una classe per questa immagine e aggiungere una voce aggiuntiva al CSS.
Di conseguenza, l'immagine che hai aggiunto con la classe verx prenderà tutto il riempimento specificato nel css per il tag img e modificherà solo il riempimento esterno per il lato superiore (nel nostro caso: 40px ).
Ho provato a rendere più dettagliata la descrizione dei rientri CSS, ma se hai domande, chiedile tramite i commenti.
