1. 程式人生 > >使用box-sizing讓擁有padding屬性的元素不超出想要的寬度

使用box-sizing讓擁有padding屬性的元素不超出想要的寬度

這兩天做頁面的設計,想實現一個input最寬的一個搜尋框,所以用了
input{display:block; width:100%;}

由於預設的樣子 有點不好看,遂加入:

border:1px solid #FF8B02;
border-radius: 5px;
padding:10px;

可是問題來了,由於加入了padding屬性,導致頁面變形了。原因無它,就是因為width:100%後,瀏覽器又再外面加了20px;所以寬度超出了自己的預想。

例如:

input{display:bolck;width:500px;border:1px solid black;}
實際寬度為502px;

當加入

padding:10px;

實際的寬度就變成了522px;了,這和我想要的不一樣。

看到bootstrap中實現了我想要的效果:無論padding是多少,元素的寬高都不變;

比如我想要1000px;的畫素,加了padding 和border之後,實際的寬度還是1000px;

這樣border與padding都在內部了。

進過除錯研究發現一個屬性叫做box-sizing。使用了這個屬性之後就能讓它的寬度 不再超出想要的範圍了,實現了我想要的效果