CSS Documentar, elementos de nível de bloco (bloco), elementos embutidos (embutidos). O Guia de autoridade de Reilly descobriu que o conceito de fluxo de documentos mencionado nele me tornou muito sensível Esse conceito é realmente importante. Se houver algum erro, é puramente normal. O fluxo de documentos divide a forma de cima para baixo em linhas e descarrega os elementos em cada linha em ordem da esquerda para a direita, que é o fluxo de documentos. Há mais algumas perguntas que não entendo 1. Como um elemento embutido, um dos três elementos básicos, qual é a principal diferença entre ele e elementos no nível do bloco? O que significa elementos embutidos? O que é um elemento de nível de bloco. O texto chinês do "Guia de autoridade do CSS" mostra que qualquer elemento visível que não é um elemento em nível de bloco é um elemento embutido. A característica de sua expressão é a forma de "Layout da linha". Por exemplo, quando definimos um fundo de borda do elemento embutido: 1px sólido #000 ;, é repetido em cada linha e haverá uma fina linha preta abaixo de cada linha. Se for um elemento em nível de bloco, as linhas pretas exibidas só aparecerão abaixo do bloco. Deixe -me dar um exemplo prático simples: por exemplo <div> eu amo CSS - 52css.com </div> Os elementos embutidos são geralmente baseados em elementos básicos semânticos. Os elementos embutidos podem acomodar apenas o texto ou outros elementos embutidos e o elemento em linha comum "A". Elemento de bloco elemento embutido Elemento variável elemento variável é um elemento de bloco ou um elemento embutido baseado no contexto.
Cada elemento não flutuante no nível do bloco ocupa uma linha, e o elemento flutuante flutua em uma extremidade da linha de acordo com os regulamentos.
Os elementos embutidos também não ocupam uma única linha.
Existem três situações que farão com que o elemento exista do fluxo de documentos, ou seja, posicionamento absoluto, posicionamento absoluto e fixo. .
O elemento flutuante não ocupa nenhum espaço normal de fluxo de documentos, e o posicionamento do elemento flutuante é baseado no fluxo normal de documentos e, em seguida, extrai do fluxo de documentos e se move para a esquerda ou direita o máximo possível. O conteúdo do texto envolverá o elemento flutuante. Quando um elemento é extraído do fluxo normal de documentos, outros elementos ainda no fluxo de documentos ignoram o elemento e preenchem seu espaço original.
A causa raiz dos conceitos flutuantes é a interpretação do navegador da teoria. Só posso dizer que muitas pessoas usam o IE como padrão, mas não é.
Com base no fluxo de documentos, podemos entender facilmente os seguintes padrões de posicionamento:
Posicionamento relativo, isto é, compensado em relação à posição do elemento no fluxo de documentos.
O posicionamento absoluto significa completamente destacado do fluxo de documentos e é deslocado e o posicionamento fixo em relação ao elemento pai mais próximo do valor não estático do atributo de posição, ou seja, completamente desapegado do fluxo de documentos e é deslocado em relação à viewport.
2. Como entender quando o atributo claro leva o valor certo?
Elementos como P, H1 ou Div são frequentemente chamados de elementos no nível do bloco, e esses elementos são exibidos como um conteúdo; isto é, "caixa em linha". (Você pode usar o Display = Block para converter elementos na linha em elementos do bloco. Display = No entanto significa que o elemento gerado não tem caixa e nem exibe elementos, nem ocupa espaço no documento)
R: A linha é um elemento dentro de uma linha e só pode ser colocada na linha;
B: Para ser franco, o elemento na linha é como uma palavra;
C: Elementos gerais no nível do bloco, como o parágrafo <p>, título <H1> <h2>…, list, <ul> <ol> <li>, tabela <table>, forma <form>, div <div> e Elementos do corpo como <body>. Os elementos embutidos são como: formulário elementos <input>, hiperlinks <a>, imagem <mg>, <pan> .....
D: O recurso distinto da invisibilidade no nível do bloco é que cada elemento no nível do bloco é exibido de uma nova linha e a invisibilidade subsequente também precisa ser exibida de outra linha.
E: <man> pertence a um elemento embutido na definição CSS, enquanto <div> é um elemento de nível de bloco.
Para aqueles que estudaram o CSS, você pode entendê -lo a princípio. Mas não é fácil para os novatos entenderem, então eu explico principalmente aos novatos mais familiares!
O uso da palavra contêiner facilitará a compreensão de sua existência e propósito. pequeno recipiente. <rpa> é um pequeno recipiente. Mas o que devo fazer se quiser colocar um pouco de tinta nela? É muito simples.
Quero usar o CSS para definir o estilo da letra C, para que possamos usar <span>.
<div> Eu amo CSS - <span> 52css.com </span> padrão w3c </div>
O elemento de bloco é geralmente um recipiente de outros elementos. .
Sem o efeito do CSS, os elementos do bloco serão organizados em ordem seguida todas as vezes. Com o CSS, podemos alterar o modo de layout padrão deste HTML e colocar os elementos do bloco na posição que você deseja. Em vez de iniciar outra linha estupidamente todas as vezes. Deve -se ressaltar que a tag de tabela também é um tipo de elemento de bloco. velocidade. No entanto, se um usuário comum clicar acidentalmente no botão de código -fonte da página Exibir, a diferença entre os dois será muito grande. O código -fonte da página de layout do CSS, projetado com base no conceito de boa reconstrução, pode pelo menos permitir que usuários comuns sem desenvolvimento da Web entendam rapidamente o conteúdo. Nessa perspectiva, o código de layout do CSS deve ter uma melhor experiência estética.
Você pode imaginar o elemento de contêiner de bloco Div como caixas ou, se você tocou com artigos de clip-on, será mais fácil entender. Primeiro, cortamos os artigos de que precisamos de vários jornais e revistas. Cada corte é um bloco. Em seguida, recortamos esses pedaços de papel em um novo pedaço de papel em branco, de acordo com nossas próprias intenções de layout. Isso formará suas próprias notícias únicas do Digest. Como extensão da tecnologia, o design do layout da Web segue o mesmo padrão. .
Elementos de bloco e elementos embutidos são conceitos na especificação HTML. A diferença básica entre os elementos do bloco e os elementos embutidos é que os elementos do bloco geralmente começam com novas linhas. No entanto, quando o controle CSS é adicionado, a diferença de atributo entre os elementos do bloco e os elementos embutidos não se tornará uma diferença. Por exemplo, podemos adicionar um elemento embutido citar ao atributo Display: Block, para que ele também possa ter atributos que começam a partir de uma nova linha sempre.
O conceito básico de um elemento variável é que ele precisa determinar se o elemento é um elemento de bloco ou um elemento embutido com base no relacionamento contextual. Os elementos variáveis ainda pertencem às duas categorias de elementos acima. Veja o texto completo para classificação geral de elementos.
Em relação ao nome chinês do elemento embutido, existem muitos elementos embutidos, elementos incorporados, elementos embutidos e elementos de entrada direta. Basicamente, não há tradução unificada, basta chamá -la do que você quiser. Além disso, quando se trata de elementos embutidos, pensaremos que há um atributo de exibição que é exibido: embutido;
* Endereço - Endereço * BlockQuote - Referência de Bloco * Centro - Alinhando Blocos no Levantamento * Dir - Lista de Diretórios * Div - O nível de bloco comumente usado é fácil e também é a tag principal do layout CSS * DL - Lista de Definição * Fieldset - Controle de formulário Grupo* Formulário - Formulário de Interação* H1 - Título grande* H2 - Legenda* H3 - Nível 3 Título* H4 - Nível 4 Título* H5 - Nível 5 Título* H6 - Nível 6 Título* HR - Divisor horizontal* ISIndex - Prompt de entrada
* Menu - Lista de menus * Noframes - Conteúdo opcional de enquadrões (Exiba esse conteúdo de bloco para navegadores que não suportam o quadro * Noscript - Conteúdo do script opcional (exiba esse conteúdo para navegadores que não suportam script)
* ol - classificar formulário * p - parágrafo * pré -formato texto * tabela - tabela * ul - lista não derrotada
* A - Anchor Point * ABBR - Abreviação * ACRILY - Primeira palavra * B - negrito (não recomendado)
* bdo - bidi substituir
* Big - Large Font * Br - Break Line * CITE - CITE * Código - Código do computador (necessário ao citar o código -fonte)
* DFN - Definir campos * em - enfatize * fontes - as configurações da fonte (não recomendadas)
* I - itálico * img - imagem * entrada - caixa de entrada * KBD - Definir texto do teclado * Label - etiqueta da tabela * Q - Referência curta * S - Marca média (não recomendada)
* SAMP - Definir Exemplo Código do computador * Selecione - Seleção do projeto * Pequeno - Texto da fonte pequena * Span - Comuns contêineres embutidos, defina blocos dentro do texto * Strike - Score médio * forte - Ênfase ousada * sub -subscript * sup - SuperScript * Textarea - caixa de entrada de texto de várias linhas * TT - Teletext * U - sublinhado * var - defina variáveis
* applet - java applet
* Botão - Botão * Del - Excluir texto * Iframe - quadro embutido
* INS - Texto inserido* mapa - bloco de imagem (mapa)
* objeto - objeto objeto* script - script do cliente