Organizar notas de estudo diário no padrão de projeto HTML

Não há nenhum projeto feito esta semana, e eu tenho estudado o modelo de design HTML. Vou organizar e compartilhar meus resultados de aprendizado esta semana para sua referência

Notas de aprendizado de padrões de design HTML

Nesta semana, aprendi principalmente os padrões de design HTML e agora resumirei meu conteúdo de aprendizado da seguinte maneira:

um. Aprendizagem do modelo de caixa

Existe um modelo de design básico no CSS chamado modelo de caixa, que define como os elementos são analisados ​​como caixas. Aprendi principalmente seis tipos de modelos de caixas, a saber, modelo de caixa embutida, modelo de caixa de blocos embutidos, modelo de caixa de blocos, modelo de caixa de mesa, modelo de caixa absoluta e modelo de caixa de posicionamento flutuante.

O padrão de design do modelo da caixa é incorporado em CSS, que define a relação entre as seguintes propriedades: limites, fronteiras, preenchimentos e conteúdo. Cada atributo inclui quatro partes: superior, direita, inferior e esquerda; Essas quatro partes podem ser definidas ao mesmo tempo ou separadamente; As bordas podem ser divididas em tamanho e cor. Podemos entendê -lo como a espessura da caixa vista na vida e de que cor da caixa é feita. O limite é até que ponto a caixa deve manter com outras coisas. O conteúdo é o que está contido na caixa e o material preenchido na parte de reposição na caixa de enchimento.

Os modelos de caixas em linha são analisadas em ordem de arranjo em linha, eles são classificados horizontalmente da esquerda para a direita e, quando excedem a largura dos ancestrais do bloco de terminais mais próximos, são substituídos por uma nova linha. Largura, altura e transbordamento não funcionam em elementos embutidos, pois sempre correspondem à largura e altura do conteúdo. A margem e a altura da linha podem ser aplicadas a elementos embutidos de alguma maneira especial. A margem horizontal altera a posição dos elementos embutidos na ordem do arranjo. Um valor positivo da margem-esquerda manterá o elemento longe do elemento antes dele, enquanto um valor negativo o puxará mais perto. Um valor positivo da direita da margem manterá o elemento longe do seu próximo elemento, enquanto um valor negativo o puxará mais perto. A margem e o fundo da margem não funcionam para elementos embutidos. A borda define as fronteiras para os elementos embutidos de uma maneira especial, e a borda horizontal mudará a posição dos elementos embutidos no arranjo. A borda esquerda fará o elemento à esquerda e a borda direita fará com que o próximo elemento à direita. As bordas superior e inferior serão exibidas fora da margem interna, mas elas não se estendem à altura da linha ou alteram a posição do elemento na direção vertical. O modelo desse padrão pode ser expresso da seguinte forma: