From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/containing_block/index.html | 36 ++++++++++------------------ 1 file changed, 13 insertions(+), 23 deletions(-) (limited to 'files/fr/web/css/containing_block/index.html') diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html index 538fa642c6..8e3bff8fb9 100644 --- a/files/fr/web/css/containing_block/index.html +++ b/files/fr/web/css/containing_block/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur ---
{{CSSRef}}
-

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

+

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :

@@ -21,7 +21,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
  • La zone de marge (margin area)
  • -

    Diagram of the box model

    +

    Diagram of the box model

    Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

    @@ -70,7 +70,7 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur

    Le code HTML utilisé pour les exemples suivants sera :

    -
    <body>
    +
    <body>
       <section>
         <p>Et voici un paragraphe !</p>
       </section>
    @@ -81,16 +81,14 @@ original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
     
     

    Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.

    - -
    body {
    +
    body {
       background: beige;
     }
     
    @@ -116,16 +114,14 @@ p {
     
     

    Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.

    - -
    body {
    +
    body {
       background: beige;
     }
     
    @@ -147,16 +143,14 @@ p {
     
     

    Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).

    - -
    body {
    +
    body {
       background: beige;
     }
     
    @@ -186,16 +180,14 @@ p {
     
     

    Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.

    - -
    body {
    +
    body {
       background: beige;
     }
     
    @@ -223,16 +215,14 @@ p {
     
     

    Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.

    - -
    body {
    +
    body {
       background: beige;
     }
     
    -- 
    cgit v1.2.3-54-g00ecf