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 :
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 deBFC (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, tableCe 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!