Dez notas de introdução ao CSS: modelo de caixa

Os componentes do modelo de caixa : borda, conteúdo, preenchimento e margens.Geralmente, no desenvolvimento real, as margens interna e externa serão apagadas no início e, em seguida, com base na situação real configurada.

Margem interna : controle a distância entre o conteúdo e a borda.
Como definir o preenchimento:

		padding-方位名词:像素值;

Regra abreviada da margem interna :
Insira a descrição da imagem aqui
Observação :
se a caixa interna não especificar uma largura, o preenchimento de configuração da caixa interna não abrirá a caixa externa

Margem : controle a distância entre as caixas. A sintaxe das margens externas é basicamente a mesma das margens internas

Aplicação das margens :
1. Faça a caixa horizontalmente centralizada no navegador, mas duas condições precisam ser atendidas:
a. A caixa deve ter uma largura (largura)
b. Defina as margens esquerda e direita como automáticas.

2. Faça elementos embutidos ou elementos de bloco embutidos centralizados horizontalmente: adicione alinhamento de texto: centro ao elemento pai

3. O problema de mesclar as margens externas:
a) A
Insira a descrição da imagem aqui
solução para mesclar as margens externas verticais de elementos de bloco adjacentes : defina apenas as margens externas para uma caixa.

b. Redução da margem vertical de elementos de bloco aninhados. Ou seja, para dois elementos de bloco pai-filho, o elemento pai tem uma margem superior, enquanto o elemento filho também tem uma margem superior. Neste momento, o elemento pai entrará em colapso com um maior margem.
Insira a descrição da imagem aqui
Solução :
1. Adicionar uma borda ao elemento pai. Se a borda afetar o efeito visual, ela pode ser definida como transparente (transperente).
2. Adicionar uma margem interna à caixa pai.
3. Adicionar estouro: oculto para o pai elemento. Este método não mudará. Tamanho da caixa

Escrita composta da borda :

      boder: 属性值1 属性值2 属性值3 (没有顺序)
      
      //若只想对上下左右中的一部分边框进行修改,写法如下:
       boder-方位名词: 属性值1 属性值2 属性值3 (没有顺序)

Mesclagem de bordas da tabela : colapso do boder; quando o valor da propriedade é recolhido, as bordas adjacentes serão mescladas automaticamente

Nota : Tamanho da caixa = tamanho real da caixa + tamanho da borda + tamanho da margem interna.

Insira a descrição da imagem aqui

Acho que você gosta

Origin blog.csdn.net/m0_52021758/article/details/113072265
Recomendado
Clasificación