Parlez brièvement de la compréhension du modèle de boîte CSS ? Introduction au modèle de boîte CSS

Le contenu de cet article est de parler brièvement de la compréhension du modèle de boîte CSS ? Une introduction au modèle de boîte CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La construction de toute page web est indissociable de l'empilement de modèles de box. Il faut dire que le modèle CSS est un fondement du web. La différence dans l'effet final n'est rien de plus que la différence de hauteur et de largeur, de suppression de contenu et d'arrière-plan.

Alors, que savez-vous des modèles CSS ?

Tout d’abord, combien de types de modèles de boîtes CSS existe-t-il ? Deux sortes.

1. Modèle standard 2. Modèle IE

Parlons d'abord de la différence entre ces deux modèles de box Regardez les photos pour parler :

La plus grande différence entre le modèle standard et le modèle IE est la différence dans les méthodes de calcul. La hauteur et la largeur du modèle de boîte standard sont la hauteur et la largeur du contenu. Le calcul de la hauteur et de la largeur du modèle IE inclut la largeur et la hauteur du remplissage et de la bordure. Lors de la configuration, nous pouvons distinguer les deux en définissant la taille de la boîte.

La valeur du box-sizing

content-box : modèle de boîte standard.

border-box : modèle de boîte IE.

Alors, quand dois-je utiliser le modèle de boîte IE ? Le sentiment de l’auteur n’est pas utilisé dans de nombreux endroits, mais il existe une situation où il est très nécessaire. Lorsque vous définissez un élément pour qu'il survole et que vous y ajoutez une bordure, si vous utilisez le modèle de boîte standard à ce stade, le style sera confus. L'apparence est que l'élément

est compressé dans un 1px. frontière disgracieuse. Cependant, définir box-sizing:border-box peut très bien résoudre ce problème.

Deuxièmement, comment obtenir la largeur et la hauteur d'un élément en utilisant js ?

Définissons d’abord les méthodes, puis parlons des différences.

document.getElementById('id').style.width/height : limité uniquement à l'obtention de styles en ligne pour obtenir la largeur et la hauteur.

document.getElementById('id').currentStyle.width/height : Vous pouvez obtenir la largeur et la hauteur du navigateur après le rendu en temps réel. Cette méthode est plus précise mais ne prend en charge qu'IE. (Cela doit être précis et tout le monde peut utiliser la méthode ci-dessous)

window.getComputedStyle(dom).width/height : Cette méthode est compatible avec les navigateurs Chrome et Firefox.

document.getElementById('id').getBoundingClientRect().width/height : Cette méthode peut également obtenir la largeur et la hauteur de l'élément dans le temps, calculer la position absolue d'un élément et obtenir le haut, la gauche , largeur en même temps, hauteur quatre valeurs.

En ce qui concerne le modèle de boîte CSS, nous devons introduire le concept de

BFC (contexte de formatage au niveau du bloc). Il y a une introduction plus détaillée à cette partie du contenu en ligne, je ne réinventerai donc pas la roue ici. Oui, juste pour le mentionner brièvement.

Le principe du BFC

1 Les marges verticales de l'élément BFC se chevaucheront.

2. La zone BFC ne chevauchera pas la BOX de l'élément flottant.

3. BFC est un conteneur indépendant et les éléments à l'extérieur n'affecteront pas les éléments à l'intérieur.

4. Lors du calcul de la hauteur BFC, les éléments flottants participeront également au calcul.

Comment créer BFC

1. overflow:hidden, auto;

2 La valeur de float n'est pas nulle;

3. La valeur de la position n'est pas la valeur par défaut ou réelle

4. affichage : inline-block, table-cell, table

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!