Antes, encontrei várias armadilhas estranhas ao aprender bootstrap. Se eu fizer meu trabalho preparatório antes de aprender o bootstrap, posso evitar algumas armadilhas em maior ou menor grau. Abaixo, o editor apresentará o conhecimento do atributo de caixa de fronteira.
No próprio arquivo CSS da Boostrap: boostrap.css, há um pedaço de código:
* {-webkit-box-sizing: Border-box; -Moz-Box-dimension: Border-box; Timing de caixa: caixa de fronteira; }Isso significa que, ao escrever código, essa propriedade estará em toda parte. Então, o que diabos é esse tamanho de caixa: Boder-Box? Vamos primeiro olhar para um código de código muito comum:
<div> <div> </div> </div>
Execute o código para descobrir: a altura externa é de 702px, a largura interna é de 500px e a altura é de 500px; Todos não devem ter dúvidas aqui, vamos dar uma olhada em outro pedaço de código agora:
* {-webkit-box-sizing: Border-box; -Moz-Box-dimension: Border-box; Timing de caixa: caixa de fronteira; } <div> <div> </div> </div>Este código é na verdade a adição dos dois primeiros códigos. Pode -se entender simplesmente que agora você começa a escrever código na estrutura da Boostrap. O resultado do código em execução é: a largura da externa é de 500px e a altura do interno é de 298px;
A razão para este resultado é: tamanho da caixa: caixa de fronteira para que a largura e a altura dos elementos não sejam afetadas pelo preenchimento e pela borda. Por exemplo, no código acima, mesmo que o exterior tenha preenchimento e borda, o preenchimento e a borda não afetarão a largura e a altura da externa, e a largura e a altura da externa ainda são 500px; Mas para onde foi o preenchimento e a fronteira? Resposta: Entre! Abra a ferramenta de depuração do navegador e veja os detalhes do estilo da externa:
Podemos ver claramente que o preenchimento e a borda são válidos, mas eles ocupam o espaço interno do exterior. Como o preenchimento: 100px ocupa a largura de 200px e o valor da altura da externa, e a borda ocupa a largura e o valor da largura e a altura do interno, para que o interno possa obter apenas a largura e o valor da largura e a altura de 298px do exterior.
Se você tem experiência em desenvolvimento na web no IE, encontrará que o tamanho de caixa: a caixa de fronteira é o modo estranho da versão inferior do IE.
O exposto acima é o conhecimento relevante sobre a preparação do impulso para a caixa de fronteira apresentada a você pelo editor. Você aprendeu? Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Ao mesmo tempo, gostaria de agradecer a todos pelo apoio ao site do Wulin.com!
Abaixo está uma breve introdução ao entendimento da caixa de fronteira de tamanho de caixa
-Webkit-box-sizing: Border-box; Em seguida, a largura e a altura estabelecidas pela div incluirão bordas e preenchimento
<! Doctype html> <html> <head> <title> box-sizing </title> <style type = "text/css">. TestDiv {preenchimento: 10px; Border-box; "> especial </div> </body> </html>