aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/css/box-sizing/index.html
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/css/box-sizing/index.html
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/css/box-sizing/index.html')
-rw-r--r--files/ca/web/css/box-sizing/index.html287
1 files changed, 0 insertions, 287 deletions
diff --git a/files/ca/web/css/box-sizing/index.html b/files/ca/web/css/box-sizing/index.html
deleted file mode 100644
index 7b6fd52199..0000000000
--- a/files/ca/web/css/box-sizing/index.html
+++ /dev/null
@@ -1,287 +0,0 @@
----
-title: box-sizing
-slug: Web/CSS/box-sizing
-tags:
- - CSS
- - CSS Property
- - Reference
-translation_of: Web/CSS/box-sizing
----
-<div>{{CSSRef}}</div>
-
-<p>La propietat CSS <strong><code>box-sizing</code></strong> s'utilitza per modificar el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">model de caixa CSS</a> predeterminat usat per calcular l'amplada i l'alçada dels elements.</p>
-
-<pre class="brush: css no-line-numbers">/* Keyword values */
-box-sizing: content-box;
-box-sizing: border-box;
-
-/* Global values */
-box-sizing: inherit;
-box-sizing: initial;
-box-sizing: unset;
-</pre>
-
-<p>En CSS, de manera predeterminada, l'amplada i l'alçada que s'assigna a un element només s'aplica a la caixa de contingut de l'element. Si l'element té qualsevol vora o farcit, aquest s'afegeix a l'amplada i alçada per arribar a la grandària de la caixa que es representa en la pantalla. Això significa que quan fixeu l'amplada i l'alçada, heu d'ajustar el valor que dóna per permetre qualsevol vora o farcit que pugui ser afegit. Això és especialment difícil quan s'implementa un disseny sensible.</p>
-
-<p>La propietat <code>box-sizing</code> es pot utilitzar per ajustar aquest comportament:</p>
-
-<ul>
- <li><code>content-box</code> és el valor predeterminat i proporciona el comportament predeterminat de box-sizing CSS. Si s'estableix l'amplada d'un element a 100 píxels, la caixa de contingut de l'element serà de 100 píxels d'amplada i l'amplada de qualsevol vora o farciment s'afegirà a l'amplada final representada.</li>
- <li><code>border-box</code> l'indica al navegador que tingui en compte qualsevol vora i farcit en el valor que s'especifiqui per a l'amplada i l'alçada. Si s'estableix l'amplada d'un element a 100 píxels, els 100 píxels inclouran qualsevol vora o farcit que s'hàgi afegit i la caixa de contingut s'encongirà per absorbir aquest ample addicional. Això generalment fa molt més fàcil la grandària dels elements.</li>
-</ul>
-
-<p>Alguns experts recomanen que els desenvolupadors web considerin <a href="https://css-tricks.com/international-box-sizing-awareness-day/">aplicar rutinariament <code>box-sizing: border-box</code> a tots els elements</a>.</p>
-
-<div id="box-sizing">
-<pre class="hidden brush: html">&lt;div class="container"&gt;
-
-&lt;div class="parent"&gt;
- &lt;p&gt;Parent container&lt;/p&gt;
- &lt;div class="child" style="box-sizing: content-box;"&gt;
- &lt;p&gt;Child container&lt;/p&gt;
- &lt;p class="css"&gt;
- box-sizing: content-box;&lt;br/&gt;
- width: 100%;&lt;br/&gt;
- padding: 0;&lt;br/&gt;
- border-width: 0;&lt;/p&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="parent"&gt;
- &lt;p&gt;Parent container&lt;/p&gt;
- &lt;div class="child border-padding" style="box-sizing: content-box;"&gt;
- &lt;p&gt;Child container&lt;/p&gt;
- &lt;p class="css"&gt;
- box-sizing: content-box;&lt;br/&gt;
- width: 100%;&lt;br/&gt;
- padding: 5px;&lt;br/&gt;
- border-width: 10px;&lt;/p&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="parent"&gt;
- &lt;p&gt;Parent container&lt;/p&gt;
- &lt;div class="child border-padding" style="box-sizing: border-box;"&gt;
- &lt;p&gt;Child container&lt;/p&gt;
- &lt;p class="css"&gt;
- box-sizing: border-box;&lt;br/&gt;
- width: 100%;&lt;br/&gt;
- padding: 5px;&lt;br/&gt;
- border-width: 10px;&lt;/p&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;/div&gt;
-</pre>
-
-<pre class="hidden brush: css">p {
- margin-left: 0.2em;
- font-family: "Open Sans", sans-serif;
-}
-
-.container {
- display: flex;
-}
-
-.parent {
- width: 220px;
- border: solid 10px #FFC129;
- margin: 0.8em;
-}
-
-.child {
- width: 100%;
- margin: 2em auto;
- background-color: rgba(229, 232, 252, 0.6);
-}
-
-.border-padding {
- padding: 5px;
- border: solid #5B6DCD 10px;
-}
-
-.css {
- font-family: monospace;
-}
-</pre>
-
-<p>{{EmbedLiveSample("box-sizing", 1200, 340, "", "", "example-outcome-frame")}}</p>
-</div>
-
-<p>L'exemple anterior mostra tres escenaris. En cada escenari hi ha un DIV pare (amb una vora taronja) que conté un DIV fill. El fill té fixat un <code>width: 100%</code>  i un fons blau pàl·lid.</p>
-
-<ul>
- <li>El primer escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill no té farcit ni cap vora, i s'adapta perfectament a l'interior del seu pare.</li>
- <li>El segon escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill se li ha afegit farcit i una vora. El fill es vessa fora del pare perquè el seu ample es calcula amb només el contingut: llavors s'afegeix el farciment i la vora per fer l'amplada representada.</li>
- <li>El tercer escenari utilitza <code>box-sizing: border-box</code>. El DIV fill ara s'adapta perfectament a l'interior del seu pare, ja que el seu <code>width: 100%</code> representa el farciment i la vora.</li>
-</ul>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Sintaxi">Sintaxi</h2>
-
-<p>La propietat <code>box-sizing</code> s'especifica com una paraula clau única seleccionada de la llista de valors a continuació.</p>
-
-<h3 id="Valors">Valors</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>Aquest és el valor inicial i predeterminat especificat per l'estàndard CSS. Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} es mesuren incloent només el contingut, però no el farciment, la vora o el marge. Per exemple, si establiu <code>.box {width: 350px;}</code>, apliqueu <code>{border: 10px solid black;}</code> , llavors el resultat representat és una <code>caixa de width: 370px.</code></dd>
- <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = amplària del contingut, i alçada = alçada del contingut (excloent els valors de vora i farciment).</em></dd>
- <dt><code>border-box</code></dt>
- <dd>Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} inclouen el contingut, el farciment i la vora, però no el marge. Note that padding and border will be inside of the box e.g. <code>.box {width: 350px; border: 10px solid black;}</code> leads to a box rendered in the browser of <code>width: 350px</code>. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.</dd>
- <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = vora + farciment + amplària del contingut</em>, i <em>alçada = vora + farciment + alçada del contingut</em>.</dd>
-</dl>
-
-<h3 id="Sintaxi_formal">Sintaxi formal</h3>
-
-{{csssyntax}}
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
-&lt;br&gt;
-&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">div {
- width: 160px;
- height: 80px;
- padding: 20px;
- border: 8px solid red;
- background: yellow;
-}
-
-.content-box {
- box-sizing: content-box;
-}
-
-.border-box {
- box-sizing: border-box;
-}
-</pre>
-
-<h3 id="Resultat">Resultat</h3>
-
-<p>{{EmbedLiveSample('Exemple','auto','300')}}</p>
-
-<h2 id="Especificacions">Especificacions</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Especificació</th>
- <th scope="col">Estat</th>
- <th scope="col">Comentari</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
- <td>{{Spec2('CSS3 Basic UI')}}</td>
- <td>Definició inicial.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Navegadors_compatibles"><span class="short_text" id="result_box" lang="ca"><span>Navegadors compatibles</span></span></h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Descripció</th>
- <th>Chrome</th>
- <th>Edge</th>
- <th>Firefox (Gecko)</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari (WebKit)</th>
- </tr>
- <tr>
- <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td>
- <td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br>
- 10.0</td>
- <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
- {{CompatVersionUnknown}}</td>
- <td>
- <p>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
- {{CompatGeckoDesktop("29.0")}}<sup>[2]</sup></p>
- </td>
- <td>
- <p>8.0<sup>[1]</sup></p>
- </td>
- <td>7.0</td>
- <td>3.0 (522){{property_prefix("-webkit")}}<br>
- 5.1<sup>[3]</sup></td>
- </tr>
- <tr>
- <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
- {{CompatGeckoDesktop("29.0")}}<br>
- Eliminat a {{CompatGeckoDesktop("50.0")}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Descripció</th>
- <th>Android</th>
- <th>Edge</th>
- <th>Firefox Mobile (Gecko)</th>
- <th>IE Phone</th>
- <th>Opera Mobile</th>
- <th>Safari Mobile</th>
- </tr>
- <tr>
- <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td>
- <td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br>
- 4.0</td>
- <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
- {{CompatVersionUnknown}}</td>
- <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
- {{CompatGeckoMobile("29.0")}}<sup>[2]</sup></td>
- <td>9.0</td>
- <td>{{CompatVersionUnknown}}</td>
- <td>{{CompatVersionUnknown}}</td>
- </tr>
- <tr>
- <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
- {{CompatGeckoMobile("29.0")}}<br>
- Eliminat a {{CompatGeckoMobile("50.0")}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- <td>{{CompatNo}}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>box-sizing</code> no es respectat quan l'alçada es calcula a partir de {{domxref("window.getComputedStyle()")}}, en Internet Explorer (totes les versions), en Firefox anterior a la 23, i en Chrome. Edge no presenta el problema. Tingueu en compte que la propietat <code>currentStyle</code> retorna el valor correcte de <code>height</code>.</p>
-
-<p>[2] A més del suport no prefixat, Gecko 44.0 {{geckoRelease("44.0")}} va afegir suport per a una versió prefixada <code>-webkit</code> de la propietat per raons de compatibilitat web darrere de la preferència <code>layout.css.prefixes.webkit</code>, per defecte a <code>false</code>. Des de Gecko 49.0 {{geckoRelease("49.0")}} la preferència per defecte és <code>true</code>.</p>
-
-<p>[3] El prefix de proveïdor <code>-webkit</code> s'ha eliminat a <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p>
-
-<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Model de caixa CSS</a></li>
-</ul>