Maison >interface Web >tutoriel CSS >dimensionnement de la propriété CSS
dimensionnement de la propriété CSS
- 高洛峰original
- 2017-02-24 13:27:001322parcourir
Cet article présente principalement l'attribut css box-sizing. L'attribut box-sizing a été introduit dans CSS3. Certaines personnes expliquent qu'il peut spécifier si les valeurs de largeur et de hauteur spécifiées avec l'attribut width et l'attribut height incluent respectivement l'attribut css box-sizing. à l'intérieur de l'élément. La zone de remplissage, ainsi que la largeur et la hauteur de la bordure.
Avant de comprendre le dimensionnement d'une boîte, passons brièvement en revue le modèle de boîte. Le modèle est divisé en : modèle de boîte standard, c'est-à-dire modèle de boîte. Alors quelle est la différence ? Voir l'image :
Comme vous pouvez le voir sur l'image ci-dessus, la portée du modèle de boîte w3c standard comprend la marge, la bordure, le remplissage et le contenu, et la partie contenu n'inclut pas d'autres parties.
Comme vous pouvez le voir sur l'image ci-dessus, la portée du modèle de boîte IE comprend également la marge, la bordure, le remplissage et le contenu. La différence par rapport au modèle de boîte w3c standard. est : le contenu du modèle de boîte IE. La partie comprend une bordure et un remplissage.
Bien sûr, les ingénieurs front-end doivent adopter le modèle de boîte standard lors de l'écriture des mises en page (vous devez ajouter une déclaration doctype à la déclaration html de la page), indiquant au navigateur pour suivre le standard La page est rendue en utilisant le modèle de boîte. Au contraire, la page sera analysée selon différents navigateurs. IE utilisera le modèle de boîte d'IE pour le rendu et GOOGLE le rendra selon le mode standard, ce qui est évidemment le cas. déraisonnable.
Ainsi, afin de rendre les pages Web que nous écrivons compatibles avec différents navigateurs, il est préférable d'utiliser le modèle de boîte w3c standard.
Après avoir parlé du modèle de boîte, entrons dans notre compréhension de la taille de la boîte de l'attribut CSS.
Les trois valeurs d'attributde box-sizing : content-box dessine le remplissage et les bordures de l'élément en dehors de la largeur et de la hauteur | border-box Tout remplissage et bordures spécifiés pour l'élément seront en dehors de la largeur et hauteur. Dessiner dans une largeur et une hauteur définies | hériter spécifie que la valeur de l'attribut box-sizing doit être héritée de l'élément parent ; l'attribut box-sizing vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique ; .
Le navigateur ie8 prend en charge content-box et border-box
ff prend en charge les trois valeurs ;
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>box-sizing事项</title>
<style type="text/css">
*{padding: 0;margin: 0;font-family: "微软雅黑";box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
.content{width: 800px;height: 500px;margin: 30px auto;border: 5px solid #e2e2e2;padding: 10px}
</style>
</head>
<body>
<p class="content">
这是内容@！
</p>
</body>
</html>Après avoir modifié l'attribut box-sizing, la largeur de la boîte est : 770px = 800px - 10px -20px ;
Cela signifie que le remplissage intérieur et la bordure sont dessinés à l'intérieur des 800 pixels de la zone de contenu qui a été définie, ce qui donne la largeur de la zone de contenu : 770.
La largeur de la boîte après non-modification de l'attribut box-sizing est : 800px;
box-sizing Cet attribut rend la mise en page très soignée et simple lors de notre processus de développement front-end !
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.
Pour plus d'articles liés au dimensionnement des boîtes d'attributs CSS, veuillez faire attention au site Web PHP chinois !