Différences

Ci-dessous, les différences entre deux révisions de la page.

--- prog:css [2024/05/20 18:22] – [Layer] : ajout des priorités avec exemple root
+++ prog:css [2024/07/14 18:50] (Version actuelle) – [Le modèle de boite] : hotfix root
@@ Ligne 441: / Ligne 441: @@
   * ''unset'' : rend la valeur par défaut et annule également la valeur par défaut de la feuille de style.
+=====Mise en page=====
+====Le modèle de boite====
+Une boite / box stocke des données dans un rectangle et est composée d'une marge, bordure et padding.
+{{:prog:css:box-model.png?544|}}
+Les box peuvent être soit :
+  * dans une ligne dédiée (''display: block''). Dans ce cas, ''height'' et ''height'' sont respectés. ''h1'', ''p'' sont ''block'' par défaut.
+  * comme un caractère dans la ligne (''display: inline''). Dans ce cas, ''height'' et ''height'' sont ignorés. Les propriétés ''top'' et ''bottom'' des propriétés ''padding'' / ''margin'' / ''borders'' n'influeront pas sur les autres box ''inline''. ''a'', ''span'', ''em'' et ''strong'' sont ''inline'' par défaut.
+Les données dans les boites peuvent être soit :
+  * comportement par défaut.
+  * ''display: flex''. Ils ont donc une ligne dédiée mais tant que les boites se suivent, elles sont les unes a côté des autres.
+  * ''display: inline-flex''. Les boites ne sont pas dans une ligne dédiée et tant que les boites se suivent, elles sont les unes a côté des autres. Contrairement à ''inline'', les blocs n'ont pas une largeur de 100% mais s'adaptent au contenu.
+| <code css>
+p,
+ul {
+  border: 2px solid rebeccapurple;
+  padding: .5em;
+}
+.block,
+li {
+  border: 2px solid blue;
+  padding: .5em;
+}
+ul {
+  display: flex;
+  list-style: none;
+}
+dd {
+  display: inline-flex;
+  list-style: none;
+}
+.block {
+  display: block;
+}
+</code><code html>
+<ul>
+  <li>flex 1</li>
+  <li>flex 2</li>
+  <li>flex 3</li>
+</ul>
+<dl>
+  <dd>inline-flex 1</dd>
+  <dd>inline-flex 1</dd>
+<dl>
+<p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+</code> | <HTML>
+<style>
+.code4 p,
+.code4 ul {
+  border: 2px solid rebeccapurple;
+  padding: .5em;
+}
+.code4 .block,
+.code4 li {
+  border: 2px solid blue;
+  padding: .5em;
+}
+.code4 ul {
+  display: flex;
+  list-style: none;
+}
+.code4 dd {
+  display: inline-flex;
+  list-style: none;
+}
+.code4 .block {
+  display: block;
+}
+</style>
+<div class="code4">
+<ul>
+  <li>flex 1</li>
+  <li>flex 2</li>
+  <li>flex 3</li>
+</ul>
+<dl>
+  <dd>inline-flex 1</dd>
+  <dd>inline-flex 1</dd>
+<dl>
+<p>p block <span class="block">block</span> have been wrapped in a <span>inline block</span>.</p>
+</div>
+</HTML> |