{"id":345,"date":"2016-11-01T18:23:31","date_gmt":"2016-11-01T20:23:31","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=345"},"modified":"2016-11-01T23:06:50","modified_gmt":"2016-11-02T01:06:50","slug":"o-box-model","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/o-box-model\/","title":{"rendered":"O Box Model"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/11\/border-box-diagram.png\" alt=\"O Box Model\" \/>\n<p>S\u00e3o apenas caixas e quando voc\u00ea perceber isso, boa parte da complexidade do CSS ser\u00e1 esclarecida.<\/p>\n<p>Os principais elementos que definem as dimens\u00f5es e distanciamento das caixas s\u00e3o: Width \/ Height, Padding, Border (e Box-shadow).<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"1c001ac59faa80bbcea6e78d73b8bd6d\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-pen-title=\"1c001ac59faa80bbcea6e78d73b8bd6d\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/1c001ac59faa80bbcea6e78d73b8bd6d\/\">1c001ac59faa80bbcea6e78d73b8bd6d<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>O Width e Height por padr\u00e3o, s\u00e3o definidos como auto. Isso significa que eles se expandem de acordo com o conte\u00fado da caixa. O conte\u00fado geralmente \u00e9 formado por textos ou imagens.<\/p>\n<p>O Padding \u00e9 considerado a margem interna da caixa. Ele cria um espa\u00e7o negativo (espa\u00e7o em branco \/ respiro) entre o conte\u00fado e a borda da caixa.<\/p>\n<p>O Border define as bordas. Estas podem ser s\u00f3lidas, duplas, pontilhadas e etc. Voc\u00ea pode definir a cor que quiser da borda.<\/p>\n<p>Por padr\u00e3o estes primeiros elementos somam para formar as dimens\u00f5es finais da caixa. Ent\u00e3o um elemento com 200px de width, 20px de padding para cada lado e 5px de border para cada lado, possui uma largura de 250px no total.<\/p>\n<p>Esse comportamento padr\u00e3o pode ser mudado, utilizando a propriedade box-sizing: border-box;. Com ela o padding e border ao inv\u00e9s de somarem, passam a diminuir o tamanho interno do conte\u00fado. Ou seja, a caixa vai ter sempre 200px de largura, por\u00e9m a \u00e1rea interna dispon\u00edvel para conte\u00fado vai diminuir de acordo com o tamanho do padding e border.<\/p>\n<p>O Margin \u00e9 a margem externa e vai influenciar na rela\u00e7\u00e3o da dist\u00e2ncia da caixa e os elementos em volta da mesma.<\/p>\n<p>Esses 4 elementos juntos formam o que chamamos de Box Model, ou seja, modelo de caixa. As sombras n\u00e3o fazem parte do box-model, por\u00e9m eu resolvi incluir nessa explica\u00e7\u00e3o pelos seguintes motivos:<\/p>\n<p>O box-shadow \u00e9 muito poderoso, ele vai muito al\u00e9m da cria\u00e7\u00e3o de sombras apenas. Eu geralmente uso ele para criar bordas mais estilizadas, bordas duplas, que se cruzam e etc. Tudo isso \u00e9 poss\u00edvel utilizando uma sombra s\u00f3lida, ou seja, uma sombra que n\u00e3o se dispersa.<\/p>\n<pre><code class=\"language-css\">\n.sombra-solida {\n    box-shadow: 0 0 0 20px #84e;\n}\n<\/code><\/pre>\n<p>O exemplo acima possui uma sombra s\u00f3lida. Para criar elas basta manter o terceiro valor como 0.<\/p>\n<p>As sombras funcionam de maneira diferente no box-model, elas n\u00e3o adicionam volume algum aos elementos. Se voc\u00ea tiver sombras maiores do que a dist\u00e2ncia entre um elemento e outro, estas ir\u00e3o ignorar os outros elementos e se posicionar acima ou abaixo dos mesmos (dependendo se este elemento vem antes ou ap\u00f3s o outro).<\/p>\n<p>Exemplo, se voc\u00ea tiver uma sombra s\u00f3lida de 25px e margens de 10px, ver\u00e1 que 15px da sombra ficar\u00e1 por cima ou abaixo dos elementos pr\u00f3ximos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>S\u00e3o apenas caixas e quando voc\u00ea perceber isso, boa parte da complexidade do CSS ser\u00e1 esclarecida. Os principais elementos que definem as dimens\u00f5es e distanciamento das caixas s\u00e3o: Width \/ Height, Padding, Border (e Box-shadow). See the Pen 1c001ac59faa80bbcea6e78d73b8bd6d by Andr\u00e9 | Origamid (@origamid) on CodePen. O Width e Height por padr\u00e3o, s\u00e3o definidos como [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/345"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":6,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/345\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}