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, 287 insertions, 0 deletions
diff --git a/files/ca/web/css/box-sizing/index.html b/files/ca/web/css/box-sizing/index.html new file mode 100644 index 0000000000..33d55a232a --- /dev/null +++ b/files/ca/web/css/box-sizing/index.html @@ -0,0 +1,287 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |