Comprendre le modèle de boîte

Il existe deux types de modèles de boîte : les modèles de boîte W3C et IE

Le modèle de boîte comprend la marge, la bordure, le remplissage et le contenu

Largeur de l'élément W3C = largeur du contenu

Largeur de l'élément d'IE = content+padding+border

Je pense personnellement que le modèle de boîte défini par le W3C et le modèle de boîte défini par IE sont plus raisonnables, et celui défini par IE est plus raisonnable, et celui défini par l'élément

La largeur doit inclure la bordure et le remplissage. C'est la même chose que la boîte dans notre vraie vie

Le W3C a également reconnu son propre problème, donc il. ajout d'une nouvelle boîte de style dans le dimensionnement CSS3,

contient deux attributs content-box et border-box.

content-box : width=content+padding+border

border-box : width=width (largeur spécifiée par le style)

1. Pour les éléments au niveau de la ligne, margin-top et margin-bottom ne sont pas valides pour les éléments supérieurs et inférieurs, et margin-left et margin-right sont valides

2. Pour les éléments adjacents au niveau du bloc, margin-bottom et méthodes de valeur de marge supérieure

1) Tous sont des nombres positifs : prenez la valeur maximale Distance=Math.max(margin-botton,margin-top)

2) Tous sont des nombres négatifs : prenez la valeur minimale Distance=Math.min( margin-botton,margin-top)

3) Le haut est un nombre positif et le bas est un nombre négatif ou le haut est un nombre négatif et le bas est un nombre positif : Ajout de distance positive et négative = margin-botton+margin-top

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!