Aprendizagem HTML (5): modelo de caixa CSS

1. Classificação dos Elementos

Antes de explicar o layout do CSS, precisamos conhecer alguns conhecimentos com antecedência.No CSS, os elementos de rótulo em html são divididos em três tipos diferentes: elementos de bloco, elementos inline (também chamados de elementos inline) e bloco inline Elemento

Os elementos comuns do bloco são:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

Os elementos inline comuns são:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

Os elementos comuns do bloco embutido são:

<img>、<input>

2. Classificação de elementos - elementos em nível de bloco

O que são elementos em nível de bloco? Em html <div>、 <p>、<h1>、<form>、<ul>e <li>é elementos de bloco. Configuração de exibição: o bloco exibe elementos como elementos no nível do bloco. O código a seguir é converter o elemento embutido a em um elemento de bloco, para que o elemento a tenha as características de um elemento de bloco.

a{display:block;}

Recursos do elemento em nível de bloco:

1. Cada elemento no nível do bloco inicia em uma nova linha e os elementos subseqüentes também iniciam em uma nova linha. (Verdadeiro autoritário, um elemento no nível do bloco em sua própria linha)

2. É possível definir a altura, largura, altura da linha e margens superior e inferior do elemento.

3. Se a largura do elemento não estiver configurada, será 100% de seu próprio contêiner pai (o mesmo que a largura do elemento pai), a menos que uma largura esteja definida.

3. Classificação dos elementos - elementos em linha

Em HTML, a <span>、<a>、<label>、 <strong>soma <em>é um elemento embutido típico (elemento embutido) (embutido). Obviamente, os elementos do bloco também podem ser definidos como elementos inline através da exibição do código: inline. O código a seguir é converter o elemento de bloco div em um elemento embutido, para que o elemento div tenha as características de um elemento embutido.

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

Recursos de elementos embutidos:

1. E outros elementos estão em uma linha;

2. A altura, largura e as margens superior e inferior do elemento não podem ser definidas;

3. A largura de um elemento é a largura do texto ou da imagem que ele contém e não pode ser alterada.

4. Classificação dos elementos - elementos do bloco em linha

elementos de bloco em linha (in-line) de bloco é também ter as características de elementos em linha, os elementos de bloco, o código display:inline-blocké definido como o elemento de linha elemento de bloco. (novo no css2.1), o <img>、<input>rótulo é esse rótulo de bloco embutido.

Características do elemento de bloco embutido:

1. E outros elementos estão em uma linha;

2. É possível definir a altura, largura, altura da linha e margens superior e inferior do elemento.

5. Modelo de caixa CSS

Endereço de visualização de vídeo

6. Modelo de caixa (1)

A borda do modelo da caixa é a linha em torno do conteúdo e do preenchimento.Você pode definir sua espessura, estilo e cor (três atributos da borda) para esta linha.

Por exemplo, o código a seguir é div para definir a espessura da borda como 2px, o estilo para sólido e a borda para vermelho:

div{
    border:2px  solid  red;
}

A descrição acima é a forma abreviada de código de borda, que pode ser escrita separadamente:

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

Nota:

1. Os estilos comuns para o estilo de borda são:

   tracejado | pontilhado | sólido.

2. A cor na cor da borda pode ser definida como cor hexadecimal, como:

   border-color: # 888; // Não se esqueça do número na frente.

3. A largura em largura da borda também pode ser definida como:

   fino | médio | grosso (mas não muito comum), o mais comum é usar pixels (px).

7. Modelo de caixa (2)

Agora há um problema, e se você quiser definir uma borda inferior apenas para o rótulo p e não definir o estilo da borda nos outros três lados? O estilo css permite definir o estilo para apenas uma direção da borda:

div{border-bottom:1px solid red;}

Você também pode usar o código a seguir para obter as outras três configurações de borda dos lados (superior, direito, esquerdo):

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

O resultado:

8. Modelo largura e altura da caixa

A largura e a altura do modelo da caixa são diferentes do que costumamos dizer sobre a largura e a altura do objeto.A largura e a altura definidas no CSS referem-se ao intervalo de conteúdo preenchido.

Portanto, a largura real de um elemento (a largura da caixa) = borda esquerda + borda esquerda + preenchimento esquerdo + largura do conteúdo + preenchimento direito + borda direita + borda direita + borda direita.

A altura dos elementos é a mesma.

Por exemplo:

código css:

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

Código HTML:

<body>
   <div>文本内容</div>
</body>

O comprimento real do elemento é: 10 px + 1 px + 20 px + 200 px + 20 px + 1 px + 10 px = 262 px , conforme mostrado abaixo: O

resultado:

9. Enchimento do modelo da caixa

É possível definir a distância entre o conteúdo do elemento e a borda, chamada "preenchimento". O preenchimento também pode ser dividido em cima, direita, baixo, esquerda (sentido horário) . O código a seguir:

div{padding:20px 10px 15px 30px;}

A ordem não deve ser confusa. O código acima pode ser escrito separadamente:

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

Se o preenchimento superior, direito, inferior e esquerdo tiver 10 px; você pode escrever

div{padding:10px;}

Se o preenchimento superior e inferior forem 10 px e esquerdo e direito 20, você poderá escrever:

div{padding:10px 20px;}

10. Limite do modelo de caixa

A distância entre um elemento e outros elementos pode ser definida usando margens. O limite também pode ser dividido em superior, direito, inferior e esquerdo. O código a seguir:

div{margin:20px 10px 15px 30px;}

Você também pode escrever separadamente:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

Se as bordas superior, inferior, direita e esquerda tiverem 10 px, você poderá escrever:

div{ margin:10px;}

Se as bordas superior e inferior forem 10px e esquerda e direita forem 20px, você poderá escrever:

div{ margin:10px 20px;}

Resumindo: a diferença entre preenchimento e margem, o preenchimento está na borda, a margem está fora da borda.