Os três núcleos do layout de página: modelo de caixa, flutuante e posicionamento.
A essência do layout de uma página da web: colocar caixas por meio de CSS.
Os componentes do modelo de caixa incluem: bordas, margens, preenchimento e conteúdo real
preenchimento: exibido na caixa por padrão, controlando a distância entre o texto e a caixa
margem: controla a distância entre as caixas
A borda inclui: largura da borda (espessura), estilo da borda (linha sólida, linha pontilhada, linha pontilhada), cor da borda
div {
largura: 300px;
altura: 200px;
largura da borda: 5px; largura da borda estilo da borda: estilo da borda sólida: estilo da borda pontilhada: estilo da borda pontilhada: cor da borda;borda: 1px vermelho sólido sem ordem;
Como escrever a borda separadamente (usado para modificar uma determinada borda):
borda superior: 1px azul sólido; borda inferior: 1px rosa sólido;
Quando houver apenas uma borda diferente, você poderá usar a escrita em cascata:
borda: 5px rosa tracejado; border-top: 1px azul sólido; uma borda superior que cobre toda a caixa acima;
Bordas de linhas finas para tabelas:
Quando o espaçamento entre as células de uma tabela é definido como 0, porque as bordas de duas células adjacentes são colocadas juntas, a largura desta parte parecerá maior que a largura da borda definida de uma célula. Para resolver este problema, você pode usar o atributo border-collapse.
A propriedade border-collapse controla como o navegador desenha as bordas da tabela. Ela controla as bordas das células adjacentes. Mesclar bordas adjacentes:
mesa {
border-collapse: colapso Este atributo deve ser adicionado à tabela para ser eficaz} As bordas afetarão o tamanho real da caixa <br/>A presença de bordas aumentará o tamanho da caixa, pois existem duas opções:
(1) Ao medir o tamanho da caixa, não meça a borda (2) Se a borda estiver incluída na medição, será necessário subtrair a largura da borda dos valores de largura e altura.
A distância entre a borda e o conteúdo.
O preenchimento afetará o tamanho real da caixa <br/>Para garantir que o tamanho da caixa seja consistente com a renderização, você precisa subtrair a largura do preenchimento dos valores de largura e altura.
Se a própria caixa não especificar os atributos de largura e altura, o preenchimento não expandirá o tamanho da caixa : se a largura não for especificada, o preenchimento esquerdo e direito não expandirá a caixa; o preenchimento superior e inferior não expandirá a caixa.
Controle a distância entre as caixas
Aplicação típica: Para obter a centralização horizontal de uma caixa em nível de bloco, duas condições devem ser atendidas: a caixa deve ter uma largura especificada e as margens esquerda e direita da caixa devem ser definidas como automática;
Elementos embutidos e elementos de bloco embutidos: Se você deseja obter o alinhamento central horizontal, basta adicionar text-align: center ao seu elemento pai.
Mesclagem de margens (1) Colapso das margens verticais de 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. o elemento pai recolherá mais valores de margem grandes.
Solução: especifique uma borda externa para o elemento pai; especifique uma margem interna para o elemento pai;
Muitos elementos de páginas da web têm margens internas e externas padrão, e os padrões variam de navegador para navegador, porque antes do layout, as margens internas e externas dos elementos da página da web precisam ser limpas.
* {
margem: 0px; preenchimento claro: 0px;Para cuidar da compatibilidade, tente definir apenas as margens interna e externa esquerda e direita para os elementos embutidos, e não defina as margens interna e externa superior e inferior. No entanto, é suficiente convertê-las em nível de bloco e. elementos de nível embutido.
Faça os cantos arredondados da caixa.
A propriedade border-radius é usada para definir os cantos arredondados das bordas interna e externa de um elemento.
gramática:
border-radius: length; Quanto maior o parâmetro, mais óbvio é o arco. Este parâmetro pode ser uma matriz específica ou uma porcentagem.
Seu princípio:
Como escrever bordas arredondadas:
(1)圆形的写法: Quando a caixa é um正方形e comprimento = metade da altura ou largura da caixa, a caixa é um círculo. Metade: pode ser um valor exato ou 50%. 】
(2)圆角矩形的写法：参数设置为高度的一半
(3) Este atributo é um atributo abreviado, que na verdade é: canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo (sentido horário)
(4) Se você deseja definir apenas um canto, você pode escrevê-lo como: border-top-left-radius, border-bottom-right-radius, etc. Observe que a ordem não pode ser invertida.
A propriedade box-shadow adiciona uma sombra à caixa.
gramática:
box-shadow: h-shadow v-shadow blur inserção de cor padrão da caixa;
desfoque: a virtualidade e a realidade da sombra. Quanto maior o parâmetro, mais desfocado ele é.
sombra de texto
gramática:
sombra de texto: sombra h, sombra v, desfoque, cor
Isso conclui este artigo sobre modelos de caixa CSS, bordas arredondadas e sombras de caixa. Para obter mais conteúdo relacionado ao modelo de caixa CSS, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. . Suporte downcodes.com!