10. Modelo de caixa
O modelo de caixa CSS é essencialmente uma caixa que encapsula os elementos HTML circundantes, incluindo: margens, bordas, preenchimento e conteúdo real. Todos os elementos HTML podem ser considerados caixas.O modelo de caixa nos permite colocar elementos no espaço entre outros elementos e as bordas dos elementos circundantes. A largura real de um elemento é composta da largura e altura do conteúdo + margem interna de preenchimento + borda da borda + margem externa da margem.
A imagem abaixo ilustra o Box Model:
1. conteúdo : largura define a largura do conteúdo, altura define a altura do conteúdo.
2. borda: definir uma borda, o seguinte descreve várias maneiras de definir uma borda:
geralmente tente: borda: 10px pontilhado em vermelho; a saber, tamanho, linha, linha.
| linha | Explicação |
|---|---|
| pontilhado | Linha pontilhada |
| tracejadas | linha pontilhada |
| sólido | linha sólida |
Definir separadamente: borda inferior: amarelo sólido de 10px;
| Linha de fronteira | Explicação |
|---|---|
| borda superior | Linha de limite superior |
| borda inferior | Borda inferior |
| borda esquerda | Limite esquerdo |
| fronteira direita | Limite direito |
Configuração de divisão:
| Atributos | Posição da linha de fronteira | Posição da linha de fronteira | Posição da linha de fronteira | Posição da linha de fronteira | Posição da linha de fronteira |
|---|---|---|---|---|---|
| Estilo da linha de fronteira | topo | inferior | esquerda | direito | |
| Estilo da linha de fronteira | estilo | estilo border-top | estilo border-bottom | estilo borda esquerda | border-right-style |
| Estilo da linha de fronteira | cor | border-top-color | border-bottom-color | cor da borda esquerda | border-right-color |
| Estilo da linha de fronteira | largura | largura da borda superior | largura da borda inferior | borda esquerda largura | border-right-width |
3. preenchimento : a margem interna
A distância da fronteira ao conteúdo
Método de configuração: o
primeiro:
| Linha de fronteira | Explicação |
|---|---|
| tampo de enchimento | Margem superior |
| padding-right | Margem direita |
| bpadding-left | Margem esquerda |
| acolchoamento inferior | Margem direita |
O segundo tipo:
preenchimento: 50px; o
preenchimento circundante é 50px; o
terceiro tipo:
preenchimento: 50px 100px; o
preenchimento superior e inferior é 50px, o preenchimento esquerdo e direito é 100px. O
quarto tipo:
preenchimento: 10px 20px 30px 40px; a
margem superior é 10px A margem direita é 20px, a margem inferior é 30px e a margem esquerda é 40px.
4. Margem: a margem externa
Método de configuração: o
primeiro:
| Linha de fronteira | Explicação |
|---|---|
| margem superior | Margem superior |
| margem direita | Margem direita |
| margem esquerda | Margem esquerda |
| margem inferior | Margem direita |
O segundo tipo:
margem: 100px; as margens superior,
inferior, esquerda e direita são 100px; o
terceiro tipo:
margem: 50px 100px; as
margens superior e inferior são 50px, as margens esquerda e direita são 100px; o
terceiro tipo:
margem: 50px 100px 150px; a
margem superior é 50px, margens esquerda e direita de 100px, margem inferior de 150px.
Quarto:
margem: 50px 100px 150px 200px;
margem superior de 50px, margem direita de 100px, margem inferior de 150px, margem esquerda de 200px
Nota:
A margem na direção vertical se sobreporá e terá o valor máximo. Os elementos embutidos
são apenas as margens esquerda e direita, sem margem para cima e para baixo, a
largura e a altura não são ativadas para elementos embutidos
11. Antecedentes
| Nome do Atributo | Explicação |
|---|---|
| cor de fundo | cor de fundo |
| imagem de fundo | Imagem de fundo |
| fundo de repetição | Fundo de repetição |
| posição de fundo | Posição de fundo |
1. cor de fundo
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2. imagem de fundo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;height: 100px;
background-image: url(images/icon-r.png);
}
</style>
</head>
<body>
<div>
你好
</div>
</body>
</html>
Nota:
Não há repetição de imagem aqui. A imagem se repete no eixo xey do contêiner 100 * 100.
3. background-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
}
.div2 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: repeat-x;
}
.div3 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</body>
</html>
Observação:
o primeiro div aqui é definido como norepeat, ou seja, a imagem de plano de fundo é repetida apenas uma vez
no contêiner 100 100. O segundo div é definido como repeat-x, ou seja, o plano de fundo se repete no eixo x. O segundo div é definido como repeat-y, ou seja, o plano de fundo se repete no eixo y. A configuração padrão é não repetir o eixo xey do contêiner 100.
4. posição de fundo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: left;
background-color: #3B639F;
}
.div2 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: right top;
background-color: #55ffff;
}
.div3 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-position: center center;
background-color: #00ff7f;
}
.div4 {
width: 100px;
height: 100px;
background-image: url(images/icon-r.png);
background-repeat: no-repeat;
background-color: #ffff7f;
background-position: 10px 70px;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
<div class="div4">
div4
</div>
</body>
</html>
Observação:
a imagem de plano de fundo do primeiro div é definida para a esquerda na direção horizontal e centralizada por padrão na direção vertical.
A imagem de plano de fundo do segundo div é definida para a direita na direção horizontal, e
a imagem de plano de fundo do terceiro div é definida na direção vertical. A direção horizontal é centralizada e a direção vertical é centralizada
. A imagem de plano de fundo do quarto div é definida para ser 10 px da esquerda na direção horizontal e 70 px do topo na direção vertical.
5. Abreviação de
plano de fundo : plano de fundo: url dourado () sem repetição centro
cor centro endereço alinhamento horizontal repetido e alinhamento vertical
11. Três elementos e flutuador
Primeiro, explique que qualquer elemento em html pertence a um dos elementos embutidos, elementos de bloco ou blocos embutidos, e os atributos dos elementos podem ser alterados por meio da exibição em css. Aqui estão três elementos:
1. Elementos inline : os
comuns são: span a em ib em grande pequeno forte sub sup textarea u selecionar rótulo
Atributo padrão: display: inline;
regra: apenas as margens esquerda e direita podem ser definidas, não largura e altura e disposição horizontal da margem para cima e para baixo
2. Elementos de bloco: os
comuns são: p h1 ~ h6 div dl dd dt formulário hr ol ul li tabela
Atributos padrão: display: bloco;
regra: você pode definir a disposição vertical de largura, altura e margem
3. Elementos de bloco em linha:
comuns: img
Atributo padrão de entrada : display: inline-block;
regra: você pode definir a disposição horizontal de largura, altura e margem
Vamos falar sobre flutuação:
1. Método de configuração: float: left; ou float: right;
2. O resultado após a configuração de float:
- Tirará o elemento do fluxo do documento
- Tanto o elemento pai quanto o elemento irmão pensarão que o elemento ocupará sua posição sem armazenar o elemento irmão e o texto permanecerá em sua posição
- Vários elementos flutuantes serão organizados horizontalmente por padrão. Se a largura do elemento pai não couber, ele será quebrado
- Se os elementos filhos estão flutuando, a altura do elemento pai desapareceu
- O elemento embutido se tornará um elemento de bloco após flutuar
Como limpar o flutuador:
1. Defina manualmente uma altura
para o elemento pai 2. Defina um estouro: oculto para
o elemento pai 3. Defina o último elemento do elemento pai para não flutuar, além de limpar: ambos;
sobre flutuação, você frequentemente encontrará Portanto, aqui estará uma solução detalhada separada sobre flutuação.