Utilisation de l'attribut border-sizing en CSS-tutoriel CSS-php.cn

Utilisation de l'attribut border-sizing en CSS

不言

Libérer： 2018-07-28 09:59:48

original

2464 Les gens l'ont consulté

Cet article vous présente l'utilisation de l'attribut border-sizing en CSS. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

box-sizing modifie le modèle de boîte CSS par défaut utilisé pour calculer la largeur et la hauteur des éléments. Il a trois valeurs : content-box, border-box etherit. Hériter fait référence à l'héritage du formulaire de dimensionnement de boîte de l'élément parent, qui n'est plus redondant.

## 1. Explication de l'attribut

#### content-box
La valeur par défaut est également le modèle de boîte en CSS2.1. Lors du calcul de width et height, border, padding et margin ne sont pas calculés. La hauteur et la largeur ne sont que la hauteur du contenu.

#### border-box
css3Nouveau. Les attributs width et height incluent le contenu, le remplissage et les bordures, mais pas les marges.

Formule de calcul :

largeur = largeur = bordure + remplissage + largeur du contenu
hauteur = bordure + rembourrage + hauteur du contenu

## 2. Compte tenu du margin
du modèle de boîte, on peut savoir d'après ce qui précède que même si c'est border-box , il ne calculera pas margin C'est juste un calcul inutile de border et padding. Parce que border et padding font tous deux partie du modèle de boîte, mais margin marque la distance entre la boîte et la boîte . Par conséquent, l’explication de border-box relève du bon sens.

La question est : si la marge doit parfois être définie, comment peut-elle être librement contrôlée pour garantir la compatibilité ? Par exemple, nous souhaitons configurer un élément de boîte qui remplit toute la page et qui est interféré par les marges. Comment devons-nous procéder ?

Réalisez les rendus suivants :
Utilisation de lattribut border-sizing en CSS

Code : Téléchargement du code source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yuanxin.me</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #app {
      box-sizing: border-box; /* 指定计算方式 */
      margin: 10px; /* 外边距干扰 */
      /* 利用 css3 的 calc */
      width: calc(100vw - 2*10px);
      height: calc(100vh - 2*10px);
    }
  </style>
</head>
<body>
  <p id="app">
  </p>
</body>
</html>

Copier après la connexion

Alors, lorsque vous besoin de calculer Pour la marge, calc peut être utilisé en conjonction avec les quatre opérations arithmétiques () dans CSS3.

## 3. Suggestions d'utilisation

Sur la base de l'expérience du projet et des recommandations du w3c, il est recommandé de définir l'attribut box-sizing sur border-box.

* {
  margin: 0;
  padding: 0;
}
p {
  box-sizing: border-box;
}

Copier après la connexion

Recommandations associées :

Comment utiliser du CSS pur pour implémenter un train dynamique

Quels sont les sélecteurs CSS ? Résumé complet des sélecteurs CSS (avec code)

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!