1 Introdução ao CSS
CSS é a abreviatura de Cascading Style Sheets.
CSS também é uma linguagem de marcação, usada principalmente para definir o conteúdo do texto (fonte, tamanho, alinhamento, etc.), formato da imagem (largura e altura, estilo de borda,
margens, etc.) em páginas HTML, bem como o layout e estilo de exibição da aparência da página.
Para mais conteúdo CSS, consulte MDN: Clique para enviar
1.1 Especificações de sintaxe CSS
Todos os estilos estão incluídos em
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.2 Três recursos principais do CSS
CSS tem três características muito importantes: cascata, herança e prioridade.
1.2.1 Empilhamento
Se o mesmo seletor definir o mesmo estilo, um estilo substituirá (em cascata) o outro estilo conflitante. A cascata resolve principalmente
o problema do conflito de estilo.Princípio
da cascata:
- Os conflitos de estilo seguem o princípio da proximidade, sendo executado o estilo que estiver mais próximo da estrutura.
- Os estilos não entram em conflito ou se sobrepõem
1.2.2 Herança
Herança em CSS: as tags filhas herdarão alguns estilos da tag pai, como cor do texto e tamanho da fonte.
O uso adequado da herança pode simplificar o código e reduzir a complexidade dos estilos CSS.
Os elementos filhos podem herdar os estilos dos elementos pais (elementos de texto, fonte, linha no início desses elementos podem ser herdados, bem como o atributo de cor )
- herança de altura de linha
body {
font:12px/1.5 Microsoft YaHei；
}
- A altura da linha pode ou não seguir a unidade.
- Se o elemento filho não definir uma altura de linha, ele herdará a altura da linha do elemento pai, que é 1,5.
- Neste momento, a altura da linha do elemento filho é: tamanho do texto do elemento filho atual * 1,5
- altura da linha do corpo 1,5 A maior vantagem desta forma de escrever é que os subelementos internos podem ajustar automaticamente a altura da linha de acordo com seu próprio tamanho de texto.
1.2.3 Prioridade
Quando vários seletores são especificados para o mesmo elemento, a prioridade será gerada.
Se os seletores forem iguais, será realizado o cascateamento. Se os seletores forem diferentes, os seletores serão executados com base no peso do seletor.
- O peso é composto por 4 grupos de números, mas não haverá transporte.
- Pode-se entender que o seletor de classe é sempre maior que o seletor de elemento, o seletor de id é sempre maior que o seletor de classe e assim por diante...
- O julgamento do nível é da esquerda para a direita. Se o valor de um determinado dígito for o mesmo, o valor do próximo dígito será julgado.
- Um mnemônico simples: curinga e peso de herança é 0, seletor de tag é 1, seletor de classe (pseudoclasse) é 10, seletor de id é 100, folha de estilo inline é 1000
, !important é infinito. - O peso herdado é 0. Se o elemento não for selecionado diretamente, não importa quão alto seja o peso do elemento pai, o elemento filho receberá um peso 0.
Sobreposição de peso: Se for um seletor composto, o peso se sobreporá e precisará ser calculado.
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a: passe o mouse -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
2 seletores CSS
Os seletores são divididos em duas categorias principais 基础选择器: e复合选择器
2.1 Seletores básicos
O seletor básico é composto por um único seletor, incluindo: seletor de rótulo, seletor de classe, seletor de id e seletor curinga
2.1.1 Seletor de tags
O seletor de tags (seletor de elementos) refere-se ao uso de nomes de tags HTML como seletores, classificando-os de acordo com os nomes das tags e especificando um
estilo CSS unificado para um determinado tipo de tags na página.
标签名{
属性1: 属性值1;
属性2: 属性值2;
...
}
O seletor de tags pode selecionar todas as tags de um determinado tipo, como todas <div>as tags e todas <span>as tags.
Vantagens: Ele pode definir estilos de forma rápida e uniforme para etiquetas do mesmo tipo na página.
Desvantagens: Você não pode criar estilos diferenciados, só pode selecionar todas as tags atuais.
2.1.2 Seletor de Classe
Se você deseja selecionar tags diferentes de forma diferenciada ou selecionar uma ou várias tags individualmente, você pode usar um seletor de classe. O seletor de classe é representado pelo atributo class em HTML. Em CSS, o seletor de classe é exibido com um ponto "." .
.类名 {
属性1: 属性值1;
...
}
Vários nomes de classes podem ser escritos no atributo de classe do rótulo e vários nomes de classes devem ser separados por espaços.
2.1.3 seletor de ID
O seletor de id pode especificar um estilo específico para elementos HTML marcados com um id específico.
O elemento HTML usa o atributo id para definir o seletor de id, e o seletor de id em CSS é definido com "#".
#id名 {
属性1: 属性值1;
...
}
Nota: O atributo id pode aparecer apenas uma vez em cada documento HTML.
2.1.4 Seletor de curinga
Em CSS, o seletor curinga é definido com “*”, o que significa que todos os elementos (tags) da página estão selecionados.
* {
属性1: 属性值1;
...
}
2.1.5 Resumo dos seletores básicos
2.2 Seletor composto
Os seletores compostos comumente usados incluem: seletores descendentes, subseletores, seletores de união, seletores de pseudoclasse, etc.
2.2.1 Seletores descendentes
O seletor descendente, também conhecido como seletor contendo, pode selecionar elementos filhos dentro do elemento pai. A forma de escrever é escrever a etiqueta externa na frente e a etiqueta interna atrás
, separadas por espaços. Quando as tags são aninhadas, a tag interna se torna descendente da tag externa.
元素1 元素2 { 样式声明 }
- O elemento 1 e o elemento 2 são separados por um espaço.
- O elemento 1 é o pai, o elemento 2 é o filho e o elemento 2 é finalmente selecionado.
- O elemento 2 pode ser filho, neto, etc., desde que seja descendente do elemento 1
- O Elemento 1 e o Elemento 2 podem ser qualquer seletor básico
2.2.2 Subseletor
Os seletores de elementos filhos (seletores filhos) só podem selecionar elementos que sejam os filhos mais recentes de um elemento. O entendimento simples é escolher o elemento filho.
元素1 > 元素2 { 样式声明 }
- O elemento 1 e o elemento 2 são separados por um sinal de maior que.
- O elemento 1 é o pai, o elemento 2 é o filho e o elemento 2 é finalmente selecionado.
- O Elemento 2 deve ser um filho biológico, e seus netos e bisnetos não estão sob seu controle.Ele também pode ser chamado de seletor de filho biológico.
2.2.3 Seletor de união
O seletor de união é composto por seletores conectados por vírgulas inglesas (,).Qualquer forma de seletor pode ser usada como parte do seletor de união.
元素1,元素2 { 样式声明 }
2.2.4 Seletor de pseudoclasse
Seletores de pseudoclasse são usados para adicionar efeitos especiais a determinados seletores, como adicionar efeitos especiais a links ou selecionar o primeiro ou enésimo elemento.
A maior característica de escrever seletores de pseudoclasse é que eles são expressos por dois pontos (:), como :hover e :first-child.
2.2.4.1 Seletor de pseudoclasse de link
- Para garantir a eficácia, declare: link-:visited-:hover-:active na ordem de LVHA.
- Como um link possui um estilo padrão no navegador, precisamos especificar um estilo separado para o link no trabalho real.
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
2.2.4.2: seletor de pseudoclasse de foco
O seletor de pseudoclasse :focus é usado para selecionar o elemento do formulário em foco.
O foco é o cursor, que geralmente pode <input>ser obtido por elementos de formulário, portanto este seletor é direcionado principalmente a elementos de formulário.
input:focus {
background-color:yellow;
}
2.2.5 Resumo dos seletores compostos
3 propriedades de fonte CSS
As propriedades de fontes CSS são usadas para definir família de fontes, tamanho, espessura e estilo de texto (como itálico).
3.1 Família de fontes
CSS usa a propriedade font-family para definir a família de fontes do texto.
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
As fontes mais comuns: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
3.2 Tamanho da fonte
CSS usa a propriedade font-size para definir o tamanho da fonte.
p {
font-size: 20px;
}
Diferentes navegadores podem exibir diferentes tamanhos de fonte por padrão. O tamanho de texto padrão do Google Chrome é 16px.
3.3 Peso da fonte
CSS usa a propriedade font-weight para definir o peso das fontes de texto.
p {
font-weight: bold;
}
3.4 Estilo de texto
CSS usa a propriedade font-style para estilizar o texto.
p {
font-style: normal;
}
3.5 Propriedades compostas de fontes
body {
font: font-style font-weight font-size/line-height font-family;
}
Ao usar o atributo font, ele deve ser escrito na ordem no formato de sintaxe acima. A ordem não pode ser alterada e cada atributo é separado por um espaço.
Os atributos que não precisam ser definidos podem ser omitidos (use o padrão valor), mas o tamanho da fonte e a família da fonte devem ser mantidos. atributo, caso contrário, o atributo da fonte não terá efeito
3.6 Resumo dos atributos de fonte
4 atributos de texto
A propriedade Texto CSS define a aparência do texto, como cor do texto, alinhamento do texto, decoração do texto, recuo do texto, espaçamento entre linhas, etc.
4.1 Cor do texto
O atributo color é usado para definir a cor do texto.
div {
color: red;
}
4.2 Alinhar texto
O atributo text-align é usado para definir o alinhamento horizontal do conteúdo do texto dentro de um elemento.
div {
text-align: center;
}
4.3 Decorando texto
O atributo text-decoration especifica as decorações adicionadas ao texto. Você pode adicionar sublinhado, tachado, sobreposto, etc. ao texto.
div {
text-decoration：underline；
}
4.4 Recuo de texto
O atributo text-indent é usado para especificar o recuo da primeira linha do texto, geralmente a primeira linha de um parágrafo.
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
em é uma unidade relativa, que é o tamanho de um texto do elemento atual (tamanho da fonte).Se o elemento atual não definir um tamanho, será
um tamanho de texto do elemento pai.
4.5 Espaçamento entre linhas
A propriedade line-height é usada para definir a distância entre as linhas (altura da linha). Você pode controlar a distância entre as linhas do texto.
p {
line-height: 26px;
}
4.6 Resumo dos atributos de texto
5 métodos de introdução de CSS
De acordo com o local onde os estilos CSS são escritos (ou como são introduzidos), as folhas de estilo CSS podem ser divididas em três categorias principais:
- Folhas de estilo embutidas (inline)
- Folha de estilo interna (incorporada)
- Folha de estilo externa (vinculada)
引入外部样式表：
<link rel="stylesheet" href="css文件路径">
6 modos de exibição de elementos CSS
Ele pode organizar melhor a página da Web. O modo de exibição de elementos é a forma como os elementos (rótulos) são exibidos. Por exemplo, eles <div>ocupam uma linha sozinhos e, por exemplo, vários elementos podem ser colocados em uma linha <span>.
Os elementos HTML são geralmente divididos em dois tipos: elementos de bloco e elementos embutidos.
6.1 Elementos de bloco
Os elementos de bloco comuns incluem <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>etc., entre os quais <div>a tag é o elemento de bloco mais típico.
Características dos elementos de nível de bloco:
① Ocupar uma linha.
② Altura, largura, margens e preenchimento podem ser controlados.
③ A largura padrão é 100% do contêiner (largura pai).
④ É um contêiner e uma caixa, que pode conter elementos de linha ou de bloco.
Perceber :
- Elementos em nível de bloco não podem ser usados em elementos de tipo texto.
<p>As tags são usadas principalmente para armazenar texto, portanto,<p>elementos de nível de bloco não podem ser colocados dentro delas, especialmente<div>- Da mesma forma,
<h1>~<h6>etc. são todas tags de nível de bloco de texto e outros elementos de nível de bloco não podem ser colocados dentro delas.
6.2 Elementos embutidos
Elementos embutidos comuns incluem <a>, <strong>, <b>, , <em>, <i>, <del>, <s>, <ins>, <u>etc. <span>Entre eles,
<span>a tag é o elemento embutido mais típico. Em alguns lugares, os elementos embutidos também são chamados de elementos embutidos.
Características dos elementos embutidos:
① Os elementos embutidos adjacentes estão em uma linha e mais de um pode ser exibido em uma linha.
② A configuração direta de altura e largura é inválida.
③ A largura padrão é a largura do seu próprio conteúdo.
④ Os elementos embutidos só podem acomodar texto ou outros elementos embutidos.
Perceber:
- Não é possível colocar mais links dentro do link
- Os elementos de nível de bloco podem ser colocados em links especiais
<a>, mas<a>é mais seguro convertê-los para o modo de nível de bloco.
6.3 Elementos de bloco embutidos
Existem várias tags especiais em elementos inline - <img />, <input />, <td>, que possuem as características de elementos de bloco e elementos inline.
Algumas fontes os chamam de elementos de bloco embutidos.
Características dos elementos do bloco embutido:
① Na mesma linha dos elementos embutidos adjacentes (blocos embutidos), mas haverá um espaço em branco entre eles. Uma linha pode exibir vários elementos (características dos elementos embutidos).
② A largura padrão é a largura do seu próprio conteúdo (características dos elementos embutidos).
③ Altura, altura da linha, margens e preenchimento podem ser controlados (características do elemento no nível do bloco).
6.4 Resumo dos modos de exibição dos elementos
6.5 Conversão do modo de exibição do elemento
Em casos especiais, é necessária a conversão do modo de elemento.Entendimento simples: os elementos de um modo precisam das características de outro modo
, como querer aumentar <a>o alcance de disparo de um link.
- Converter em elemento de bloco: display:block;
- Converter para elemento embutido: display:inline;
- Converter para bloco embutido: display: bloco embutido;
7 Fundo CSS
As propriedades de fundo podem definir a cor de fundo, imagem de fundo, ladrilho de fundo, posição da imagem de fundo, fixação da imagem de fundo, etc.
7.1 Cor de fundo
A propriedade background-color define a cor de fundo do elemento.
background-color:颜色值;
Geralmente,o valor padrão da cor de fundo de um elemento é transparente.Você também pode especificar manualmente a cor de fundo como transparente.
background-color:transparent;
7.2 Imagem de fundo
O atributo background-image descreve a imagem de fundo do elemento. No desenvolvimento atual, é comum usar logotipos ou algumas pequenas imagens decorativas ou
imagens de fundo grandes. A vantagem é que é muito fácil controlar a posição. (Sprites também são um cenário de uso)
background-image : none | url (url)
Nota : Não se esqueça de adicionar a url ao endereço atrás da imagem de fundo e não adicione aspas ao caminho interno.
7.3 Ladrilhos de fundo
Se precisar colocar a imagem de plano de fundo lado a lado na página HTML, você pode usar o atributo background-repeat.
background-repeat: repeat | no-repeat | repeat-x | repeat-y
7.4 Localização da imagem de fundo
Use a propriedade background-position para alterar a posição da imagem no plano de fundo.
background-position: x y;
- O parâmetro é um substantivo direcional.
Se os dois valores especificados forem substantivos direcionais, a ordem dos dois valores não tem nada a ver com isso. Por exemplo, canto superior esquerdo e canto superior esquerdo têm o mesmo efeito
. Se apenas um substantivo direcional for especificado e o outro valor for omitido, o segundo valor será o padrão. alinhamento central - O parâmetro é uma unidade exata.
Se o valor do parâmetro for uma coordenada exata, o primeiro deverá ser a coordenada x e o segundo deverá ser a coordenada y
. Se apenas um valor for especificado, o valor deverá ser x coordenada e a outra é centralizada verticalmente por padrão. - O parâmetro é uma unidade mista.
Se os dois valores especificados forem uma mistura de unidades precisas e substantivos azimutais, o primeiro valor será a coordenada x e o segundo valor será a coordenada y.
7.5 Fixação de imagem de fundo (anexo de fundo)
A propriedade background-attachment define se a imagem de fundo é fixa ou rola com o resto da página.
background-attachment pode criar efeito de rolagem paralaxe posteriormente.
background-attachment : scroll | fixed
7.6 Método de escrita composta em segundo plano
Para simplificar o código do atributo background, podemos mesclar esses atributos no mesmo atributo background. Isso economiza a quantidade de código.
Ao usar atributos abreviados, não há uma ordem de escrita específica. A ordem geralmente aceita é: plano de
fundo: cor de fundo endereço da imagem de fundo bloco de fundo imagem de fundo rolagem posição da imagem de fundo;
background: transparent url(image.jpg) repeat-y fixed top ;
7.7 Cor de fundo translúcida
CSS3 fornece um efeito de cor de fundo translúcido.
background: rgba(0, 0, 0, 0.3);
- O último parâmetro é a transparência alfa, a faixa de valores está entre 0 e 1
- Estamos acostumados a omitir o 0 em 0.3 e escrevê-lo como plano de fundo: rgba(0, 0, 0, .3);
- Nota: A translucidez do fundo significa que o fundo da caixa é translúcido e o conteúdo dentro da caixa não é afetado.
- Novos atributos CSS3 são suportados apenas por navegadores IE9+
7.8 Resumo do histórico
Modelo de 8 caixas
Processo de layout de página da web:
- Primeiro prepare os elementos relevantes da página web, que são basicamente caixas.
- Use CSS para definir o estilo da caixa e coloque-a na posição correspondente.
- Preencha a caixa com conteúdo.
A essência do layout de uma página da web é usar CSS para colocar caixas.
O chamado modelo de caixa: O elemento de layout na página HTML é considerado uma caixa retangular, que é um contêiner para armazenar conteúdo.
O modelo de caixa CSS é essencialmente uma caixa que encapsula os elementos HTML circundantes, incluindo: borda, margem, preenchimento e conteúdo real.
8.1 Fronteira
border pode definir a borda de um elemento. A borda consiste em três partes: largura da borda (espessura), estilo da borda e cor da borda.
border : border-width || border-style || border-color
O estilo de borda border-style pode ser definido com os seguintes valores:
- none: sem borda, ou seja, ignora a largura de todas as bordas (valor padrão)
- sólido: A borda é uma única linha sólida (a mais comumente usada)
- tracejado: a borda é pontilhada
- pontilhada: a borda é uma linha pontilhada
Abreviatura da fronteira:
border: 1px solid red; 没有顺序
Como escrever bordas separadas:
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
8.1.1 Bordas finas para tabelas
A propriedade border-collapse controla como o navegador desenha as bordas da tabela. Ele controla as bordas das células adjacentes.
border-collapse: collapse;
- colapso: A palavra significa fundir
- border-collapse: colapso; significa que as fronteiras adjacentes se fundem
A borda adiciona algo extra ao tamanho real da caixa. Portanto, existem duas soluções:
- Ao medir o tamanho da caixa, não meça a borda.
- Se a medida incluir uma borda, você precisará subtrair a largura da borda da largura/altura.
8.1.2 Borda arredondada
No CSS3, um novo estilo de borda arredondada é adicionado e o atributo border-radius é usado para definir os cantos arredondados da borda externa de um elemento.
border-radius:length;
- Os valores dos parâmetros podem estar na forma de números ou porcentagens
- Se for um quadrado e você quiser defini-lo como um círculo, basta alterar o valor para metade da altura ou largura, ou escrever diretamente como 50%
- Este atributo é um atributo abreviado que pode ser seguido por quatro valores, representando o canto superior esquerdo, o canto superior direito, o canto inferior direito e o canto inferior esquerdo, respectivamente.
- Escreva separadamente: raio da borda superior esquerda, raio da borda superior direita, raio da borda inferior direita e
raio da borda inferior esquerda - Compatibilidade Suporte ao navegador IE9+, mas não afetará o layout da página, você pode usá-lo com confiança.
8.2 Preenchimento
A propriedade padding é usada para definir o preenchimento, que é a distância entre a borda e o conteúdo.
Depois de atribuir o valor de preenchimento à caixa, duas coisas acontecem:
- Há uma distância entre o conteúdo e a borda e é adicionado preenchimento.
- O preenchimento afeta o tamanho real da caixa.
Ou seja, se a caixa já tiver largura e altura, e então especificar uma borda interna neste momento, a caixa será ampliada.
Solução:
Se você garantir que o tamanho da caixa é consistente com a renderização, basta subtrair o preenchimento extra da largura/altura.
8.3 Margens
A propriedade margin é usada para definir a margem, que controla a distância entre a caixa e a caixa.
A abreviatura de margem significa exatamente o mesmo que preenchimento.
As margens podem centralizar caixas de nível de bloco horizontalmente, mas duas condições devem ser atendidas:
① A caixa deve especificar uma largura (largura).
② Defina as margens esquerda e direita da caixa como automáticas.
.header{ width:960px; margin:0 auto;}
Os métodos de escrita comuns incluem os três métodos a seguir:
- margem esquerda: automático; margem direita: automático;
- margem: carro;
- margem: 0 automático;
Nota: O método acima consiste em centralizar os elementos do nível do bloco horizontalmente e adicionar elementos embutidos ou elementos de bloco embutidos aos seus elementos pais text-align:center.
Ao usar margem para definir margens verticais para elementos de bloco, pode ocorrer mesclagem de margens.
Existem duas situações principais:
- Mesclando margens verticais de elementos de bloco adjacentes
- Colapso de margens verticais em elementos de bloco aninhados
8.3.1 Mesclando margens verticais de elementos de bloco adjacentes
Quando dois elementos de bloco adjacentes (irmãos) se encontram, se o elemento superior tiver uma margem inferior inferior e o elemento inferior tiver uma
margem superior superior, então o espaçamento vertical entre eles não é margem inferior. O fenômeno de assumir o maior dos dois valores
é chamado de fusão das margens verticais dos elementos do bloco adjacente.
Solução:
Tente adicionar valor de margem a apenas uma caixa.
8.3.2 Colapso de margens verticais em elementos de bloco aninhados
Para dois elementos de bloco com um relacionamento aninhado (relacionamento pai-filho), o elemento pai tem uma margem superior e o elemento filho também tem uma margem superior. Neste momento, o elemento pai será recolhido com um valor de margem maior.
Solução:
① Você pode definir uma borda superior para o elemento pai.
② Você pode definir o preenchimento superior para o elemento pai.
③ Você pode adicionar overflow:hidden ao elemento pai.
④ Existem outros métodos, como caixas flutuantes, fixas e posicionadas de forma absoluta, que não terão problemas de colapso.
8.4 Margens internas e externas claras
Muitos elementos de páginas da web têm margens internas e externas padrão, e os padrões são inconsistentes entre os navegadores. Portanto, antes do layout, devemos primeiro limpar
as margens internas e externas dos elementos da página web.
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
Nota: Para cuidar da compatibilidade, os elementos inline devem definir apenas as margens internas e externas esquerda e direita, e não definir as margens internas e externas superiores e inferiores. Mas a conversão para
elementos de bloco embutidos e em nível de bloco funciona perfeitamente
9 sombras
9.1 Sombra da caixa
Box shadow é novo em CSS3 e você pode usar a propriedade box-shadow para adicionar uma sombra à caixa.
box-shadow: h-shadow v-shadow blur spread color inset;
Perceber:
- O padrão é sombra externa (início), mas você não pode escrever esta palavra, caso contrário a sombra será inválida.
- As sombras da caixa não ocupam espaço e não afetarão outros arranjos da caixa.
9.2 Sombra de texto
Em CSS3, você pode aplicar uma sombra ao texto usando a propriedade text-shadow
text-shadow: h-shadow v-shadow blur color;
10 métodos de layout
CSS fornece três métodos de layout tradicionais (simplificando, como as caixas são organizadas): fluxo normal (fluxo padrão), flutuante e posicionamento.
10.1 Fluxo padrão (fluxo comum/fluxo de documentos)
O chamado fluxo padrão: os rótulos são organizados de uma maneira padrão prescrita. O fluxo padrão é o método de layout mais básico.
- Os elementos no nível do bloco ocuparão sua própria linha, organizados de cima para baixo.
Elementos comumente usados: div, hr, p, h1~h6, ul, ol, dl, form, table - Os elementos embutidos serão organizados da esquerda para a direita e serão automaticamente quebrados ao tocar a borda do elemento pai.
Elementos comuns: span, a, i, em, etc.
10.2 Flutuação
A propriedade float é usada para criar uma caixa flutuante, movendo-a para o lado até que a borda esquerda ou direita toque a borda do bloco que a contém ou de outra caixa flutuante.
选择器 { float: 属性值; }
Os elementos após adicionar flutuadores terão muitas características:
- Os elementos flutuantes sairão do fluxo padrão (fora do padrão)
- Os elementos flutuantes serão exibidos em uma linha e a parte superior do elemento será alinhada
- Os elementos flutuantes terão as características dos elementos de bloco inline.
Nota : Os elementos flutuantes estão próximos uns dos outros (não haverá espaços). Se a largura pai não puder acomodar essas caixas flutuantes, as caixas extras
serão alinhadas em outra linha.
Elementos flutuantes terão propriedades de elementos de bloco embutidos
- Qualquer elemento pode ser flutuado. Independentemente do modo original do elemento, a adição de float terá características semelhantes aos elementos de bloco embutidos.
- Se a caixa no nível do bloco não tiver largura definida, a largura padrão será a mesma do pai, mas após adicionar um ponto flutuante, seu tamanho será determinado com base no conteúdo.
Os elementos flutuantes são frequentemente usados em conjunto com o pai do fluxo padrão.Primeiro, o elemento pai do fluxo padrão é usado para organizar as posições superior e inferior e, em seguida, os elementos filhos internos são flutuados para organizar as posições esquerda e direita.
Coisas a serem observadas sobre o layout flutuante
- Os floats são combinados com caixas pai de streams padrão.
Primeiro, use o elemento pai do fluxo padrão para organizar as posições superior e inferior e, em seguida, use a disposição flutuante dos elementos filhos internos nas posições esquerda e direita. - Se um elemento for flutuado, teoricamente os outros elementos irmãos também deveriam flutuar.
Existem várias subcaixas em uma caixa. Se uma das caixas flutuar, os outros irmãos também deverão flutuar para evitar problemas.
A caixa flutuante afetará apenas o fluxo padrão atrás da caixa flutuante, mas não o fluxo padrão na frente dela.
10.2.1 Flutuação clara
Em muitos casos, é inconveniente dar altura à caixa pai, mas a caixa filho flutua e não ocupa posição.Finalmente, quando a altura da caixa pai é 0, isso afetará
a caixa de fluxo padrão abaixo.
Como o elemento flutuante não ocupa mais a posição do fluxo do documento original, ele afetará o layout dos elementos subsequentes.
Essência flutuante clara:
- A essência da compensação de flutuadores é o impacto da compensação de elementos flutuantes
- Se a própria caixa pai tiver altura, não há necessidade de limpar o float
- Depois de limpar o float, o pai detectará automaticamente a altura com base na caixa filho flutuante. Se o pai tiver altura, isso não afetará o fluxo padrão abaixo.
选择器{clear:属性值;}
A estratégia para compensar os floats é: Fechar o float
Método de flutuação clara:
- O método de rotulagem adicional, também conhecido como método de partição, é uma prática recomendada pelo W3C.
- Adicionar atributo overflow ao pai
- Adicionar após o pseudoelemento ao pai
- Adicionar pseudoelemento duplo ao pai
10.2.1.1 Método de rotulagem adicional
O método de rotulagem adicional, também conhecido como método de partição, é uma prática recomendada pelo W3C.
O método tag extra adiciona uma tag vazia no final do elemento flutuante. Por exemplo <div style=”clear:both”></div>, ou outras tags
(como <br />etc.)
Desvantagens: Adicionando muitas tags sem sentido, estrutura pobre
Nota: É necessário que esta nova tag vazia seja um elemento de nível de bloco.
10.2.1.2 Adicionar overflow ao pai
Você pode adicionar um atributo overflow ao pai e definir seu valor de atributo como oculto, automático ou rolagem.
Desvantagens: Incapaz de exibir peças excedentes
10.2.1.3: após o método do pseudoelemento
O método :after é uma versão atualizada do método de tag adicional. Também adicionado ao elemento pai
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
Desvantagens: Cuidar de navegadores de versões inferiores
10.2.1.4 Clear float duplo de pseudoelemento
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
Desvantagens: Cuidar de navegadores de versões inferiores
10.2.2 Limpar resumo flutuante
10.2 Posicionamento
O posicionamento permite que a caixa se mova livremente dentro de uma caixa ou fixe uma determinada posição na tela, podendo suprimir outras caixas.
Posicionamento: Posicione a caixa em uma determinada posição, portanto posicionar também é colocar a caixa e movimentar a caixa de acordo com o método de posicionamento.
10.2.1 Posicionamento de componentes
Posicionamento = modo de posicionamento + deslocamento de borda.
O modo de posicionamento é usado para especificar como um elemento é posicionado no documento. O deslocamento da borda determina a posição final do elemento.
10.2.1.1 Modo de posicionamento
O modo de posicionamento determina o método de posicionamento do elemento. Ele é definido por meio do atributo position do CSS. Seu valor pode ser dividido em quatro:
10.2.1.2 Deslocamento de borda
O deslocamento da borda ocorre quando a caixa posicionada é movida para sua posição final. Existem 4 atributos: superior, inferior, esquerda e direita.
10.2.2 Posicionamento estático estático
O posicionamento estático é o método de posicionamento padrão de elementos e não tem significado de posicionamento.
选择器 { position: static; }
O posicionamento estático posiciona as posições de acordo com as características de fluxo padrão. Não possui deslocamento de borda. O posicionamento estático raramente é usado no layout.
10.2.3 Posicionamento relativo relativo
Posicionamento relativo significa que quando um elemento se move, ele é relativo à sua posição original.
选择器 { position: relative; }
Características do posicionamento relativo:
- Ele se move em relação à sua posição original (ao mover a posição, o ponto de referência é a sua posição original).
- A posição original no fluxo padrão continua a ser ocupada e as caixas subsequentes ainda a tratam como um fluxo padrão.
Portanto, o posicionamento relativo não está fora do padrão. Sua aplicação mais típica é para posicionamento absoluto. . .
10.2.4 Posicionamento absoluto absoluto
Posicionamento absoluto significa que quando um elemento se move, ele é relativo aos seus elementos ancestrais.
选择器 { position: absolute; }
Características do posicionamento absoluto:
- Se não houver elemento ancestral ou o elemento ancestral não estiver posicionado, prevalecerá o posicionamento do navegador (Documento do documento).
- Se o elemento ancestral tiver posicionamento (posicionamento relativo, absoluto, fixo), a posição será movida usando o elemento ancestral posicionado mais próximo como ponto de referência.
- O posicionamento absoluto não ocupa mais sua posição original. (Fora do padrão)
Portanto, o posicionamento absoluto está fora do fluxo padrão.
Se o filho estiver em posição absoluta, os pais deverão usar o posicionamento relativo.
① A criança está absolutamente posicionada e não ocupará uma posição, podendo ser colocada em qualquer lugar da caixa dos pais sem afetar outras caixas dos irmãos.
② A caixa pai precisa ser posicionada para restringir a exibição da caixa filho dentro da caixa pai.
③ Quando a caixa pai é disposta, ela precisa ocupar uma posição, de modo que a caixa pai só pode ser posicionada relativamente.
10.2.5 Posicionamento fixo fixo
O posicionamento fixo é onde um elemento é fixado na área visível do navegador. Principais cenários de uso: A posição do elemento não mudará quando a página do navegador for rolada.
选择器 { position: fixed; }
Recursos de posicionamento fixo:
- Mova elementos usando a janela de visualização do navegador como ponto de referência. Não tem nada a ver com o elemento pai e não rola com a barra de rolagem.
- O posicionamento fixo não ocupa mais a posição original.
O posicionamento fixo também é off-label. Na verdade, o posicionamento fixo também pode ser considerado um tipo especial de posicionamento absoluto.
10.2.5 Posicionamento pegajoso pegajoso
O posicionamento fixo pode ser pensado como um híbrido de posicionamento relativo e posicionamento fixo.
选择器 { position: sticky; top: 10px; }
Características do posicionamento fixo:
- Mova elementos usando a janela visual do navegador como ponto de referência (recurso de posicionamento fixo)
- O posicionamento fixo ocupa a posição original (características de posicionamento relativas)
- Uma das opções superior, esquerda, direita e inferior deve ser adicionada para ser válida.
Usado em conjunto com a rolagem de página. Má compatibilidade e não suportado pelo IE.
10.2.6 Resumo de posicionamento
| Modo de posicionamento | Está fora do padrão? | mover lugar |
|---|---|---|
| posicionamento estático estático | não | O deslocamento da borda não pode ser usado |
| posicionamento relativo relativo | Não (ocupar posição) | Mover-se em relação à própria posição |
| mover | ||
| posicionamento absoluto | Sim (não ocupa cargo) | Pai posicionado |
| posicionamento fixo fixo | Sim (não ocupa cargo) | Área visível do navegador |
| posicionamento pegajoso | Não (ocupar posição) | Área visível do navegador |
10.2.7 Posicionando o índice z da ordem de empilhamento
Ao usar o layout de posicionamento, as caixas podem se sobrepor. Neste momento, você pode usar o índice z para controlar a ordem das caixas (eixo z)
选择器 { z-index: 1; }
- O valor pode ser um número inteiro positivo, um número inteiro negativo ou 0. O padrão é automático. Quanto maior o valor, maior será a caixa.
- Se os valores dos atributos forem iguais, segue-se a ordem de escrita, com o último vindo primeiro.
- Nenhuma unidade pode ser adicionada após o número
- Apenas caixas posicionadas possuem o atributo z-index
10.2.8 Expansão do posicionamento
10.2.8.1 Centralizando uma caixa absolutamente posicionada
Uma caixa com posicionamento absoluto não pode ser centralizada horizontalmente através de margin:0 auto, mas pode ser centralizada horizontal e verticalmente através dos seguintes métodos de cálculo.
① esquerda: 50%;: Mova o lado esquerdo da caixa para a posição central horizontal do elemento pai.
② margin-left: -100px;: Deixe a caixa mover metade de sua largura para a esquerda.
10.2.8.2 Localizando características especiais
O posicionamento absoluto e o posicionamento fixo também são semelhantes ao flutuante.
- Adicione posicionamento absoluto ou fixo aos elementos embutidos e você poderá definir diretamente a altura e a largura.
- Os elementos de nível de bloco adicionam posicionamento absoluto ou fixo. Se nenhuma largura ou altura for fornecida, o tamanho padrão será o tamanho do conteúdo.
10.2.8.3 Caixas off-label não provocarão colapso de margem
Elementos flutuantes e elementos absolutamente posicionados (posicionados fixamente) não desencadearão o problema de mesclagem de margens.
10.2.8.4 O posicionamento absoluto (posicionamento fixo) pressionará completamente a caixa
O elemento flutuante é diferente. Ele apenas suprimirá a caixa de fluxo padrão abaixo dele, mas não suprimirá o texto (imagem) na caixa de fluxo padrão abaixo.
No entanto, o posicionamento absoluto (posicionamento fixo) suprimirá todo o conteúdo do padrão fluxo abaixo.
A razão pela qual a flutuação não suprime o texto é porque o objetivo da flutuação é originalmente criar um efeito de quebra automática de texto. O texto envolverá o elemento flutuante
10.3 Resumo do layout da página web
Uma página da web completa é organizada usando fluxo, flutuação e posicionamento padrão, cada um dos quais com seu próprio uso especializado.
- O fluxo padrão
permite que as caixas sejam organizadas para cima e para baixo ou para a esquerda e para a direita. As caixas verticais em nível de bloco são exibidas usando o layout de fluxo padrão. - A flutuação
permite que vários elementos em nível de bloco sejam exibidos em uma linha ou alinhe caixas à esquerda e à direita. Use o layout flutuante para exibir várias caixas em nível de bloco horizontalmente.
Posicionamento A maior característica do posicionamento é o conceito de empilhamento, o que significa que várias caixas podem ser exibidas uma após a outra .
Use o layout de posicionamento se o elemento estiver livre para se mover dentro de uma caixa .
11 Ordem de escrita de propriedades CSS
Recomenda-se seguir a seguinte ordem:
- Atributos de posicionamento do layout: display/position/float/clear/visibility/overflow (recomenda-se escrever display primeiro, afinal está relacionado ao modo)
- Atributos próprios: largura/altura/margem/preenchimento/borda/fundo
- Propriedades do texto: cor/fonte/decoração de texto/alinhamento de texto/alinhamento vertical/espaço em branco/quebra de palavra
- Outras propriedades (CSS3): content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
12 Mostrando e ocultando elementos
Semelhante aos anúncios de sites, eles desaparecem quando clicamos para fechá-los, mas reaparecerão quando atualizarmos a página!
Essência: deixar um elemento ficar oculto ou exibido na página.
- o display mostra oculto, mas não mantém a posição
- a visibilidade mostra oculta, mas mantém a posição original
- overflow exibe e oculta o overflow, mas lida apenas parcialmente com o overflow.
12.1 atributo de exibição
O atributo display é usado para definir como um elemento deve ser exibido.
- display: nenhum; ocultar objetos
- display: block; além de converter para elementos de nível de bloco, também significa exibir elementos.
Depois que display oculta o elemento, ele não ocupa mais sua posição original.
12.2 visibilidade visibilidade
O atributo de visibilidade é usado para especificar se um elemento deve estar visível ou oculto.
- visibilidade: visível; elemento é visível
- visibilidade:oculto; elemento oculto
Depois que a visibilidade oculta o elemento, ele continua ocupando sua posição original.
Se o elemento oculto não quiser sua posição original, use visibilidade: oculto.
Se o elemento oculto não quiser sua posição original, use display: nenhum (mais ênfase na utilidade)
12.3 estouro estouro
O atributo overflow especifica o que acontece se o conteúdo ultrapassar a caixa de um elemento (além da altura e largura especificadas).
13 dicas avançadas de CSS
13.1 Sprites
Muitas pequenas imagens de fundo são frequentemente usadas como decoração em uma página da Web. Quando há muitas imagens na página da Web, o servidor receberá e enviará frequentemente
imagens de solicitação, causando pressão excessiva de solicitação no servidor, o que reduzirá bastante a velocidade de carregamento. da página.
Portanto, para reduzir efetivamente o número de vezes que o servidor recebe e envia solicitações e melhorar a velocidade de carregamento da página, surgiu a tecnologia CSS sprite (também conhecida como CSS Sprites, CSS Sprite)
.
Princípio fundamental: Integre algumas pequenas imagens de fundo na página da web em uma imagem grande, para que o servidor precise apenas de uma solicitação.
Usando o núcleo do sprite:
- A tecnologia Sprite é usada principalmente para imagens de fundo. É integrar várias pequenas imagens de fundo em uma imagem grande.
- Essa imagem grande também é chamada de sprites ou sprites.
- Para mover a posição da imagem de fundo, você pode usar a posição de fundo.
- A distância movida são as coordenadas xey da imagem alvo. Observe que as coordenadas na página da web são diferentes
- Como geralmente se move para cima e para a esquerda, o valor é negativo.
- Ao usar sprites, você precisa medir com precisão o tamanho e a posição de cada pequena imagem de fundo.
13.2 Ícones de fonte
Cenários de uso de ícones de fontes: usados principalmente para exibir alguns pequenos ícones comuns e comumente usados em páginas da web.
Os gráficos Sprite têm muitas vantagens, mas suas deficiências são óbvias.
- O arquivo de imagem ainda é relativamente grande.
- A própria imagem ficará distorcida quando ampliada e reduzida.
- É muito complicado substituir a imagem depois de criada.
Neste momento, existe uma tecnologia que surgiu para resolver muito bem os problemas acima, ou seja, o iconfont.
Os ícones de fontes podem fornecer aos engenheiros front-end uma maneira conveniente e eficiente de usar ícones. Eles exibem ícones, que são essencialmente fontes.
13.2.1 Vantagens dos ícones de fontes:
- Leve: uma fonte de ícone é menor que uma série de imagens. Depois que a fonte é carregada, o ícone é renderizado imediatamente, reduzindo as solicitações do servidor.
- Flexibilidade: A essência é na verdade o texto, que pode mudar de cor, gerar sombras, efeitos de transparência, rotação, etc.
- Compatibilidade: Suporta quase todos os navegadores, sinta-se à vontade para usá-lo
Nota: Os ícones de fontes não podem substituir a tecnologia elf, apenas melhoram e otimizam algumas das tecnologias de ícones em funcionamento.
13.2.2 Resumo
- Se você encontrar alguns ícones pequenos com estrutura e estilo relativamente simples, use ícones de fonte.
- Se você encontrar algumas imagens pequenas com estrutura e estilo mais complexos, use sprites.
13.2.3 Site de download do ícone da fonte
Site de download recomendado:
- Fonte icomoon http://icomoon.io Índice de recomendações ★★★★★
Fundada em 2011, a IcoMoon lançou o primeiro gerador de fontes de ícones personalizados, que permite aos usuários selecionar os ícones que precisam e transformá-los em
uma única fonte. A fonte contém uma grande variedade de conteúdos e é muito abrangente, o único arrependimento é que o servidor estrangeiro tem uma velocidade de rede lenta. - Biblioteca de fontes Alibaba iconfont http://www.iconfont.cn/ Índice de recomendação ★★★★★
Esta é uma biblioteca de ícones de fontes iconfont do Alibaba M2UX, incluindo a biblioteca de ícones Taobao e a biblioteca de ícones Alimama. Você pode usar IA
para criar ícones e carregá-los para geração. A questão é que é grátis!
13.2.4 Introdução de ícones de fontes
- Coloque a pasta de fontes do pacote de download no diretório raiz da página
- Declarar fontes globalmente em estilos CSS: Basta entender como introduzir esses arquivos de fontes em nossa página através de CSS.
Certifique-se de prestar atenção ao caminho do arquivo da fonte.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
- Adicione pequenos ícones em tags HTML.
- Defina a fonte do rótulo.
span {
font-family: "icomoon";
}
Nota: Certifique-se de garantir que esta fonte seja consistente com a fonte em @font-face acima
13.2.4.1 Formato do arquivo de fonte
Os formatos de fonte suportados por diferentes navegadores são diferentes. A razão pela qual os ícones de fontes são compatíveis é que eles contêm arquivos de fontes suportados pelos navegadores convencionais.
- A fonte .ttf no formato TrueType (.ttf) é a fonte mais comum para Windows e Mac. Os navegadores que suportam essa fonte incluem IE9+, Firefox3.5+,
Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+; - Fonte woff do formato Web Open Font Format (.woff), os navegadores que suportam esta fonte incluem IE9+, Firefox3.5+, Chrome6+,
Safari3.6+, Opera11.1+; - A fonte Embedded Open Type (.eot) .eot é uma fonte especial para IE. Os navegadores que suportam esta fonte são IE4+;
- Formato SVG (.svg). A fonte svg é um formato baseado na renderização de fonte SVG. Os navegadores que suportam essa fonte incluem Chrome4+, Safari3.1+,
Opera10.0+ e iOS Mobile Safari3.2+;
13.3 Triângulo CSS
Triângulos são comuns em páginas da web e podem ser desenhados diretamente usando CSS. Não há necessidade de transformá-los em imagens ou ícones de fontes.
div {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
13.4 Estilos de interface de usuário CSS
O chamado estilo de interface consiste em alterar alguns estilos de operação do usuário para melhorar uma melhor experiência do usuário.
- Alterar o estilo do mouse do usuário
- esboço do formulário
- Impedir que os campos do formulário sejam arrastados
13.4.1 Cursor estilo mouse
li {cursor: pointer; }
Define ou recupera a forma do cursor definida pelo sistema adotada pelo ponteiro do mouse movendo-se sobre o objeto.
13.4.2 Linha de contorno
Depois de adicionar o estilo Outline: 0; ou Outline: None; ao formulário, você pode remover a borda azul padrão.
input {outline: none; }
13.4.3 Impedir que campos de texto arrastados sejam redimensionados
No desenvolvimento real, o canto inferior direito do nosso campo de texto não pode ser arrastado.
textarea{ resize: none;}
13.5 aplicação de atributos de alinhamento vertical
Cenários de uso do atributo CSS vertical-align: Freqüentemente usado para definir o alinhamento vertical de imagens ou formulários (elementos de bloco embutidos) e texto.
Explicação oficial: Usado para definir o alinhamento vertical de um elemento, mas só é eficaz para elementos embutidos ou elementos de bloco embutidos.
vertical-align : baseline | top | middle | bottom
13.5.1 Alinhamento de imagens, formulários e texto
Imagens e formulários são todos elementos de bloco embutidos e o alinhamento vertical padrão é o alinhamento da linha de base.
Neste momento, você pode definir o atributo vertical-align de elementos de bloco embutidos, como imagens e formulários, para o meio para alinhar o texto e as imagens verticalmente e centralizar
.
13.5.2 Resolva o problema do espaço em branco padrão na parte inferior da imagem
Bug: Haverá um espaço em branco na parte inferior da imagem porque o elemento do bloco embutido ficará alinhado com a linha de base do texto.
Existem duas soluções principais:
- Adicione vertical-align:middle | top| bottom, etc. à imagem. (Recomenda-se usar)
- Converta a imagem em um elemento de nível de bloco display: block;
13.6 Exibição de elipses de texto transbordantes
13.6.1 O estouro de texto de linha única exibe reticências
Três condições devem ser atendidas
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
13.6.2 O estouro de texto multilinha exibe reticências
O texto multilinha transborda e exibe reticências, o que apresenta grandes problemas de compatibilidade e é adequado para navegadores webKit ou terminais móveis (a maioria dos terminais móveis são kernel do webkit
)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;