![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.30.31.png\")
<\/figure>\n\n\n\nBorder<\/h2>\n\n\n\n
Les caixes estan delimitades per un \u00abborder\u00bb (vora). Aquesta vora pot ser no visible o visible. Si es visible, podem modificar-ne 3 propietats:<\/p>\n\n\n\n
- \n
- border-width (gruix)<\/li>\n\n\n\n
- border-style (solid, dotted, dashed,…)<\/li>\n\n\n\n
- border-color<\/li>\n<\/ul>\n\n\n\n
Margin<\/h2>\n\n\n\n
Les caixes tenen un espai exterior que les separa entre elles (margin)<\/p>\n\n\n\n
Padding<\/h2>\n\n\n\n
Les caixes tenen un espai intern entre els l\u00edmits (el border) i el contingut (el text o altres caixes). Aquest espai intern \u00e9s el padding<\/p>\n\n\n\n
Podem modificar qualsevol d’aquestes propietats en general (canviar tot el marge exterior, o tot el padding interior) o per separat, donant diferents valors a les coordenades superior (top), dreta (right), esquerra (left) o inferior (bottom).<\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.37.21.png\")
<\/figure>\n\n\n\nExemple<\/p>\n\n\n\n
Propietats per modificar el padding:<\/p>\n\n\n\n
- \n
- padding (tot)<\/li>\n\n\n\n
padding-top<\/code><\/li>\n\n\n\npadding-right<\/code><\/li>\n\n\n\npadding-bottom<\/code><\/li>\n\n\n\npadding-left<\/code><\/li>\n<\/ul>\n\n\n\nBorder-radius<\/h2>\n\n\n\n
Per defecte, les caixes tenen un border-radius de 0 p\u00edxels. Podem arrodonir les cantonades fent servir la propietat border-radius. Si la caixa t\u00e9 un color de fons o t\u00e9 una vora visible i fem els cantos arrodonits, ho veurem. Evidentment, si la caixa t\u00e9 el fons blanc o transparent i est\u00e0 sobre un fons blanc, no veurem els cantos arrodonits.<\/p>\n\n\n\n
Background<\/h2>\n\n\n\n
Una altra propietat de les caixes \u00e9s el fons. Podem modificar el fons amb un color (background-color), amb una imatge (background-image) o les dues coses.<\/p>\n\n\n\n
Tipus de display<\/h2>\n\n\n\n
Hem fet l’exercici de donar un color de fons a diferents elements (par\u00e0grafs, articles, seccions,…) i podem veure que hi ha 2 grans grups d’elements:<\/p>\n\n\n\n
- \n
- Aquells que van de banda a banda i estan separats del seg\u00fcent element verticalment (es col\u00b7loquen un a sota l’altra)<\/li>\n\n\n\n
- Aquells que nom\u00e9s ocupen l’espai m\u00ednim per a visualitzar-ne el contingut<\/li>\n<\/ul>\n\n\n\n
Per tant, podem dir que:<\/p>\n\n\n\n
- \n
- Els elements que van de banda a banda s\u00f3n del tipus block<\/strong><\/li>\n\n\n\n
- Els que nom\u00e9s ocupen l’espai m\u00ednim s\u00f3n del tipus inline<\/strong><\/li>\n<\/ul>\n\n\n\n
Per defecte, les imatges i els enlla\u00e7os s\u00f3n del tipus inline. Els par\u00e0grafs, h1, h2,.. s\u00f3n del tipus block<\/p>\n\n\n\n
Amb CSS podem eliminar el display d’un element, donant-li el valor \u00abnone\u00bb (cap).
Els elements amb el tipus de display \u00abnone\u00bb desapareixen del navegador. \u00c9s important tenir en compte, per\u00f2, que no desapareixen del HTML<\/p>\n\n\n\nTipus de visibilitat<\/h2>\n\n\n\n
Amb CSS tamb\u00e9 podem modificar la visibilitat d’un element. <\/p>\n\n\n\n
- \n
- visibility: hidden; fa invisible un element, per\u00f2 el navegador segueix reservant-hi el seu espai<\/li>\n\n\n\n
- visibility: visible; fa visible un element<\/li>\n<\/ul>\n\n\n\n
Propietats en proc\u00e9s de standaritzaci\u00f3<\/h2>\n\n\n\n
El CSS, com l’HTML, es va revisant de tant en tant. A cada revisi\u00f3, es decideix quines propietats es converteixen en standard<\/em>, quines es descarten i quines es posen en per\u00edode de prova.<\/p>\n\n\n\n
Quan un navegador encara no s’ha decidit sobre una propietat, cal posar-li un prefixe al davant per a que aquell navegador la interpreti<\/p>\n\n\n\n
![\"\"](\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/Captura-de-pantalla-2023-05-08-a-las-15.54.41.png\")
<\/figure>\n\n\n\nPer exemple, amb CSS podem fer transicions entre estats d’un element, per\u00f2 aquestes transicions encara no estan donades per 100% desenvolupades i haurem d’escriure la mateixa propietat v\u00e0ries vegades, una per cada navegador que necessita veure-la prefixada:<\/p>\n\n\n\n
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;<\/pre>\n\n\n\nAlgunes de les propietats que ja podem fer servir sense prefixe, han tingut prefixe abans, per exemple el border-radius, que fins fa poc s’havia d’escriure aix\u00ed:<\/p>\n\n\n\n
-moz-border-radius: 10px;\n-webkit-border-radius: 10px;\n-webkit-border--radius: 10px;\n-webkit-border-radius: 10px;\nborder-radius: 10px; <\/pre>\n\n\n\n
Box sizing<\/h2>\n\n\n\n
Hi ha dues maneres d’establir la mida d’una caixa. <\/p>\n\n\n\n
Per la majoria de navegadors, l’amplada i l’al\u00e7ada d’un element \u00e9s fruit de la suma de l’amplada\/al\u00e7ada del contingut (o for\u00e7ada per CSS amb les propietats width i height), del padding i del border:<\/p>\n\n\n\n
width + padding + border = espai horitzontal que ocupa una caixa
height + padding + border = espai vertical que ocupa una caixa<\/p>\n\n\n\nAix\u00f2 significa que si la caixa t\u00e9 border o padding, l’amplada final no es correspondr\u00e0 amb l’amplada establerta amb la propietat width,<\/p>\n\n\n\n
Podem dir que els navegadors treballen de manera diferent a l’hora de dimensionar les caixes, a l’hora de fer el box sizing (box-sizing).<\/p>\n\n\n\n
- \n
- content-box<\/strong>: \u00e9s el sistema per defecte, on els marges i la vora es sumen<\/li>\n\n\n\n
- border-box<\/strong>: permet que el padding (no el margin!) i la vora (border) estiguin inclosos al valor definit per l’amplada i l’al\u00e7ada <\/li>\n<\/ul>\n\n\n\n
\nTRUC:<\/p>\n\n\n\n
Podem modificar el box-sizing de tos els elements amb CSS abans de fer cap regla<\/p>\n\n\n\n
*{
box-sizing border-box;<\/code>
}<\/code><\/pre>\n\n\n\nAsterisc significa \u00abqualsevol element\u00bb \/ comod\u00ed<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
El navegador tracta qualsevol element com una caixa. Tant \u00e9s si \u00e9s un par\u00e0graf com una secci\u00f3, o el propi body. Les caixes tenen una s\u00e8rie de propietats, que haurem de con\u00e9ixer per a poder modificar-les: Border Les caixes estan delimitades per un \u00abborder\u00bb (vora). Aquesta vora pot ser no visible o visible. Si es… Continueu llegint Model de caixa<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":5,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/54\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- border-box<\/strong>: permet que el padding (no el margin!) i la vora (border) estiguin inclosos al valor definit per l’amplada i l’al\u00e7ada <\/li>\n<\/ul>\n\n\n\n
- content-box<\/strong>: \u00e9s el sistema per defecte, on els marges i la vora es sumen<\/li>\n\n\n\n
- Els que nom\u00e9s ocupen l’espai m\u00ednim s\u00f3n del tipus inline<\/strong><\/li>\n<\/ul>\n\n\n\n
- Els elements que van de banda a banda s\u00f3n del tipus block<\/strong><\/li>\n\n\n\n