{"id":5361,"date":"2024-08-27T16:53:41","date_gmt":"2024-08-27T16:53:41","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boites-css-bases-indispensables\/"},"modified":"2024-08-27T16:53:44","modified_gmt":"2024-08-27T16:53:44","slug":"boites-css-bases-indispensables","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boites-css-bases-indispensables\/","title":{"rendered":"5.1 Bo\u00eetes en CSS : Les Bases Indispensables"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Bo\u00eetes en CSS<\/strong> constituent une composante essentielle pour la mise en page et la conception de sites web. Ma\u00eetriser les fondamentaux des <strong>bo\u00eetes en CSS<\/strong> peut transformer votre capacit\u00e9 \u00e0 cr\u00e9er des interfaces utilisateur attrayantes et r\u00e9actives. Apprenons comment ces bo\u00eetes fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Bo\u00eetes 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\/586314639?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>En CSS, chaque \u00e9l\u00e9ment HTML peut \u00eatre consid\u00e9r\u00e9 comme une \u00ab\u00a0bo\u00eete\u00a0\u00bb. Cette bo\u00eete comprend du contenu, des bordures, du rembourrage et une marge. Comprendre le mod\u00e8le de bo\u00eete est essentiel pour concevoir des mises en page efficaces et pour d\u00e9boguer les probl\u00e8mes li\u00e9s aux dimensions et \u00e0 la disposition des \u00e9l\u00e9ments. Pour plus de d\u00e9tails sur ce concept, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/boites-css-bases-indispensables\" target=\"_blank\" rel=\"noopener\">guide complet sur les bo\u00eetes CSS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le Mod\u00e8le de Bo\u00eete<\/h3>\n\n\n\n<p>Le mod\u00e8le de bo\u00eete en CSS repr\u00e9sente chaque \u00e9l\u00e9ment comme une bo\u00eete ayant des bordures, des marges, du rembourrage et un contenu. Voici un sch\u00e9ma g\u00e9n\u00e9ral :<\/p>\n\n\n\n<div style=\"border: 1px solid #000; padding: 10px; margin: 10px; text-align: center;\">\n  <div style=\"border: 1px solid #ddd; padding: 20px; margin: 10px;\">\n    <div style=\"border: 1px solid #aaa; padding: 30px; margin: 10px;\">\n      Contenu\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Box Properties<\/h3>\n\n\n\n<p>Il est crucial de comprendre comment les diff\u00e9rentes propri\u00e9t\u00e9s CSS influencent les bo\u00eetes. Nous allons examiner quelques-unes des propri\u00e9t\u00e9s les plus courantes : <code>width<\/code>, <code>height<\/code>, <code>padding<\/code>, <code>border<\/code>, et <code>margin<\/code>. Pour aller plus loin dans ces concepts, vous pouvez explorer notre article d\u00e9di\u00e9 sur la <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" target=\"_blank\" rel=\"noopener\">syntaxe CSS<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Width et Height<\/h4>\n\n\n\n<p>Les propri\u00e9t\u00e9s <code>width<\/code> et <code>height<\/code> d\u00e9finissent la largeur et la hauteur du contenu d&rsquo;un \u00e9l\u00e9ment. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.box {\n  width: 200px;\n  height: 100px;\n  background-color: lightblue;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"box\" style=\"width: 200px; height: 100px; background-color: lightblue;\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Padding<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>padding<\/code> ajoute de l&rsquo;espace \u00e0 l&rsquo;int\u00e9rieur des bordures d&rsquo;un \u00e9l\u00e9ment. Voici comment elle fonctionne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.box-with-padding {\n  width: 200px;\n  height: 100px;\n  padding: 20px;\n  background-color: lightgreen;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"box-with-padding\" style=\"width: 200px; height: 100px; padding: 20px; background-color: lightgreen;\">Contenu avec padding<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Border<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>border<\/code> ajoute une bordure autour d&rsquo;un \u00e9l\u00e9ment. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.box-with-border {\n  width: 200px;\n  height: 100px;\n  border: 5px solid red;\n  background-color: yellow;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"box-with-border\" style=\"width: 200px; height: 100px; border: 5px solid red; background-color: yellow;\">Contenu avec bordure<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Margin<\/h4>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>margin<\/code> ajoute de l&rsquo;espace \u00e0 l&rsquo;ext\u00e9rieur des bordures d&rsquo;un \u00e9l\u00e9ment. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.box-with-margin {\n  width: 200px;\n  height: 100px;\n  margin: 20px;\n  background-color: pink;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"box-with-margin\" style=\"width: 200px; height: 100px; margin: 20px; background-color: pink;\">Contenu avec marge<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Bo\u00eetes en CSS pour la Mise en Page<\/h3>\n\n\n\n<p>Les bo\u00eetes en CSS sont cruciales pour cr\u00e9er des mises en page structur\u00e9es et esth\u00e9tiques. En combinant les propri\u00e9t\u00e9s de bo\u00eetes, vous pouvez cr\u00e9er des designs flexibles et r\u00e9actifs. Voici quelques exemples avanc\u00e9s pour int\u00e9grer ces concepts dans vos projets. Pour approfondir la mise en page, consultez notre article sur comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">cr\u00e9er une premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Flexbox<\/h4>\n\n\n\n<p><code>Flexbox<\/code> est un mod\u00e8le de bo\u00eete flexible qui permet de cr\u00e9er des mises en page complexes plus facilement. Voici un exemple basique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.flex-container {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.flex-item {\n  background-color: lightcoral;\n  padding: 20px;\n  margin: 10px;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"flex-container\" style=\"display: flex; flex-direction: row; justify-content: space-around; align-items: center;\">\n  <div class=\"flex-item\" style=\"background-color: lightcoral; padding: 20px; margin: 10px;\">Item 1<\/div>\n  <div class=\"flex-item\" style=\"background-color: lightcoral; padding: 20px; margin: 10px;\">Item 2<\/div>\n  <div class=\"flex-item\" style=\"background-color: lightcoral; padding: 20px; margin: 10px;\">Item 3<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Grid<\/h4>\n\n\n\n<p><code>CSS Grid<\/code> est un syst\u00e8me de mise en page bidimensionnel qui permet de cr\u00e9er des dispositions complexes. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.grid-container {\n  display: grid;\n  grid-template-columns: auto auto auto;\n  gap: 10px;\n}\n\n.grid-item {\n  background-color: lightseagreen;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"grid-container\" style=\"display: grid; grid-template-columns: auto auto auto; gap: 10px;\">\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">1<\/div>\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">2<\/div>\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">3<\/div>\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">4<\/div>\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">5<\/div>\n  <div class=\"grid-item\" style=\"background-color: lightseagreen; padding: 20px; text-align: center;\">6<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Avanc\u00e9es des Bo\u00eetes en CSS dans Des Projets R\u00e9els<\/h3>\n\n\n\n<p>Pour atteindre un niveau avanc\u00e9 dans l&rsquo;utilisation des bo\u00eetes en CSS, il est crucial de comprendre comment ces concepts sont appliqu\u00e9s dans des projets r\u00e9els. Voici quelques exemples pratiques. En outre, ma\u00eetriser les <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-police-guide-essentiel\" target=\"_blank\" rel=\"noopener\">propri\u00e9t\u00e9s CSS<\/a> est \u00e9galement b\u00e9n\u00e9fique.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Layouts complexes<\/h4>\n\n\n\n<p>Dans de nombreux projets, vous devrez cr\u00e9er des mises en page complexes qui combinent <code>Flexbox<\/code> et <code>Grid<\/code>. Voici un exemple de tableau de bord :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\n.dashboard {\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n  gap: 20px;\n}\n\n.sidebar {\n  background-color: lightblue;\n  padding: 20px;\n}\n.main-content {\n  background-color: lightcoral;\n  padding: 20px;\n}\n\n.header, .footer {\n  background-color: lightgreen;\n  padding: 10px;\n  grid-column: span 2;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"dashboard\" style=\"display: grid; grid-template-columns: 1fr 3fr; gap: 20px;\">\n  <div class=\"header\" style=\"background-color: lightgreen; padding: 10px; grid-column: span 2;\">Header<\/div>\n  <div class=\"sidebar\" style=\"background-color: lightblue; padding: 20px;\">Sidebar<\/div>\n  <div class=\"main-content\" style=\"background-color: lightcoral; padding: 20px;\">Main Content<\/div>\n  <div class=\"footer\" style=\"background-color: lightgreen; padding: 10px; grid-column: span 2;\">Footer<\/div>\n<\/div>\n\n\n<!-- wp:heading {\"level","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Bo\u00eetes en CSS constituent une composante essentielle pour la mise en page et la conception de sites web. Ma\u00eetriser les fondamentaux des bo\u00eetes en&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5361","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\/5361","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=5361"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5361\/revisions"}],"predecessor-version":[{"id":5362,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5361\/revisions\/5362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2707"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}