Contente
É meia-noite e aquela div em seu site ainda parece um baú de brinquedos de criança. Todos os elementos são uma bagunça e cada vez que você brinca com CSS exibição propriedade, eles se reorganizam em um pedaço de absurdo totalmente diferente.
Se você for como eu, provavelmente resolverá isso murmurando baixinho e se tornando consistentemente mais agressivo com o teclado. E embora essa estratégia tenha funcionado para mim antes, recentemente me propus a encontrar uma maneira melhor de compreender o exibição propriedade.
Acontece que o básico de exibição são muito mais simples do que eu pensava originalmente. Na verdade, eles usam os mesmos princípios de fazer uma mala. Eu vou cobrir display: block, bloco embutido e em linha. Se você já arrumou uma mala de maneira ordenada antes, verá o paralelo. Se você é o tipo de pessoa que quebra todas as suas roupas de uma maneira aleatória - bem, não há muito que eu possa fazer por você.
Nossa mala conterá três tipos de roupas:
- Delicada, como uma camisa de colarinho
- Camisetas que podem ser enroladas
- Meias ou cuecas que podem ser enfiadas nas aberturas
Para referência, se modelássemos a mala em HTML, ela ficaria assim:
div class = 'mala'> div class = 'delicado'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Os itens delicados no topo
Exibir: bloco é o padrão para a maioria dos elementos HTML. Isso significa que o elemento ocupa todo o espaço horizontal dentro de seu contêiner div. Se estiver próximo a outros elementos irmãos, ele iniciará uma nova linha, e não permitirá outros elementos em sua linha. É semelhante aos itens delicados que você coloca no topo da sua mala. São artigos delicados ou elegantes, como camisas de colarinho. Você não quer que eles fiquem enrugados, então certifique-se de que eles não sejam pressionados contra outras peças de roupa.
Isso traz à tona uma das partes mais difíceis de display: block. Notou como a camisa de colarinho não ocupa toda a largura da mala? Isso não significa que outros itens irão saltar para o seu nível. Digamos que esta camisa tenha 60 por cento da largura da mala; ainda impediria que outros elementos se juntassem a ele no nível superior.
É por isso que há uma borda laranja na imagem. UMA display: block O elemento adicionará automaticamente uma margem ao seu redor se não ocupar todo o espaço horizontal.
Camisetas bem embaladas
A maior parte de sua mala provavelmente está cheia com o resto de suas roupas para a viagem. Por uma questão de simplicidade, vamos reduzir para apenas camisetas. Há um grande debate na Internet sobre se dobrar ou enrolar é mais eficiente. Eu sou um tipo de pessoa dobrável.
De qualquer forma, para caber o máximo de itens, você alinha suas camisetas lado a lado. Isso é exatamente o que display: inline-block é destinado. Esses elementos podem sentar-se lado a lado na mesma linha, bem como ao lado de display: inline elementos
diferente display: inline elementos, um bloco embutido elemento irá mover para a próxima linha se não couber em seu conteúdo div ao lado do outro bloco embutido elementos Para que uma camiseta caia na próxima linha, você precisa cortá-la ao meio e usar a outra metade para iniciar uma nova linha. Inline-block os elementos não podem se dividir ao meio se não couberem em uma linha.
As meias que preenchem as lacunas
Volte para o HTML original e você notará que há uma meia div> entre as oito camisetas. Mas dê uma olhada na visão horizontal da mala à direita. Se houver uma meia div>, como pode terminar a linha do meio e começar a linha de baixo? Este é o propósito de display: inline!
A em linha elemento irá transbordar para a próxima linha se exceder a largura do div (desta forma é diferente de bloco embutido ou quadra) Desde nossas meias div está cheio de meias que são colocadas aleatoriamente em fendas, ele pode facilmente começar a preencher a lacuna do lado direito da linha do meio e transbordar para começar a linha de baixo.
Nenhuma meia precisará ser cortada ao meio para que isso aconteça. É por isso que eles podem se tornar em linha, enquanto as camisetas só podem ser bloco embutido. Se as camisetas na linha do meio ocupassem apenas 60 por cento da largura, as meias div> moveria para cima para preencher todo o espaço no resto da linha.
Boa Viagem
Este é o CSS final para nossa mala:
.delicate {display: block; largura: 60%; } .tshirt {display: inline-block; largura: 20%; } .socks {display: inline; }
Aqui estão alguns cenários alternativos para ilustrar os diferentes usos da tela. Se os delicados em cima tivessem display: inline-block, eles caberiam bem ao lado das camisetas. Algumas das camisetas subiriam para a linha de cima e o resto se ajustaria de acordo. Não haveria nenhum amortecedor confortável à esquerda e à direita da camisa de colarinho.
Se cada camiseta tivesse bloco de exibição, você teria uma pilha enorme de camisetas uma em cima da outra, uma por linha. Se as meias tivessem display: inline-block, todos eles se sentariam na fileira inferior, em vez de fluir entre as duas fileiras. Algumas camisetas seriam empurradas para outra fileira, formando uma quarta fileira. Haveria uma lacuna à direita da fileira do meio de camisetas.
Com o método que descrevi aqui, terminamos com uma mala bem embalada que faz o melhor uso do espaço disponível.
Este artigo apareceu originalmente em revista net edição 289; compre aqui!
