Maison >interface Web >tutoriel CSS >Quelle est la bordure intérieure en CSS

Quelle est la bordure intérieure en CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-06-02 14:21:379985parcourir

En CSS, la bordure intérieure est définie à l'aide de l'attribut box-sizing. Il vous suffit d'ajouter le style "box-sizing:border-box;" à l'élément. La valeur de l'attribut box-sizing est border-box, ce qui signifie que la largeur et la hauteur spécifiées déterminent la bordure de l'élément.

Quelle est la bordure intérieure en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Jetons d’abord un coup d’œil à un exemple de définition de bordures intérieures avec CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div.container {
        width: 30em;
        height: 106px;
        border: 1em solid;
      }

      div.box1 {
        width: 50%;
        border: 1em solid red;
        float: left;
      }

      div.box2 {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        width: 50%;
        border: 1em solid red;
        float: left;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="box1">普通边框!!</div>
      <div class="box2">内边框!!</div>
    </div>
  </body>
</html>

Quelle est la bordure intérieure en CSS

propriété box-sizing

La propriété box-sizing vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique.

Par exemple, si vous devez placer deux boîtes bordées côte à côte, vous pouvez le faire en définissant box-sizing sur "border-box". Cela amène le navigateur à afficher une boîte avec la largeur et la hauteur spécifiées, et à placer les bordures et le remplissage dans la boîte.

Syntaxe

box-sizing: content-box|border-box|inherit;

Valeur de l'attribut :

content-box : Il s'agit du comportement de la largeur et de la hauteur spécifié par CSS2.1. La spécification de la largeur et de la hauteur de l'élément (propriétés min/max) s'applique à la largeur et à la hauteur de la boîte. Remplissage et disposition des bordures et dessin des éléments, sauf la largeur et la hauteur spécifiées

border-box : Spécifiez la largeur et la hauteur (attributs min/max) pour déterminer la bordure de l'élément. Autrement dit, spécifier la largeur et la hauteur d'un élément inclut le remplissage et la bordure. La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.

inherit : Spécifie la valeur de l'attribut box-sizing, qui doit être hérité de l'élément parent.

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div.container {
        width: 30em;
        height: 74px;
        border: 1em solid;
      }
      div.box {
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        width: 50%;
        border: 1em solid red;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">这个 div 占据了左边的一半。</div>
      <div class="box">这个 div 占据了右边的一半。</div>
    </div>
  </body>
</html>

Rendu :

Quelle est la bordure intérieure en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn