Fondo CSS
Proprietà inferiore
La proprietà inferiore viene utilizzata per definire il posizionamento di un elemento dalla base della pagina e definisce il divario tra la fine della pagina e l'elemento. Per definire la proprietà inferiore, utilizziamo la seguente sintassi:
Come possiamo vedere, la proprietà inferiore è specificata chiamando la parola chiave seguita da un valore che può variare in cinque diversi tipi che sono: auto, lunghezza, percentuale, iniziale e eredità. La proprietà inferiore influenzerà l'elemento solo quando la proprietà di posizione è impostata su cui si fissa, altrimenti non si applicherà all'elemento.
Metodo 01: utilizzando la parola chiave automatica per l'assegnazione della proprietà inferiore in un file HTML con l'aiuto di CSS in linea
In questo metodo, useremo la parola chiave automatica per assegnare la proprietà inferiore di un elemento in un file HTML. Questo allineerà l'elemento con la base della pagina del browser. Utilizzeremo il formato di stile CSS in linea in questo metodo per assegnare la proprietà inferiore a un elemento.
Nella sceneggiatura precedente, abbiamo fornito un'intestazione al corpo usando il tag H1 e anche alcuni CS in linea. Quindi abbiamo aperto un tag di paragrafo e, in questo tag, abbiamo aggiunto la posizione e la proprietà inferiore e li abbiamo impostati su "fissati" e "auto", rispettivamente. La proprietà fissa della posizione consente al fondo di creare un effetto sul tag paragrafo e regolarlo secondo il nostro browser. Ora salviamo questo file ed lo eseguiamo sul nostro browser per osservare l'effetto di questa proprietà.
Come possiamo vedere nello screenshot precedente, il paragrafo nel tag del corpo è presente tra la pagina dopo l'intestazione. Ciò è accaduto a causa della posizione e delle proprietà in basso.
Metodo 02: utilizzando i pixel per assegnare la proprietà inferiore in un file HTML con l'aiuto di CSS in linea
In questo approccio, assegneremo l'attributo inferiore di un elemento in un file HTML utilizzando il formato di lunghezza (valore in pixel). Questo farà regolare l'elemento con la parte inferiore della pagina del browser con l'aiuto della lunghezza data.
Abbiamo usato il tag "H1" e alcuni CSS in linea per dare al corpo un'intestazione nello script precedente. Quindi abbiamo aperto un tag di paragrafo e applicato la posizione e le proprietà in basso ad esso. La proprietà di posizione è stata quindi impostata su "fissata" e alla proprietà inferiore è stato assegnato un valore pixel di "25px."L'attributo fisso di posizione consente al fondo di avere un effetto sul tag paragrafo e di adattarlo in base alla lunghezza specificata e alla pagina del nostro browser. Ora salviamo questo file ed lo eseguiamo nel nostro browser per vedere come funziona questa proprietà.
Come possiamo vedere nello screenshot precedente, il paragrafo nel tag del corpo è presente nella parte inferiore della pagina dopo l'intestazione. Possiamo vedere che esiste un divario tra il paragrafo e la base della pagina perché la posizione e le proprietà in basso sono impostate per dargli una lunghezza di "25px".
Metodo 03: Utilizzo della proprietà inferiore con una "percentuale" per un elemento usando CSS in linea
In questo metodo, utilizzeremo il formato percentuale per impostare la proprietà inferiore di un elemento in un file HTML. Questo fa sì che l'elemento si adatta alla parte inferiore della pagina del browser utilizzando un valore percentuale. In questo metodo, aggiungeremo l'attributo inferiore a un elemento usando lo stile CSS in linea.
Nello script precedente, abbiamo utilizzato il tag "H1" e alcuni CS in linea per dare al corpo un'intestazione. Quindi abbiamo aperto un tag di paragrafo e impostato la sua posizione e la proprietà inferiore. La proprietà di posizione è stata quindi impostata su "fissata" e alla proprietà inferiore è stato dato un valore percentuale che è "30 percento."La proprietà fissa della posizione consente al fondo di influire sul tag paragrafo e modificarlo in base all'importo percentuale indicato e alla pagina del nostro browser. Ora salviamo questo file e lo apriamo nel nostro browser per verificare come funziona questa proprietà.
Come visto nell'esempio precedente, il paragrafo nel tag del corpo appare nella parte inferiore della pagina dopo l'intestazione. La posizione e gli attributi inferiori sono impostati su un valore percentuale del "30 percento", quindi c'è un divario tra il paragrafo e la parte inferiore della pagina.
Metodo 04: Utilizzo della parola chiave ereditaria per l'assegnazione della proprietà inferiore in un file HTML con l'aiuto di CSS in linea
In questo approccio, imposteremo l'attributo inferiore di un elemento in un file HTML utilizzando la parola chiave ereditaria. Ciò costringerà l'elemento ad regolare nella parte inferiore della pagina del browser utilizzando il valore della proprietà della funzione genitore più vicina. Usando lo stile CSS in linea, aggiungeremo la proprietà inferiore a un elemento in questo approccio.
Nello script precedente, abbiamo aperto un tag di paragrafo e impostato la sua posizione e la proprietà inferiore. Successivamente, la proprietà di posizione è stata impostata su "Fixed" e la proprietà inferiore è stata data la parola chiave "eredità."La proprietà fissa della posizione consente al fondo di influire sul tag paragrafo e modificarlo in base al valore della proprietà della principale funzione genitore più vicina e alla pagina del browser. Questo file verrà ora salvato e aperto nel nostro browser per vedere come funziona questa proprietà.
Il paragrafo nel tag del corpo appare vicino all'intestazione, come si vede nello snippet precedente. C'è un divario tra il paragrafo e l'intestazione perché è specificata la proprietà inferiore per fornire al paragrafo la funzione di proprietà della funzione genitore più vicina.
Metodo 05: utilizzando la parola chiave iniziale per l'assegnazione della proprietà inferiore in un file HTML con l'aiuto di CSS in linea
Useremo la parola chiave "iniziale" per impostare la proprietà inferiore di un elemento in un file HTML. Ciò costringerà l'elemento ad regolare nella parte inferiore della pagina del browser utilizzando le impostazioni predefinite del browser. In questo metodo, aggiungeremo l'attributo inferiore a un elemento usando lo stile CSS in linea.
Abbiamo aperto un tag di paragrafo e impostato la sua posizione e la proprietà inferiore come mostrato nello script sopra. La proprietà di posizione è stata quindi impostata su "fissata" e la proprietà inferiore ha ricevuto la parola chiave "iniziale."L'attributo fisso di posizione consente al fondo di influire sul tag paragrafo e modificarlo in base alle impostazioni predefinite del browser. Questo file è ora salvato e visualizzato nel nostro browser per dimostrare l'uso di questa funzione.
Come osservato nello snippet precedente, il paragrafo nel tag del corpo è vicino all'intestazione. Poiché la proprietà inferiore è specificata per modificare il paragrafo alle impostazioni predefinite del nostro browser, esiste un divario tra il paragrafo e l'intestazione.
Conclusione
La proprietà inferiore di CSS è stata affrontata in questo articolo. La proprietà inferiore è inclusa in un sottogruppo di proprietà di posizione come sinistra, destra e superiore, e fa affidamento sulla proprietà di posizione, come abbiamo spiegato. Abbiamo implementato questo concetto con variazioni nel formato del valore utilizzando Notepad ++ per modificare il file HTML.