{"id":5375,"date":"2024-08-27T17:20:56","date_gmt":"2024-08-27T17:20:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calcul-taille-element-css-box-sizing\/"},"modified":"2024-11-11T16:32:25","modified_gmt":"2024-11-11T16:32:25","slug":"calcul-taille-element-css-box-sizing","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calcul-taille-element-css-box-sizing\/","title":{"rendered":"5.8 Calcul de la Taille d\u2019un \u00c9l\u00e9ment en CSS"},"content":{"rendered":"\n\n\n<p><strong>Calculer la Taille d\u2019un \u00c9l\u00e9ment en CSS<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Comprendre comment d\u00e9terminer et d\u00e9finir la taille des \u00e9l\u00e9ments peut aider \u00e0 cr\u00e9er des interfaces utilisateur r\u00e9actives et attrayantes. Apprenons les diff\u00e9rentes m\u00e9thodes pour calculer la taille d\u2019un \u00e9l\u00e9ment en CSS avec des exemples pratiques pour mieux appr\u00e9hender ce concept.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Calcul de la Taille en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586331052?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Le calcul de la taille d\u2019un \u00e9l\u00e9ment en CSS implique plusieurs propri\u00e9t\u00e9s telles que <code>width<\/code>, <code>height<\/code>, <code>padding<\/code>, <code>margin<\/code> et <code>border<\/code>. Ces propri\u00e9t\u00e9s permettent de d\u00e9finir les dimensions et l&rsquo;espace autour des \u00e9l\u00e9ments, et leur compr\u00e9hension est cruciale pour cr\u00e9er des mises en page fluides et r\u00e9actives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La Propri\u00e9t\u00e9 <code>width<\/code> et <code>height<\/code><\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s <code>width<\/code> et <code>height<\/code> d\u00e9finissent la largeur et la hauteur d&rsquo;un \u00e9l\u00e9ment respectivement. Elles peuvent \u00eatre d\u00e9finies en pixels (px), pourcentages (%), em, rem, etc. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    width: 100px;\n    height: 200px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des <code>padding<\/code> et <code>border<\/code><\/h3>\n\n\n\n<p>Le <code>padding<\/code> est l&rsquo;espace int\u00e9rieur entre le contenu de l&rsquo;\u00e9l\u00e9ment et ses bords. La <code>border<\/code> est la ligne entourant le padding et le contenu. Les dimensions totales d&rsquo;un \u00e9l\u00e9ment incluent les paddings et bordures. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    width: 100px;\n    height: 200px;\n    padding: 10px;\n    border: 5px solid black;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Le Mod\u00e8le de Bo\u00eete en CSS<\/h3>\n\n\n\n<p>Le <a href=\"https:\/\/wikiform.fr\/codespace\/calcul-taille-element-css-box-sizing\"><strong>mod\u00e8le de bo\u00eete en CSS<\/strong><\/a> est essentiel pour comprendre comment sont calcul\u00e9es les dimensions d&rsquo;un \u00e9l\u00e9ment. Par d\u00e9faut, la largeur et la hauteur ne comprennent que la taille du contenu. Pour inclure les paddings et bordures dans les dimensions, vous pouvez utiliser la propri\u00e9t\u00e9 <code>box-sizing<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Le R\u00f4le de <code>margin<\/code> dans le Calcul de la Taille<\/h3>\n\n\n\n<p>Le <a href=\"https:\/\/wikiform.fr\/codespace\/largeur-minimale-maximale-element-css\"><code>margin<\/code><\/a> d\u00e9finit l&rsquo;espace ext\u00e9rieur autour de l\u2019\u00e9l\u00e9ment et n&rsquo;affecte pas directement la taille de l\u2019\u00e9l\u00e9ment mais influence la mise en page globale. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    width: 100px;\n    height: 200px;\n    margin: 20px;\n}\n<\/code><\/pre>\n\n\n\n<p>Les marges jouent un r\u00f4le crucial pour espacer les diff\u00e9rents \u00e9l\u00e9ments de votre <a href=\"https:\/\/wikiform.fr\/codespace\/tables-html-creer-utiliser\" target=\"_blank\" rel=\"noopener\">tableau HTML<\/a> ou pour toute autre structure d&rsquo;\u00e9l\u00e9ments.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple HTML de Calcul de la Taille<\/h3>\n\n\n\n<p>Voici un exemple HTML qui utilise toutes les propri\u00e9t\u00e9s CSS vues jusqu&rsquo;\u00e0 pr\u00e9sent :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\ndiv {\n    width: 100px;\n    height: 200px;\n    padding: 10px;\n    border: 5px solid black;\n    margin: 20px;\n    box-sizing: border-box;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div&gt;\n        Contenu de la bo\u00eete\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Calcul des Dimensions en Pourcentage<\/h3>\n\n\n\n<p>D\u00e9finir des dimensions en pourcentages permet de cr\u00e9er des mises en page r\u00e9actives qui s&rsquo;ajustent aux diff\u00e9rentes tailles d&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    width: 50%;\n    height: 50%;\n    padding: 10%;\n    border: 5%;\n    margin: 10%;\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n\n\n\n<p>Associer ces pourcentages avec des <a href=\"https:\/\/wikiform.fr\/codespace\/flexbox-css-guide-complet\"><code>flexbox<\/code><\/a> et des media queries permet de cr\u00e9er des mises en page plus dynamiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>calc()<\/code> pour des Calculs Complexes<\/h3>\n\n\n\n<p>Le CSS propose la fonction <code>calc()<\/code> pour effectuer des calculs complexes sur les dimensions des \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n    width: calc(100% - 20px);\n    height: calc(100vh - 50px);\n    padding: calc(5% + 10px);\n    border: 1px solid black;\n    margin: 10px;\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Prise en Charge des Diff\u00e9rents Dispositifs avec les Media Queries<\/h3>\n\n\n\n<p>Les media queries sont un outil essentiel pour adapter la taille des \u00e9l\u00e9ments en fonction de la taille de l&rsquo;\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (max-width: 600px) {\n    div {\n        width: 100%;\n        padding: 5px;\n    }\n}\n\n@media screen and (min-width: 601px) and (max-width: 1200px) {\n    div {\n        width: 50%;\n        padding: 10px;\n    }\n}\n\n@media screen and (min-width: 1201px) {\n    div {\n        width: 25%;\n        padding: 15px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations sur la mise en \u0153uvre des media queries, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/decouverte-medias-queries-css-guide\">guide sur les media queries en CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Avanc\u00e9 d&rsquo;Utilisation des Propri\u00e9t\u00e9s de Taille<\/h3>\n\n\n\n<p>Prenons un exemple avanc\u00e9 qui montre comment combiner plusieurs techniques pour une mise en page flexible :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    box-sizing: border-box;\n    padding: 20px;\n}\n\n.box {\n    width: calc(40% - 40px);\n    height: calc(50vh - 40px);\n    padding: 20px;\n    margin: 10px;\n    border: 2px solid blue;\n    box-sizing: border-box;\n}\n\n@media screen and (max-width: 768px) {\n    .box {\n        width: calc(80% - 40px);\n    }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"box\"&gt;Box 1&lt;\/div&gt;\n        &lt;div class=\"box\"&gt;Box 2&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Calculer la taille d\u2019un <strong>\u00e9l\u00e9ment en CSS<\/strong> est une comp\u00e9tence fondamentale pour cr\u00e9er des interfaces utilisateur agr\u00e9ables et r\u00e9actives. En utilisant des propri\u00e9t\u00e9s telles que <code>width<\/code>, <code>height<\/code>, <code>padding<\/code>, <code>border<\/code>, <code>margin<\/code>, et des outils comme <code>calc()<\/code> et les media queries, vous pouvez concevoir des mises en page sophistiqu\u00e9es adapt\u00e9es \u00e0 tous types d\u2019appareils. Continuez \u00e0 explorer et pratiquer ces techniques pour am\u00e9liorer vos comp\u00e9tences en conception web.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-b%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation\" title=\"\"><\/a>\n\n\n<p>\u00a0<\/p>\n<p>Pour ajouter du contenu pertinent et atteindre les 1200 mots requis, voici des sections suppl\u00e9mentaires d\u00e9taill\u00e9es :<\/p>\n<p><!-- Masse de contenu suppl\u00e9mentaire --><br \/><!-- Focaliser sur les bo\u00eetes flexibles --><\/p>\n<h2 class=\"wp-block-heading\">Conception des Bo\u00eetes Flexibles avec CSS Flexbox<\/h2>\n<p>En CSS, les bo\u00eetes flexibles (<a href=\"https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css\"><code>flexbox<\/code><\/a>) sont une technique avanc\u00e9e pour cr\u00e9er des mises en page adaptatives et ergonomiques. Ce mod\u00e8le de bo\u00eete rend la manipulation des \u00e9l\u00e9ments enfants au sein d&rsquo;un conteneur plus intuitive en utilisant des propri\u00e9t\u00e9s comme <code>flex-direction<\/code>, <code>justify-content<\/code>, et <code>align-items<\/code>.<\/p>\n<p><!-- Structure Flexbox --><\/p>\n<h3 class=\"wp-block-heading\">Structure d&rsquo;un Conteneur Flex<\/h3>\n<p>Pour appliquer Flexbox \u00e0 un conteneur, utilisez la propri\u00e9t\u00e9 <code>display: flex<\/code> :<\/p>\n\n\n<pre class\n","protected":false},"excerpt":{"rendered":"<p>Calculer la Taille d\u2019un \u00c9l\u00e9ment en CSS est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Comprendre comment d\u00e9terminer et d\u00e9finir la taille des \u00e9l\u00e9ments peut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5375"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5375\/revisions"}],"predecessor-version":[{"id":6039,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5375\/revisions\/6039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2708"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}