Propriedade de largura em CSS explicou

A propriedade de largura ajusta a largura de um elemento esticando na direção horizontal (dentro do preenchimento). A propriedade de largura está ligada ao preenchimento, fronteira e margem, mas não os afeta nem é alterada por estes. Os elementos do bloco obtêm a largura de acordo com a largura da página; No entanto, a propriedade de largura permite ajustar a largura conforme o requisito.

Este guia descritivo fornece o trabalho e o uso da propriedade de largura no CSS. O funcionamento da propriedade de largura é guiado pela sintaxe que está sendo usada e vários exemplos são citados para ilustrar o uso da propriedade de largura.

Como a propriedade de largura funciona no CSS

A largura de um elemento pode ser definida usando a sintaxe escrita abaixo.

seletor width: value;

O seletor pode ser qualquer elemento ou pode se referir à classe CSS na folha de estilo. O valor da largura pode ser definido em várias unidades de medição declaradas abaixo:

• Comprimento: o valor é definido em px, em. O valor de EM varia de acordo com o conjunto de tamanho padrão para o elemento pai. Por exemplo, se o tamanho padrão for definido como 15px, ele seria contado como 1em e, mantendo o padrão para 15px, o valor do tamanho 2EM seria equivalente a 30px.
• Auto: os navegadores ajustam o valor automaticamente
• Porcentagem ( %): o valor (em %) se associa à largura do elemento pai. Por exemplo, o valor de 50% ajustaria a largura a 50% (do elemento pai ou no qual o elemento direcionado está contido).
• Herito: o valor da largura do elemento pai é buscado
• Inicial: o valor da largura padrão é usado

O funcionamento da propriedade de largura no CSS depende principalmente da unidade de medição que está sendo usada.

Como usar a propriedade de largura no CSS

Esta seção fornece vários exemplos que demonstram a funcionalidade da propriedade de largura no CSS.

Exemplo 1: Usando a propriedade de largura com comprimento/porcentagem

Este exemplo explica o uso da propriedade de largura com várias medidas de comprimento e porcentagem. O código apresentado abaixo se refere a este exemplo:

Ajustando a largura

Largura em px

Largura em Em

Largura em %

A descrição do código é fornecida abaixo:

• Três classes CSS são criadas denominadas "px", "em" e "por"
• O "PX", "EM" e "PER" usa PX, EM e %, respectivamente, para medição de largura
• Essas três classes são usadas em três parágrafos para demonstrar seu uso

A imagem do código é fornecida abaixo

Saída:

Exemplo 2: Usando a largura com valores iniciais, herdados e automóveis

Os valores iniciais, herdados e automóveis são usados ​​neste exemplo para alterar a largura do elemento. Para fazer isso, o código a seguir é exercitado:

Ajustando a largura com valores automático/inicial/herdado

largura inicial

largura herdada

largura automática

O código é descrito como

• Três aulas de CSS são feitas denominadas "iniciais", "herdadas" e "automóveis"
• Essas classes são usadas em três parágrafos representando os valores "iniciais", "herdados" e "automóveis" de largura
• Uma div é estilizada com 50% de largura e a cor de fundo que seria usada como pai em um parágrafo (que está sendo usado com a classe CSS herdada)

A imagem do código é mostrada abaixo

Saída:

A partir da saída, observa -se que a largura do segundo parágrafo é herdada da div (cuja largura é 50%) e, portanto, o parágrafo seria limitado aos 50% do elemento pai (div).

Exemplo 3: Usando a largura com largura máxima e largura

A largura máxima e a largura de min de minúsculas define o limite superior e inferior de largura, respectivamente. Se a propriedade de largura for usada com largura de min de largura/max, há chances de que o resultado possa não. O valor da largura é possível ser comprometido em uma das seguintes condições:

• se largura < max-width then value of max-width will be used and
• se largura < min-width then the width would be set according to the min-width value

Vamos praticá -lo usando o código escrito abaixo.

Usando largura com largura de minima e largura

Largura com largura de minúscula

largura com largura máxima

A descrição do código é fornecida abaixo

• Duas aulas de CSS são criadas denominadas "Min" e "Max" que usa largura com largura de minúscula e largura com max largura
• Os valores de largura nas classes “min” e “max” são de 25% e 75%, respectivamente, enquanto a largura da min de 75% e a largura máxima é de 50%
• Essas classes CSS são usadas em dois parágrafos

A imagem do editor de código é mostrada abaixo:

Saída:

A partir da saída acima, a largura é influenciada pela largura e largura máxima. Portanto, sugere -se que a largura deve ser usada separadamente, caso contrário a propriedade pode resultar em saída estranha.

Conclusão

A propriedade de largura no CSS é usada para ajustar a largura (comprimento horizontal) do elemento. Ele faz a conexão com o preenchimento, borda e margens de um elemento. No entanto, nem largura nem preenchimento/margem/borda se afetam. Este artigo fornece o trabalho e o uso da propriedade de largura no CSS. A propriedade de largura pode ser influenciada pela propriedade máxima e pela altura mínima do CSS. Portanto, é recomendável usar a propriedade de largura, mantendo a largura máxima e a largura da minúscula. Além disso, demonstramos exemplos que usam a largura e a propriedade Max/Min-Width no CSS.