Fluxo de documentos CSS, elementos de nível de bloco (bloco) e elementos inline (inline). Eu li muitos livros e muitos artigos antes. Tudo o que vi foi um conhecimento básico fragmentado de layout CSS, que é relativamente superficial. O'Reilly, descobri que o conceito de fluxo de documentos mencionado nele me deixou muito sensível. Infelizmente, o livro não explica o que é fluxo de documentos. Talvez o autor tenha pensado que era simples demais para valer a pena mencionar. É muito importante depois de entendê-lo, um monte de teorias de layout CSS se tornam fáceis de entender, e eu percebo a racionalidade do design CSS. Então, baseei minhas suposições e experimentos para encontrar uma explicação. Se houver algum erro, é completamente normal. .
fluxo de documentos
Divida o formulário em linhas de cima para baixo e organize os elementos em cada linha da esquerda para a direita, que é o fluxo do documento.
Cada elemento não flutuante no nível do bloco ocupa sua própria linha e os elementos flutuantes flutuam em uma extremidade da linha conforme necessário. Se a linha atual não couber, ela será flutuada em uma nova linha.
Os elementos embutidos não ocuparão uma linha Quase todos os elementos (incluindo elementos de nível de bloco, embutidos e de lista) podem gerar sublinhas para colocar subelementos.
Existem três situações que farão com que elementos existam fora do fluxo de documentos, nomeadamente flutuante, posicionamento absoluto e posicionamento fixo. Mas no IE, elementos flutuantes também existem no fluxo de documentos (o que me faz pensar que isso é razoável).
Os elementos flutuantes não ocupam nenhum espaço normal do fluxo de documentos e o posicionamento dos elementos flutuantes ainda é baseado no fluxo normal de documentos e, em seguida, extraídos do fluxo de documentos e movidos o máximo possível para a esquerda ou direita. O conteúdo do texto será agrupado em torno do elemento flutuante. Quando um elemento é extraído do fluxo de documento normal, outros elementos que ainda estão no fluxo de documento ignoram o elemento e preenchem seu espaço original.
O conceito confuso de flutuação é causado pela interpretação da teoria pelo navegador. Só se pode dizer que muitas pessoas usam o IE como padrão, mas na verdade não é.
Com base no fluxo de documentos, podemos compreender facilmente os seguintes padrões de posicionamento:
posicionamento relativo,
Ou seja, o elemento é deslocado em relação à sua posição no fluxo do documento, mas o espaço reservado original é mantido.
posicionamento absoluto,
Ou seja, ele é completamente separado do fluxo do documento e é deslocado em relação ao elemento pai mais próximo com um valor não estático do atributo position.
posicionamento fixo,
Ou seja, está completamente separado do fluxo do documento e deslocado em relação à janela de visualização.
Há mais algumas perguntas que não consigo resolver a seguir.
Como um dos três elementos básicos, qual é a principal diferença entre elementos inline e elementos de nível de bloco?
Como você entende quando a propriedade Clear assume o valor correto. Parece que a situação experimental é sempre inconsistente com a teoria.