Quando si utilizza il ridimensionamento della casella: border box in CSS, presumo che la larghezza totale di un elemento sia definita nel suo valore "larghezza". Quindi se dico che la larghezza di una divisione è 20px e il margine destro è 10px, finirò con una scatola che occupa lo spazio di 20px e metà è il bordo destro. Spingendola al punto in cui ho impostato la larghezza a 10px e il bordo destro, anche, come qui:Perché il ridimensionamento della casella: border-box mostra ancora il bordo con una larghezza di 0px?
#box{
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 100px;
background: black;
border-right: 10px solid red;
}
casella consisterà solo il bordo rosso. Cosa dovrebbe succedere quando imposto la larghezza su 0px? Ho pensato che sarebbe rendere il tutto scompare, ma no, il risultato è esattamente lo stesso come quello qui sopra: jsFiddle
La mia domanda è se questo è il comportamento previsto. Sembra incoerente per me. Mi piacerebbe far scomparire una scatola solo manipolando la larghezza/altezza. Grazie per qualsiasi input.
Che browser stai utilizzando? Non tutti i browser supportano il ridimensionamento della scatola direttamente. Alcuni hanno il proprio dimensionamento di riquadri proprietario come '-moz-box-sizing' e' -webkit-box-sizing'. Se vuoi far sparire qualcosa, considera l'uso di 'display: none;' o 'visibility: hidden;' – Jrod
Potrei anche usare un martello per rompere un uovo ... ma sto cercando di non farlo :) Sto scherzando, davvero hai bisogno che l'elemento scompaia in quel modo ... pensa a una fessura ... – Seka
Vuoi dire una specie di animazione in cui lentamente diminuisci la larghezza a zero? Non sei proprio sicuro di cosa intendi con una fessura. Se potessi approfondire esattamente ciò che stai cercando di raggiungere, forse un'altra soluzione più appropriata. Come con la maggior parte delle cose ci sono molti modi per farlo. Forse un artiglio è una scelta sbagliata, ma forse un martello demolitore è proprio il tuo vicolo. – Jrod