1. Três formas de layout de página da web tradicional
A essência do layout de uma página da web: use CSS para colocar caixas e colocá-las nas posições correspondentes.
CSS fornece três métodos de layout tradicionais (simplificando, como as caixas são organizadas).
(1) Fluxo comum (fluxo padrão)
(2) Flutuante
(3) Posicionamento
Isso se refere apenas ao layout tradicional. Na verdade, existem alguns métodos de layout especiais e avançados.
2. Fluxo padrão (fluxo comum/fluxo de documentos)
O chamado fluxo padrão: as tags são organizadas de uma maneira padrão prescrita.
(1) Os elementos do nível do bloco ocuparão uma linha exclusiva e serão organizados de cima para baixo.
(2) Os elementos embutidos serão organizados da esquerda para a direita e serão automaticamente quebrados quando atingirem a borda do elemento pai.
Os itens acima são todos layouts de fluxo padrão. O que estudamos anteriormente é o fluxo padrão. O fluxo padrão é o método de layout mais básico.
Todos esses três métodos de layout são usados para colocar as caixas. Quando as caixas são colocadas na posição apropriada, o layout é concluído naturalmente.
Nota: No desenvolvimento real, uma página contém basicamente esses três métodos de layout (o terminal móvel aprenderá novos métodos de layout posteriormente).
3. Por que é necessária a flutuação?
Pergunta: Podemos alcançar facilmente os seguintes efeitos usando fluxos padrão?
1. Como organizar várias caixas de nível de bloco (divs) em uma linha horizontalmente?
Embora a conversão para elementos de bloco embutidos possa gerar uma linha de exibição, haverá um grande espaço em branco entre eles, o que é difícil de controlar.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Há uma lacuna no meio do bloco embutido</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></ head><body>< div>1</div><div>2</div><div>3</div></body></html>Resultados em execução:
2. Como alinhar duas caixas à esquerda e à direita?
Existem muitos efeitos de layout que não podem ser concluídos pelo fluxo padrão. Neste momento, a flutuação pode ser usada para completar o layout. Porque a flutuação pode alterar a disposição padrão dos rótulos dos elementos.
A aplicação mais típica de floats: permitir que vários elementos em nível de bloco sejam exibidos em uma linha.
A primeira regra do layout de página da web: vários elementos em nível de bloco organizados verticalmente procuram fluxo padrão, vários elementos em nível de bloco organizados horizontalmente procuram flutuação!
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Vários elementos em nível de bloco são organizados horizontalmente e flutuados</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head>< corpo ><div>1</div><div>2</div><div>3</div></body></html>Resultados em execução:
4. O que está flutuando?
A propriedade float é usada para criar uma caixa flutuante, movendo-a para o lado até que a borda esquerda ou direita toque a borda do bloco que a contém ou de outra caixa flutuante.
gramática:
Seletor {float: valor do atributo;}Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Documento</title><style>/*Rótulos flutuantes são alinhados na parte superior*//*Flutuante: organizados em uma linha, largura e altura entram em vigor - rótulos flutuantes têm as características de blocos embutidos*/.one{largura :100px;height :100px;background-color:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*Porque há flutuante, não pode ter efeito- A caixa não pode ser centralizada horizontalmente*/margin:0auto;}.três{largura:300px;altura:300px;background-color:orange;}</style></head><body>< div>um</div><div >dois</div><div>três</div></body></html>Resultados em execução:
