CSS Bottom
Propriedade inferior
A propriedade inferior é usada para definir o posicionamento de um elemento da base da página e define o espaço entre o final da página e o elemento. Para definir a propriedade inferior, usamos a seguinte sintaxe:
Como podemos ver, a propriedade inferior é especificada chamando a palavra -chave seguida por um valor que pode variar em cinco tipos diferentes que são: automático, comprimento, porcentagem, inicial e herdar. A propriedade inferior afetará apenas o elemento quando a propriedade de posição estiver definida para corrigir, caso contrário, não se aplicará ao elemento.
Método 01: Usando a palavra -chave automática para atribuir a propriedade inferior em um arquivo HTML com a ajuda de CSS embutido
Neste método, usaremos a palavra -chave automática para atribuir a propriedade inferior de um elemento em um arquivo html. Isso alinhará o elemento com a base da página do navegador. Usaremos o formato de estilo CSS embutido neste método para atribuir a propriedade inferior a um elemento.
No script anterior, fornecemos um caminho para o corpo usando a tag H1 e alguns CSs embutidos também. Em seguida, abrimos uma etiqueta de parágrafo e, nesta tag, adicionamos a posição e a propriedade inferior e as configuramos como "corrigidas" e "Auto", respectivamente. A propriedade fixa de posição permite que o fundo crie um efeito na etiqueta do parágrafo e ajuste -a de acordo com o nosso navegador. Agora, salvamos este arquivo e o executamos em nosso navegador para observar o efeito desta propriedade.
Como podemos ver na captura de tela anterior, o parágrafo na etiqueta do corpo está presente entre a página após o título. Isso aconteceu por causa da posição e propriedades inferiores.
Método 02: Usando os pixels para atribuir a propriedade inferior em um arquivo HTML com a ajuda do CSS embutido
Nesta abordagem, atribuiremos o atributo inferior de um elemento em um arquivo html usando o formato de comprimento (valor em pixels). Isso fará com que o elemento ajuste com a parte inferior da página do navegador com a ajuda do comprimento dado.
Usamos a etiqueta "H1" e alguns CSs embutidos para dar ao corpo um título no script anterior. Em seguida, abrimos uma etiqueta de parágrafo e aplicamos a posição e as propriedades inferiores a ela. A propriedade de posição foi então definida como "fixa" e a propriedade inferior recebeu um valor de pixel de "25px.”O atributo fixo de posição permite que o fundo tenha um efeito na etiqueta do parágrafo e a adapte com base no comprimento especificado e na página do nosso navegador. Agora, salvamos este arquivo e o executamos em nosso navegador para ver como essa propriedade funciona.
Como podemos ver na captura de tela anterior, o parágrafo na etiqueta do corpo está presente na parte inferior da página após o título. Podemos ver que há uma lacuna entre o parágrafo e a base da página, porque a posição e as propriedades inferiores estão definidas para dar um comprimento de "25px".
Método 03: Usando a propriedade inferior com uma "porcentagem" para um elemento usando CSS embutido
Neste método, usaremos o formato percentual para definir a propriedade inferior de um elemento em um arquivo html. Isso faz com que o elemento se ajuste à parte inferior da página do navegador usando um valor percentual. Neste método, adicionaremos o atributo inferior a um elemento usando o estilo CSS embutido.
No script anterior, utilizamos a etiqueta "H1" e alguns CSs em linha para dar um título ao corpo. Em seguida, abrimos uma etiqueta de parágrafo e definimos sua posição e propriedade inferior. A propriedade de posição foi então definida como "fixa" e a propriedade inferior recebeu um valor percentual que é "30 %.”A propriedade fixa de posição permite que o fundo afete a etiqueta do parágrafo e a modifique com base no valor percentual fornecido e na página do nosso navegador. Agora salvamos este arquivo e o abrimos em nosso navegador para verificar como essa propriedade funciona.
Como visto no exemplo anterior, o parágrafo na etiqueta do corpo aparece na parte inferior da página após o cabeçalho. A posição e os atributos inferiores são definidos para um valor percentual de "30 %", para que haja uma lacuna entre o parágrafo e a parte inferior da página.
Método 04: Usando a palavra -chave herdeira para atribuir a propriedade inferior em um arquivo HTML com a ajuda do CSS embutido
Nesta abordagem, definiremos o atributo inferior de um elemento em um arquivo html usando a palavra -chave herdeira. Isso forçará o elemento a se ajustar à parte inferior da página do navegador, utilizando o valor da propriedade da função pai mais próxima. Usando o estilo CSS embutido, adicionaremos a propriedade inferior a um elemento nessa abordagem.
No script anterior, abrimos uma etiqueta de parágrafo e definimos sua posição e propriedade inferior. Depois disso, a propriedade de posição foi definida como "corrigida" e a propriedade inferior recebeu a palavra -chave "herdar.”A propriedade fixa de posição permite que o fundo afete a etiqueta do parágrafo e altere -a com base no valor da propriedade da função pai mais próxima e na página do navegador. Este arquivo agora será salvo e aberto em nosso navegador para ver como essa propriedade funciona.
O parágrafo na etiqueta do corpo aparece perto do cabeçalho, como visto no trecho anterior. Há uma lacuna entre o parágrafo e o cabeçalho, porque a propriedade inferior é especificada para fornecer ao parágrafo a função da propriedade da função pai mais próxima.
Método 05: Usando a palavra -chave inicial para atribuir a propriedade inferior em um arquivo HTML com a ajuda do CSS embutido
Usaremos a palavra -chave "inicial" para definir a propriedade inferior de um elemento em um arquivo html. Isso forçará o elemento a se ajustar à parte inferior da página do navegador usando as configurações padrão do navegador. Neste método, adicionaremos o atributo inferior a um elemento usando o estilo CSS embutido.
Abrimos uma etiqueta de parágrafo e definimos sua posição e propriedade inferior, como mostrado no script acima. A propriedade de posição foi então definida como "fixa" e a propriedade inferior recebeu a palavra -chave "inicial.”O atributo fixo de posição permite que o fundo afete a etiqueta do parágrafo e altere -a com base nas configurações padrão do navegador. Este arquivo agora é salvo e visualizado em nosso navegador para demonstrar o uso desse recurso.
Como observado no trecho anterior, o parágrafo na etiqueta do corpo está perto do cabeçalho. Como a propriedade inferior é especificada para modificar o parágrafo nas configurações padrão do nosso navegador, há uma lacuna entre o parágrafo e o cabeçalho.
Conclusão
A propriedade inferior do CSS foi abordada neste artigo. A propriedade inferior está incluída em um subgrupo de propriedades de posição, como esquerda, direita e superior, e depende da propriedade de posição como explicamos. Implementamos esse conceito com variações no formato do valor usando o Notepad ++ para editar o arquivo html.