Layout de múltiplas colunas (multicolunas)
O layout de várias colunas consiste em projetar o conteúdo do texto em um layout de várias colunas, como um jornal. Em outras palavras, o fluxo em cascata que poderíamos alcançar antes por meio de js ou JQuery pode ser alcançado diretamente por meio de CSS em CSS3, embora haja problemas de compatibilidade. .
compatibilidade
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
Propriedades do layout de múltiplas colunas
CSS3 fornece uma série de propriedades para implementar o layout multicolunas, conforme mostrado na tabela a seguir:
1.columns define o número de colunas do objeto e a largura de cada coluna
Define ou recupera o número de colunas do objeto e a largura de cada coluna.
gramática:
colunas:<'largura da coluna'>||<'contagem de colunas'>;
Descrição do parâmetro:
(1) O primeiro parâmetro refere-se à largura de cada coluna
(2) O segundo parâmetro refere-se ao número de colunas. Você pode escrever dois ou um.
Os dois parâmetros dão prioridade ao número de colunas (no caso de rebaixamento). Se a largura não for suficiente (número de colunas * definir largura > largura do contêiner), ele reduzirá automaticamente uma coluna e ampliará automaticamente a largura do parágrafo para atingir a largura do contêiner. O espaçamento apropriado é gerado automaticamente no meio.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Layout de múltiplas colunas</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0,3 );}div.test1{largura:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>de Dennis Ritchie, o inventor da linguagem C, inicialmente posicionou sua invenção como um sistema. Não é um software gráfico em si. Deve incluir o desenvolvimento de drivers, kernel do sistema, gerenciamento de arquivos, gerenciamento interno e uma série de softwares básicos. , então você só precisa aprender a sintaxe da linguagem C, mas também outros assuntos, como princípios de sistema operacional, protocolos de comunicação, princípios de compilador, estruturas de dados, etc. </div><div>Neste momento, ao ver o manual da placa-mãe em inglês, você saberá qual interface deve ser lida, como está estipulado o protocolo de comunicação, quantos bytes devem ser lidos...e assim por diante, antes você pode escrever Somente o driver pode escrever o kernel antes que ele possa se comunicar. Até este ponto, mesmo que a demanda por talentos nas empresas na sociedade seja maior. Menos, mas não há problema de não conseguir encontrar emprego. Em vez disso, você escolhe um emprego e até paga por ele, porque não só você pode fazer isso, mas também muitos trabalhos relacionados, como desenvolvimento de driver, DNS. resolução, antivírus, segurança de comunicação, virtualização, etc. É capaz de usar tecnologia e personalização de kernel, podendo até desenvolver um novo sistema operacional por si só. </div><div>Dito isto, em nosso ambiente atual, a orientação de ensino da linguagem C na maioria das universidades é que, além dos cursos de linguagem C, apenas algumas faculdades também deveriam oferecer estrutura de dados, arquitetura de computadores, princípios de compilador, cursos como princípios de sistema operacional, e algumas escolas apenas mantêm estruturas de dados nesses cursos, ou até mesmo não oferecem mais estruturas de dados. Portanto, a linguagem C se posiciona apenas como esclarecimento de programação, e é suficiente estar familiarizado com o pensamento orientado a processos e C. sintaxe da linguagem. </div><div>A escola espera que depois de aprender a linguagem C, eles possam aprender C++ ou Java ou outras linguagens de alto nível para que possam fazer coisas mais práticas e encontrar um emprego com mais facilidade se estiverem mais ansiosos. para ter sucesso, eles podem simplesmente usar a linguagem C. Chega de aprender, apenas aprenda Java ou C++ ou outras linguagens de alto nível sem fundamento. Na verdade, essa é a diferença entre uma classe profissional e uma instituição de treinamento. Se você não aprende conhecimento em vão, deveria pensar mais se ele é útil ou não. </div></div><br><div><div>Portanto, a julgar pelo ambiente geral atual, se você está se formando em informática/software em uma faculdade importante, deve trabalhar duro nesses materiais reais. não desperdice os recursos de ensino do país, porque você é responsável pelo futuro da indústria de software de TI do país, se quiser se envolver em P&D/desenvolvimento de software, então você deve pelo menos aprender bem a estrutura de dados, porque você tem que criar; , não copie. Se você quer apenas ganhar a vida, basta aprender uma técnica que possa produzir resultados. </div><div>Finalmente, vamos dar uma olhada nos propósitos comuns para os alunos aprenderem a linguagem C. Desde a faculdade até o bacharelado, o exame de admissão à pós-graduação e a linguagem C de segundo nível, os tutoriais orientados à demanda são baseados principalmente em. questões teóricas, questões práticas e exames, portanto, o tipo de projeto Existem recursos de linguagem C muito menos difíceis, então, naturalmente, você raramente vê coisas gráficas. É claro que, como um forte defensor da linguagem C, o Dotcpp também fortalecerá os recursos de programação aqui no futuro para fornecer a todos suporte de recursos suficiente. </div><div>Quando aprendemos a linguagem C, porque escolhemos programas de console, seus programas serão executados em uma janela preta. Se você escrever um aplicativo Windows, não haverá essa janela preta e a sintaxe da linguagem C será. ainda ser usado, todos podem entender. </div><div>Se for desenvolvimento gráfico em linguagem C pura, dependendo do seu estágio, você pode considerar usar a função de interface gráfica suportada pelo compilador TurBoC ou instalar a biblioteca easyX no VC6 para completar o desenvolvimento gráfico. de alguns jogos, como gamão, Tetris, jogos de pinball, Snake, etc., que são todos gráficos e interativos. Para jogos mais avançados, considerando atualização de imagem e aprimoramento profissional, você pode considerar o uso de MFC ou QT. </div></div></body></html>Resultados em execução:
Defina as colunas de div.test1: 300px 4, ou seja, a largura de cada coluna é 300px, e há 4 colunas no total, mas o contêiner é 900px, que é menor que 1200px, então o número de colunas será automaticamente reduzido e a largura da coluna será aumentada apropriadamente para ser exibida da maneira mais apropriada. No entanto, div.test2 não define a largura do contêiner, a largura da coluna é definida como 300px e o número de colunas é definido como 4 colunas. O número de colunas será limitado para otimizar a largura da coluna.
Nota: Defina as colunas de div.test1: 300px 4, ou seja, a largura de cada coluna é 300px e há 4 colunas no total, mas o contêiner é 900px, que é menor que 1200px, então o número de colunas será será reduzido automaticamente e a largura da coluna será aumentada adequadamente para obter o método de exibição mais apropriado. No entanto, div.test2 não define a largura do contêiner, a largura da coluna é definida como 300px e o número de colunas é definido como 4 colunas. O número de colunas será limitado para otimizar a largura da coluna.
2. largura da coluna define a largura da coluna
gramática:
largura das colunas:<comprimento>|padrão automático;
: Utilize o valor do comprimento para definir a largura da coluna, não são permitidos valores negativos. auto: Personalize a largura de acordo com o número de colunas;
Embora a largura da coluna esteja definida, a largura será alocada automaticamente com base no número de colunas e na largura do contêiner.
PS: A lacuna em cada coluna é de 14 pixels.
3. contagem de colunas define o número de colunas
Define ou recupera o número de colunas de um objeto.
gramática:
contagem de colunas:<inteiro>|auto;
Descrição do parâmetro:: Use valores inteiros para definir o número de colunas, não são permitidos valores negativos. Auto: Personalize a largura de alocação de acordo com a largura da coluna;
4. column-gap define a lacuna entre as colunas
Define ou recupera os espaços entre as colunas de um objeto.
gramática:
lacuna de coluna:<comprimento>|normal;
Descrição do parâmetro: Utilize o valor do comprimento para definir o intervalo entre colunas (não a distância entre palavras, mas a distância entre parágrafos), valores negativos não são permitidos normais: iguais ao tamanho da fonte. o espaçamento normal depende do tamanho da fonte. Igual ao tamanho da fonte.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Layout de múltiplas colunas</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .teste3{ border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin-top: 20px;}di v.test1{largura:900px;colunas:300px4;tamanho da fonte:14px;}div.test2{colunas:400px;tamanho da fonte:30px;}div.test3{contagem de colunas:4;coluna- gap:14px;}</style></head><body><h3>Fonte: 14px, sem intervalo definido: o padrão é o mesmo que a fonte, 14px;</h3><div><div>Muitos amigos que estudaram a linguagem C Quando você olhar para a linguagem C, você definitivamente terá esta pergunta: Por que a linguagem C é executada em uma janela preta? Um programa que calcula a área de um triângulo ou imprime o número de narcisos? Não importa o quão boa seja a programação, por que ainda não podemos fazer aqueles softwares legais? No final das contas, é simplesmente infantil! Por que. </div><div>Primeiro, o posicionamento da invenção da linguagem C, desde o início de sua invenção por Dennis Ritchie, o inventor da linguagem C, sabemos que ela é para ser um sistema, e não um software gráfico em si, deveria ser Inclui uma série de tarefas básicas, como desenvolvimento de drivers, criação do kernel do sistema, gerenciamento de arquivos, gerenciamento interno, comunicações de rede, etc. </div><div>Em segundo lugar, o posicionamento de ensino comum na China Dito isto, no nosso ambiente atual, o posicionamento de ensino da maioria das universidades para a linguagem C é que apenas algumas faculdades deveriam oferecer estruturas de dados além dos cursos de linguagem C. , arquitetura de computadores, princípios de compilador, princípios de sistema operacional e outros cursos. </div><div>Além disso, a Comissão de Inspeção e Supervisão Disciplinar do Condado de Wan'an investigou o desempenho de funções por unidades e pessoal relevantes, como o Departamento de Educação e Esportes do Condado, a Administração de Mercado e Supervisão de Qualidade do Condado e o governo do município de Jiantian, e revisou a supervisão Os responsáveis do Departamento de Educação e Esportes do condado, a Administração de Supervisão de Qualidade e Mercado do condado, o Departamento de Agricultura do condado, a Comissão de Saúde e Planejamento Familiar do condado, o Governo do município de Jiantian e outras unidades relevantes que não conseguiram fazer o seu trabalho arquivaram e analisaram separadamente os casos. Ao mesmo tempo, a Comissão Municipal de Inspeção e Supervisão Disciplinar conduzirá uma investigação sobre o processo de licitação para refeições nutricionais estudantis e anunciará os resultados ao público assim que estiverem disponíveis. </div></div><br><h3>Fonte: 30px, sem intervalo definido: o padrão é 30px, o mesmo que a fonte;</h3><div><div>Muitos amigos que estudaram a linguagem C estamos olhando para C Quando se trata de linguagens, certamente haverá perguntas como esta: Por que a linguagem C é executada sob uma janela preta? Um programa que calcula a área de um triângulo ou imprime o número de narcisos? Não importa quão boa seja a programação, por que ainda não podemos fazer aqueles softwares legais? No final das contas, é simplesmente infantil! Por que. </div><div>Primeiro, o posicionamento da invenção da linguagem C, desde o início de sua invenção por Dennis Ritchie, o inventor da linguagem C, sabemos que ela é para ser um sistema, e não um software gráfico em si, deveria ser Inclui uma série de tarefas básicas, como desenvolvimento de drivers, criação do kernel do sistema, gerenciamento de arquivos, gerenciamento interno, comunicações de rede, etc. </div><div>Em segundo lugar, o posicionamento de ensino comum na China Dito isto, no nosso ambiente atual, o posicionamento de ensino da maioria das universidades para a linguagem C é que apenas algumas faculdades deveriam oferecer estruturas de dados além dos cursos de linguagem C. , arquitetura de computadores, princípios de compilador, princípios de sistema operacional e outros cursos. </div><div>Terceiro, a linguagem C pode ser usada para fazer isso, mas raramente é feita diretamente na linguagem C. Quando aprendemos a linguagem C, escolhemos programas de console, para que seus programas sejam executados em uma janela preta. escrever um aplicativo Windows, não haverá essa janela preta. Ainda será a sintaxe da linguagem C, que todos podem entender. </div></div><br><h3>Fonte: 30px, intervalo de configuração: 14px;</h3><div><div>Muitos amigos que estudaram a linguagem C certamente saberão quando olharem para a linguagem C Eu tenho esta pergunta: por que a linguagem C é executada em uma janela preta? Um programa que calcula a área de um triângulo ou imprime o número de narcisos? Não importa o quão boa seja a programação, por que ainda não podemos fazer aqueles softwares legais? No final das contas, é simplesmente infantil! Por que. </div><div>Primeiro, o posicionamento da invenção da linguagem C, desde o início de sua invenção por Dennis Ritchie, o inventor da linguagem C, sabemos que ela é para ser um sistema, e não um software gráfico em si, deveria ser Inclui uma série de tarefas básicas, como desenvolvimento de drivers, criação do kernel do sistema, gerenciamento de arquivos, gerenciamento interno, comunicações de rede, etc. </div><div>Em segundo lugar, o posicionamento de ensino comum na China Dito isto, no nosso ambiente atual, o posicionamento de ensino da maioria das universidades para a linguagem C é que apenas algumas faculdades deveriam oferecer estruturas de dados além dos cursos de linguagem C. , arquitetura de computadores, princípios de compilador, princípios de sistema operacional e outros cursos. </div><div>Terceiro, a linguagem C pode ser usada para fazer isso, mas raramente é feita diretamente na linguagem C. Quando aprendemos a linguagem C, escolhemos programas de console, para que seus programas sejam executados em uma janela preta. escrever um aplicativo Windows, não haverá essa janela preta. Ainda será a sintaxe da linguagem C, que todos podem entender. </div></div></body></html>Resultados em execução:
5. regra da coluna define a borda entre as colunas
gramática:
regra de coluna:<largura da regra da coluna>||<estilo da regra da coluna>||<cor da regra da coluna>
Descrição do parâmetro
● column-rule-width A espessura da borda
●estilo de borda estilo regra de coluna
●cor da borda da cor da regra da coluna
PS: Preste atenção especial ao fato de que se o espaço entre as colunas < a largura da borda, haverá uma situação em que as colunas cobrirão a borda.
(1) largura da regra da coluna
Define ou recupera a espessura da borda entre as colunas de um objeto.
gramática:
largura da regra da coluna:<comprimento>|fino|médio|espesso;
Descrição do parâmetro
●comprimento: Utilize o valor do comprimento para definir a espessura da borda, valores negativos não são permitidos;
●medium: define a espessura padrão da borda;
●fino: define uma borda mais fina que a espessura padrão;
●espesso: Define uma borda mais espessa que a espessura padrão.
(2) estilo de regra de coluna define o estilo da borda
Define ou recupera o estilo da borda entre as colunas de um objeto.
gramática
estilo de regra de coluna: nenhum | oculto | pontilhado | tracejado | sólido | duplo | ranhura | cume | inserção | início;
Descrição do parâmetro
●nenhum: sem esboço;
●oculto: esconde a fronteira;
●pontilhado: contorno pontilhado;
●tracejado: contorno tracejado;
●sólido: contorno sólido;
●duplo: contorno de linha dupla;
●groove: perfil de ranhura 3D;
●ridge: perfil de ranhura convexa 3D;
●inserção: contorno de borda côncava 3D;
●início: contorno da borda convexa 3D.
Nota: Se houver um contorno com duas linhas, a largura incluirá a distância entre as duas linhas.
(3) column-rule-color define a cor da borda
Define ou recupera a cor da borda entre as colunas de um objeto.
gramática:
cor da regra da coluna:<cor>;
Descrição do parâmetro: Especifique a cor. Sem largura e estilo, a cor falhará. Preto padrão.
6. column-span define o elemento para abranger todas as colunas
Define ou recupera se o elemento do objeto abrange todas as colunas.
gramática:
extensão da coluna: nenhum | todos;
Descrição do parâmetro: nenhum: não abrange todas as colunas: abrange todas as colunas;
Não é usado no contêiner como outros atributos de coluna, mas nos elementos filhos do contêiner.
7. preenchimento de coluna define a altura das colunas a serem unificadas (atualmente não compatível com navegadores convencionais)
Define ou recupera se a altura de todas as colunas do objeto é uniforme.
gramática:
preenchimento de coluna:autodefault|balance;
Descrição do parâmetro: auto: conteúdo adaptativo da altura da coluna; equilíbrio: a altura de todas as colunas é unificada com a coluna mais alta;
Os principais navegadores não são compatíveis com este atributo.
8. quebra de coluna define nova linha
●column-break-before define se uma linha deve ser quebrada antes do objeto especificado.
●column-break-after define se uma linha deve ser quebrada após o objeto especificado.
●column-break-inside define se as linhas devem ser quebradas dentro do objeto
(1) quebra de coluna antes
Seja para quebrar linhas antes de definir ou recuperar o objeto.
gramática:
quebra de coluna antes: auto|sempre|evitar;
Descrição do parâmetro: auto: não força nem proíbe quebra de linhas antes de elementos e geração de novas colunas sempre: sempre quebra de linhas antes de elementos e geração de novas colunas evitar: evitar quebra de linhas antes de elementos e geração de novas colunas;
(2) quebra de coluna depois
Seja para quebrar linhas após definir ou recuperar o objeto.
gramática:
quebra de coluna após:auto|sempre|evitar;
Descrição do parâmetro: auto: não força nem proíbe quebra de linhas após elementos e geração de novas colunas sempre: sempre quebra de linhas após elementos e geração de novas colunas evitar: evitar quebra de linhas após elementos e geração de novas colunas;
(3) atributo de quebra de coluna interna
Define ou recupera se as linhas estão quebradas dentro do objeto.
gramática:
quebra de coluna dentro:autodefault|evitar