Taille de la boîte CSS3

Taille de la boîte CSS3

La propriété CSS3 de dimensionnement de la boîte peut définir les propriétés de largeur et de hauteur, qui incluent le remplissage (padding) et la bordure (bordure).

N'utilise pas la propriété CSS3 box-sizing

Par défaut, la largeur et l'extrémité supérieure d'un élément sont calculées comme suit :

largeur + padding (Padding) + border (border) = Largeur réelle de l'élément

height (height) + padding (Padding) + border (border) = Hauteur réelle de l'élément

Cela signifie Quand nous définissez la largeur/hauteur d'un élément, la hauteur et la largeur réelles affichées de l'élément seront plus grandes (car la bordure et le remplissage de l'élément sont également calculés en largeur/hauteur).

     
  
这个是个较小的框 (width 为 300px ，height 为 100px)。
 
 
这个是个较大的框 (width 为 300px ，height 为 100px)。
  

En utilisant cette méthode, si vous souhaitez obtenir une boîte plus petite et inclure un remplissage, vous devez prendre en compte la largeur de la bordure et le remplissage.

La propriété box-sizing de CSS3 résout très bien ce problème.

Utilisez la propriété CSS3 box-sizing

La propriété CSS3 box-sizing inclut un remplissage (à l'intérieur) dans la largeur et la hauteur d'un élément margin) et border (border).

Si box-sizing: border-box; est défini sur l'élément, padding (marge intérieure) et border (border) sont également inclus dans la largeur et la hauteur :

     
  
两个 div 现在是一样大小的!
 
 
php中文网!
  

À partir des résultats Voir box-sizing : border-box ; pour de meilleurs résultats, ce dont de nombreux développeurs ont besoin.

Le code suivant peut afficher la taille de tous les éléments de manière plus intuitive. De nombreux navigateurs prennent déjà en charge le dimensionnement de la boîte : border-box ; (mais pas tous - c'est pourquoi les éléments de saisie et de texte avec une largeur : 100 % ; ont des largeurs différentes).

     
  
 用户名:
 
 邮箱:
 
 评论:
   

  
 
提示： 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。