O atributo display é um dos atributos mais importantes em CSS. É usado principalmente para controlar o layout dos elementos. Por meio do atributo display, você pode definir se e como o elemento será exibido.
1. A função do atributo de exibição
1. O atributo display pode definir o tipo de exibição interna e externa do elemento.
(1) Tipo de display externo:
a. Os tipos de elementos de exibição externa incluem bloco, embutido, etc.
b. O tipo de exibição externa determinará o desempenho do elemento no layout fluido.
(2) Tipo de display interno:
Os tipos de exibição interna incluem layout flexível, layout de grade, layout fluido, etc.
O tipo de exibição interno de um elemento controla como seus filhos são dispostos.
2. Layout fluido (fluxo de documentos ou fluxo regular):
"Fluxo de documento" ou "layout fluido" é a forma como os elementos "bloco" e "inline" são exibidos na página antes de qualquer alteração ser feita no layout (por padrão).
Para simplificar e diretamente, é um método de composição que estipula como os elementos em nível de bloco e embutidos são digitados e exibidos na página.
(1) No layout de fluxo - método de layout de elemento em nível de bloco:
As caixas em nível de bloco são organizadas verticalmente em ordem, começando na parte superior do bloco que as contém.
A distância vertical entre caixas do mesmo nível será determinada pelo atributo “margem”.
O espaçamento vertical entre duas caixas adjacentes em nível de bloco será recolhido de acordo com o princípio de dobramento de margem.
(2) Em layout fluido - método de layout de elemento embutido:
As caixas serão organizadas horizontalmente em ordem começando no topo do bloco que as contém.
Somente margens horizontais, bordas e preenchimento são preservados.
As caixas podem ser alinhadas verticalmente de diferentes maneiras: inferior ou superior, ou alinhadas na parte inferior do texto
2. Tipo de exibição externa do elemento
Primeiro, splay especifica o tipo de exibição do elemento por meio dos seguintes valores de atributos
(1) nível de bloco de bloco
(2) bloco embutido em bloco
(3) embutido
2. Os tipos de exibição de elementos são divididos em: nível de bloco e inline, etc.
3. Os elementos inline (inline) são divididos em: elementos inline inline e elementos inline-block inline block
(1) elementos dibloco em nível de bloco
1. Os elementos comuns em nível de bloco são:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl>, etc.
2. Características dos elementos de nível de bloco:
(1) Linha exclusiva
(2) Você pode definir os atributos de largura e altura.
(3) Se a largura não for definida, a largura será padronizada como a largura da área de conteúdo do elemento pai.
(4) Qualquer tipo de elemento pode ser colocado em elementos de nível de bloco, mas outros elementos de bloco não podem ser colocados em tags de elementos de texto.
(5) As tags p e div não podem ser colocadas na tag p.
(6) As tags p e div não podem ser colocadas em tags h1-h6.
(2) elementos de bloco embutido de bloco embutido
1. Os seguintes elementos têm características de elementos de bloco embutidos:
<img>, elementos de formulário, <video>, <audio>, etc. Esses elementos são essencialmente chamados de elementos substituíveis (classificados como elementos inline)
2. Características dos elementos do bloco embutido:
(1) Os elementos do bloco embutido (ou embutido) adjacentes serão exibidos em uma linha. Se não puderem ser colocados, eles serão transferidos para outra linha.
(2) Haverá espaços em branco entre os elementos do bloco embutido adjacentes.
(3) Os atributos de largura e altura podem ser definidos. A largura padrão de um elemento é a largura de seu próprio conteúdo.
(3) elementos embutidos (inline)
1. Os elementos embutidos comuns incluem:
<a>, <strong>, <span>, <i>, <del>, etc.
2. Características dos elementos embutidos:
Os elementos embutidos adjacentes serão exibidos em uma linha. Se não couberem, serão exibidos em uma nova linha.
A configuração das propriedades de largura e altura é inválida. Sua largura e altura se expandem de acordo com o tamanho do seu conteúdo.
Somente texto ou outros elementos embutidos podem ser colocados dentro de elementos embutidos.
3. Nota:
A tag <a> não pode ser colocada dentro da tag <a>, mas os elementos de nível de bloco podem ser colocados dentro da tag <a>.
No desenvolvimento real, a tag <a> será convertida em um elemento de nível de bloco em alguns casos.
Comparação de três tipos de elementos
3. Conversão entre elementos embutidos e elementos de nível de bloco
Precisamos apenas adicionar o valor do atributo de exibição correspondente ao elemento correspondente para converter o elemento no tipo de elemento correspondente.
(1) Use display: block para converter elementos em elementos de nível de bloco.
Exemplo:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: nenhum;}</style></head><body><ahref=>link de programação dotcpp</a></body></html>Resultados em execução:
(2) Use display: inline para converter elementos em elementos embutidos. No entanto, existem poucas aplicações de conversão de elementos em elementos embutidos.
(3) Use display: inline-block para converter elementos em elementos de bloco inline;
4. Método de elemento oculto
Reabastecer:
(1) Valores de exibição diferentes de nenhum são elementos de exibição.
(2) visibilidade:visível é o elemento de exibição;
Exemplo:
O valor do atributo none of display pode ser usado para ocultar elementos. Ele tem uma função semelhante à visibilidade: hidden;. A diferença é que display: none ao ocultar o elemento, também ocultará a posição ocupada pelo elemento. display: none geralmente é usado em conjunto com JavaScript para ocultar ou mostrar um elemento.
<!DOCTYPEhtml><html><head><style>div{largura:350px;altura:100px;cor de fundo:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>Ocultar</button><script>functionchan ge_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style.display=;obj.innerHTML=ocultar;}else{box.style. display=none;obj.innerHTML=display;}}</script></body></html>Resultados em execução:
5. A diferença entre os dois métodos de ocultação
6. Remova o espaço em branco padrão dos elementos do bloco embutido
As lacunas são criadas por padrão entre os elementos do bloco embutido.
Razões para lacunas:
(1) Quando os elementos são formatados como elementos embutidos, os caracteres de espaço em branco (espaços, retornos de carro, avanços de linha, etc.) entre os elementos serão processados pelo navegador.
(2) De acordo com o método de processamento de espaço em branco (o padrão é normal, que mescla o excesso de espaço em branco), o retorno de carro e o avanço de linha no código HTML original são convertidos em um caractere de espaço em branco, de modo que aparecem lacunas entre os elementos.
(3) O espaçamento entre estes elementos mudará com o tamanho da fonte
Solução:
(1) Adicione o elemento pai e reescreva o tamanho da fonte do elemento filho ao mesmo tempo
O atributo font-size tem herança, então o elemento pai font-size:0 será herdado para o elemento filho span, e o elemento filho precisa redefinir o tamanho do tamanho da fonte.
(2) Adicione float ao elemento
Depois de adicionar float a um elemento, ele se separará do fluxo do documento. Quando a altura do elemento pai não for adicionada, haverá um problema de colapso de altura e o problema causado pelo float precisa ser resolvido.
(3) No intervalo entre as imagens, adicione display:block;
Após adicionar display:block, a imagem se torna um elemento de nível de bloco e ocupa uma linha exclusiva.