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 :
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
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.
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.