As propriedades de tamanho CSS referem-se às propriedades de largura e altura dos elementos. Embora seja muito simples, é uma habilidade que deve ser dominada. CSS fornece vários atributos como largura, altura, largura máxima, largura mínima, altura máxima e altura mínima para definir a largura e a altura dos elementos. Vamos apresentá-los brevemente a seguir.
1.altura
(1) Defina a altura do elemento: atributo height
Altura: propriedade especifica a altura de um elemento.
① Escopo e objetos de aplicação: Área de conteúdo padrão
Objetos aplicáveis: todos os elementos
elementos embutidos não substituídos, colunas de tabela, grupos de colunas
Escopo de aplicação: Por padrão, este atributo determina a altura da área de conteúdo.
② Altere o escopo de aplicação:
Se box-sizing estiver definido como border-box, esta propriedade determinará a altura da área da borda.
③ Não aplicável
Elementos embutidos não substituídos: este atributo é ignorado.
Elementos embutidos: não é possível definir a altura.
④ Substituição de valor de atributo
As propriedades min-height e max-height substituem a altura.
(2) Alto nível de gramática
altura: auto|comprimento|%|herdar;
Contém valores de atributos experimentais: [ <length> | <percentage> ] && [ border-box | content-box ] |
/*Valor da palavra-chaveKeywordvalue*/height:auto;/*Valor de comprimento<comprimento>valores*/height:120px;height:10em;/*Valor percentual<percentagem>valor*/height:75%;/*Palavra-chave global ValueGlobalvalues*/ altura: herdar; altura: inicial; altura: não definido;
2.largura
(1) Defina a largura do elemento: atributo width
① Área aplicável
Área de conteúdo: Por padrão, define a largura da área de conteúdo.
Não incluído: você pode adicionar preenchimento, bordas e margens fora da área de conteúdo.
Modifique a área aplicável: Mas se o tamanho da caixa estiver definido como border-box, ele define a largura da área da borda.
② Elementos aplicáveis
Todos os elementos, exceto os seguintes elementos
Elementos não aplicáveis: elementos embutidos não substituídos, linhas de tabela e grupos de linhas
Elementos embutidos não substituídos irão ignorar este atributo.
③ Capa
As propriedades min-width e max-width podem substituir a largura.
(2) Sintaxe de largura
largura: automático | comprimento| %|
Contém valores de atributos experimentais: [ <length> | <percentage> ] && [ border-box | content-box ] |
/*Valor de comprimento<comprimento>valores*/largura:300px;largura:25em;/*Valor percentual<percentagem>valor*/largura:75%;/*Valor da palavra-chave Valores-chave*/largura:25emborder-box;largura:75% caixa de conteúdo ;largura:conteúdo máximo;largura:conteúdo mínimo;largura:disponível;largura:conteúdo adequado;largura:auto;/*Valores globaisValores globais*/largura:herdar;largura:inicial;largura:não definido;
3. largura máxima e altura máxima
Os atributos max-width e max-height são usados para definir a largura máxima e a altura máxima da área de conteúdo do elemento, respectivamente. Quando as propriedades max-width e max-height são definidas, os valores reais das propriedades width e height serão menores ou iguais aos valores das propriedades max-width e max-height, independentemente do real valores das propriedades de largura ou altura. Os valores opcionais para as propriedades max-width e max-height são os seguintes:
Tomemos o atributo max-width como exemplo: (as características do atributo max-height são semelhantes)
(1) Quando o valor do atributo max-width for menor que o atributo width, o valor do atributo width será redefinido para o mesmo valor do atributo max-width;
(2) Quando o valor do atributo max-width for maior que width, o atributo max-width será ignorado;
(3) Quando o valor do atributo max-width for menor que min-width, o atributo max-width será ignorado.
4. largura mínima e altura mínima
Os atributos min-width e min-height são usados para definir a largura mínima e a altura mínima da área de conteúdo do elemento. Quando os atributos min-width e min-height são definidos, independentemente do valor real do atributo width ou height, os atributos de largura e altura Os valores reais serão maiores ou iguais aos valores das propriedades min-width e min-height. Os valores opcionais para as propriedades min-width e min-height são os seguintes:
Tomemos o atributo min-width como exemplo: (o atributo min-height tem características semelhantes)
(1) Quando o valor do atributo min-width for menor que a largura, o atributo min-width será ignorado;
(2) Quando o valor do atributo min-width for maior que a largura, o valor do atributo min-width será redefinido para o mesmo valor do atributo min-width;
(3) Quando o valor do atributo min-width for maior que max-width, o atributo max-width será ignorado.