css définir le paramètre de taille div

Avec le développement continu de la technologie Web, CSS, en tant que partie importante du développement front-end, est devenu un outil important pour la conception et la construction de pages Web. Parmi eux, CSS définit la taille des divs, ce qui est une opération essentielle pour créer des pages Web. Cet article présentera les méthodes et techniques pour définir la taille des divs avec CSS.

1. Utilisez les attributs de largeur et de hauteur de CSS

La manière la plus simple de définir la taille d'un div est d'utiliser les attributs de largeur et de hauteur de CSS. Grâce à ces deux attributs, vous pouvez définir la largeur et la hauteur du div, qui peuvent être définies en utilisant px, em, % et d'autres unités.

L'exemple de code est le suivant :

div {
  width: 200px;
  height: 100px;
}

2 Utilisez les propriétés min-width et min-height de CSS

Dans certains cas, il peut être nécessaire de laisser le div s'afficher dynamiquement au lieu d'apparaître à une taille fixe. CSS fournit des propriétés min-width et min-height pour définir dynamiquement la largeur minimale et la hauteur minimale d'un div. De cette façon, lorsqu'il y a trop de contenu, le div sera automatiquement redimensionné pour s'adapter au contenu.

L'exemple de code est le suivant :

div {
  min-width: 100px;
  min-height: 50px;
}

3 Utilisez les attributs CSS max-width et max-height

avec min-width et min. -height En revanche, les attributs max-width et max-height peuvent définir la largeur maximale et la hauteur maximale d'un div. De cette façon, lorsque le contenu est trop petit, le div ne continuera pas à s'étendre, mais sera affiché en fonction de la largeur maximale et de la hauteur maximale définies pour assurer la beauté et la standardisation de la page.

L'exemple de code est le suivant :

div {
  max-width: 500px;
  max-height: 300px;
}

4. Utilisez l'attribut box-sizing de CSS

En CSS, le modèle de boîte par défaut est content-box Un modèle qui calcule uniquement la largeur et la hauteur du contenu d'un élément, sans inclure les bordures ni le remplissage. Si vous devez inclure des bordures et un remplissage, vous devez utiliser l'attribut box-sizing et définir le modèle de boîte sur le modèle border-box.

L'exemple de code est le suivant :

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
}

5 Utilisez la fonction calc() de CSS

Parfois, vous devez ajouter la largeur. et la hauteur du div, Calculez la valeur d'une certaine proportion. À ce stade, vous pouvez utiliser la fonction CSS calc(), qui peut effectuer des opérations mathématiques simples lors de la définition de la largeur et de la hauteur du div.

Par exemple, pour définir la largeur d'un div à 50 % de la largeur de la page moins 20 px, vous pouvez écrire comme ceci :

div {
  width: calc(50% - 20px);
}

6. Mise en page flexible en utilisant CSS # 🎜🎜#

.container {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 100px;
  height: 100px;
}

window.onload = function() {
  var div = document.getElementById('mydiv');
  div.style.width = window.innerWidth + 'px';
  div.style.height = window.innerHeight + 'px';
}

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!