diff options
Diffstat (limited to 'files/ca/web/css/box-sizing/index.html')
| -rw-r--r-- | files/ca/web/css/box-sizing/index.html | 287 |
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"><div class="container"> - -<div class="parent"> - <p>Parent container</p> - <div class="child" style="box-sizing: content-box;"> - <p>Child container</p> - <p class="css"> - box-sizing: content-box;<br/> - width: 100%;<br/> - padding: 0;<br/> - border-width: 0;</p> - </div> -</div> - -<div class="parent"> - <p>Parent container</p> - <div class="child border-padding" style="box-sizing: content-box;"> - <p>Child container</p> - <p class="css"> - box-sizing: content-box;<br/> - width: 100%;<br/> - padding: 5px;<br/> - border-width: 10px;</p> - </div> -</div> - -<div class="parent"> - <p>Parent container</p> - <div class="child border-padding" style="box-sizing: border-box;"> - <p>Child container</p> - <p class="css"> - box-sizing: border-box;<br/> - width: 100%;<br/> - padding: 5px;<br/> - border-width: 10px;</p> - </div> -</div> - -</div> -</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"><div class="content-box">Content box</div> -<br> -<div class="border-box">Border box</div></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> |