Fluxo de documentos CSS e elementos de nível de bloco (bloco) e elementos inline (inline). Já li muitos livros e li muitos artigos antes. Tudo o que vi foi um conhecimento básico fragmentado de layout CSS, que é relativamente superficial. ' No "The Definitive Guide to CSS" de 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. Mas acho que esse conceito é realmente importante. Depois de entendê-lo, várias teorias de layout CSS se tornam fáceis de entender e eu percebo a racionalidade do design CSS. houver algum erro, é completamente normal
O fluxo do documento divide o formulário em linhas de cima para baixo e organiza 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, deslocamento em relação à posição do elemento no fluxo do documento, mas retém o espaço reservado original.
Posicionamento absoluto, ou seja, completamente fora do fluxo do documento, deslocamento e posicionamento fixo em relação ao elemento pai mais próximo com um valor não estático do atributo position Posicionamento absoluto, ou seja, completamente fora do fluxo do documento, deslocamento em relação ao. a janela de visualização.
Ainda há algumas questões que não entendo.
1. Como um dos três elementos básicos, qual é a principal diferença entre elementos inline e elementos de nível de bloco?
2. Como você entende quando o atributo Clear assume o valor correto. Parece que a situação experimental é sempre inconsistente com a teoria
. O que são elementos de nível de bloco.
O texto em chinês do "Guia definitivo de CSS" mostra: Qualquer elemento visível que não seja um elemento de nível de bloco é um elemento embutido. A característica de seu desempenho é a forma de “layout de linha”. O “layout de linha” aqui significa que sua forma de expressão é sempre exibida em linhas. Por exemplo, quando definimos um elemento embutido border-bottom:1px solid #000;, ele será repetido em cada linha e haverá uma linha preta fina abaixo de cada linha. Se for um elemento em nível de bloco, a linha preta exibida aparecerá apenas abaixo do bloco.
Elementos como p, h1 ou div são frequentemente chamados de elementos de nível de bloco e esses elementos são exibidos como um bloco de conteúdo. Elementos como Strong e span são chamados de elementos inline e seu conteúdo é exibido na linha, ou seja; , "caixa embutida". (Você pode usar display=block para converter elementos embutidos em elementos de bloco. display=none significa que o elemento gerado não possui nenhum quadro, não exibe o elemento nem ocupa espaço no documento)
R: Os elementos embutidos são elementos dentro de uma linha e só podem ser colocados dentro de uma linha. Os elementos em nível de bloco são apenas uma caixa de quatro quadrados e podem ser colocados em qualquer lugar da página;
B: Para ser franco, um elemento embutido é como uma palavra; um elemento em nível de bloco é como um parágrafo. Se não for definido de outra forma, ele aparecerá em sua própria linha.
C: Elementos gerais em nível de bloco, como parágrafo <p>, título <h1><h2>..., lista, <ul><ol><li>, tabela <table>, formulário <form>, DIV<div > e BODY <body> e outros elementos. Os elementos embutidos são como: elementos de formulário <input>, hiperlinks <a>, imagens <img>, <span>…..
D: A característica notável dos elementos de nível de bloco é que cada elemento de nível de bloco começa a ser exibido em uma nova linha e os elementos subsequentes também precisam ser exibidos em uma nova linha.
E: <span> é um elemento embutido na definição CSS, enquanto <div> é um elemento de nível de bloco.
Para aqueles que aprenderam CSS, podem entendê-lo imediatamente. Mas não é fácil de entender para os novatos, então quero principalmente torná-lo mais familiar para os novatos!
Usar a palavra container facilitará a compreensão visual de sua existência e finalidade. Os elementos inline são equivalentes a contêineres pequenos, enquanto <div> é equivalente a um contêiner grande. <span>É um recipiente pequeno. Desta forma você poderá ter uma impressão preliminar em sua mente se quisermos colocar um pouco de água em um recipiente grande. Mas e se eu também quiser colocar um pouco de tinta nele? É muito simples. Tiramos o recipiente pequeno, enchemos com tinta e colocamos na água limpa do recipiente grande.
Deixe-me dar um exemplo prático simples: por exemplo <div>Eu amo CSS - 52CSS.com</div>
Quero estilizar a letra c usando CSS, para que possamos usar <span>.
<div>Eu adoro CSS - <span>52CSS.com</span> Padrão W3C</div>
Um elemento de bloco é geralmente um elemento contêiner para outros elementos. Os elementos de bloco geralmente começam em uma nova linha. Um elemento de bloco comum é a tag de parágrafo 'P". O elemento de bloco "form" é. bastante especial, só pode ser usado para conter outros elementos de bloco.
Sem a ajuda de CSS, os elementos do bloco serão organizados uma linha por vez. Com CSS, podemos alterar o modo de layout padrão deste HTML e colocar os elementos do bloco onde desejar. Em vez de começar estupidamente uma nova linha todas as vezes. Deve-se ressaltar que a tag table também é um tipo de elemento de bloco O layout baseado em tabela e o layout baseado em CSS analisam esses dois layouts da perspectiva de usuários comuns (excluindo pessoas com deficiência visual, cegos, etc.), exceto para pessoas com deficiência visual, cegos, etc. velocidade de carregamento da página Exceto pela diferença, não há outra diferença. No entanto, se um usuário comum clicar inadvertidamente no botão visualizar o código-fonte da página, a diferença entre os dois será muito grande. O código-fonte da página de layout CSS projetado com base em bons conceitos de reconstrução pode, pelo menos, permitir que usuários comuns sem experiência em desenvolvimento web entendam rapidamente o conteúdo. Dessa perspectiva, o código de layout CSS deve ter uma experiência estética melhor.
Você pode pensar no elemento div do contêiner de bloco como caixas ou, se já brincou com o recorte, será mais fácil de entender. Primeiro recortamos os artigos necessários de vários jornais e revistas. Cada pedaço de conteúdo cortado é um bloco. Em seguida, colamos esses pedaços de papel em um novo pedaço de papel em branco de acordo com nossa intenção de layout. Isso formará seu próprio resumo exclusivo. Como extensão da tecnologia, o design do layout web segue o mesmo padrão. .Os
elementos inline são geralmente baseados em elementos básicos no nível semântico. Os elementos embutidos só podem conter texto ou outros elementos embutidos, e o elemento embutido comum "a" é.
Elemento de bloco (elemento de bloco) e elemento embutido (elemento embutido) são conceitos na especificação HTML. A diferença básica entre elementos de bloco e elementos inline é que os elementos de bloco geralmente começam em uma nova linha. Quando o controle CSS é adicionado, essa diferença de atributo entre elementos de bloco e elementos embutidos não se torna mais uma diferença. Por exemplo, podemos adicionar um atributo como display:block ao elemento inline cite, para que ele também tenha o atributo de iniciar sempre em uma nova linha.
O conceito básico de um elemento mutável é que ele precisa determinar se o elemento é um elemento de bloco ou um elemento embutido com base no contexto. Os elementos variáveis ainda pertencem às duas categorias de elementos acima. Uma vez que o contexto determina sua categoria, ele deve seguir as regras dos elementos de bloco ou elementos embutidos. Consulte o texto completo para classificação aproximada dos elementos.
Em relação ao nome chinês de elemento embutido, existem muitos tipos de elementos embutidos, elementos embutidos, elementos embutidos e elementos embutidos. Basicamente não existe uma tradução unificada, basta chamá-la do que quiser. Além disso, ao falar sobre elementos inline, pensaremos em um atributo de exibição chamado display:inline; esse atributo pode corrigir o famoso problema da borda flutuante dupla do IE.
elemento de bloco
* endereço - endereço * blockquote - referência de bloco * centro - bloco de alinhamento * dir - lista de diretórios * div - nível de bloco comumente usado, também o rótulo principal do layout CSS * dl - lista de definição * fieldset - grupo de controle de formulário * formulário - formulário de interação * h1 - Título * h2 - Subtítulo * h3 - Título de nível 3 * h4 - Título de nível 4 * h5 - Título de nível 5 * h6 - Título de nível 6 * hr - Linha divisória horizontal * isindex - prompt de entrada
* menu - lista de menu * noframes - conteúdo opcional de frames, (este conteúdo do bloco é exibido para navegadores que não suportam frames) * noscript - conteúdo de script opcional (este conteúdo é exibido para navegadores que não suportam script)
* ol - formulário classificado * p - parágrafo * texto pré - formatado * tabela - tabela * ul - elemento embutido de lista não classificada
(elemento embutido)
* a - ponto de ancoragem * abbr - abreviatura * sigla - primeira palavra * b - negrito (não recomendado)
* bdo - substituição de bidi
* grande - fonte grande * br - quebra de linha * citar - citar * código - código de computador (obrigatório ao citar o código-fonte)
* dfn - definir campos * em - enfatizar * font - configurações de fonte (não recomendado)
* i - itálico * img - imagem * entrada - caixa de entrada * kbd - definir texto do teclado * rótulo - rótulo da tabela * q - citação curta * s - sublinhado (não recomendado)
* samp - define código de computador de amostra * select - seleção de item * pequeno - texto em fonte pequena * span - contêiner embutido comumente usado, define blocos dentro do texto * strike - sublinhado * forte - ênfase em negrito * sub - subscrito * sup - sobrescrito * textarea - Caixa de entrada de texto multilinha * tt - Teletipo de texto * u - Sublinhado * var - Definir variáveis
Elementos variáveis Os elementos variáveis determinam se o elemento é um elemento de bloco ou um elemento embutido de acordo com o contexto.
* miniaplicativo - miniaplicativo java
* botão - botão * del - excluir texto * iframe - quadro embutido
*ins - texto inserido *map - bloco de imagem (mapa)
* objeto - objeto objeto * script - script do cliente