css中box-sizing的使用心得

起初遇到的狀況是這個樣子的:

<div class="box-div">
 <span class="add-on"><i class="icon-search"></span>
 <input type="text" id="search-val" placeholder="搜索" />
 <button class="btn">搜索</button>
</div>    

我想要實現的效果以下

span標籤和搜索按鈕的寬度是固定部變的，可是搜索框的寬度須要是100%,爲了實現這樣的效果，我只能把span和button標籤進行絕對定位到相應的位置，這樣之後我會獲得以下的效果

很顯然這不是我想要的效果，因此我能夠把input的padding-left屬性設置爲30px，我覺得這樣就能夠實現最上面的效果了，可是因爲padding-left之後整個input的寬度也會發生變化，input的寬度就增大了，也不是100%了，很明顯這不是我想要的效果

寬度已經部對了，因此這個時候的解決辦法就只有css3的屬性box-sising了，我給input設置box-sising:border-box之後它就變成了我想要的樣子，剛開始以爲很神奇，而後仔細閱讀了box-sising的文檔，瞭解到以下的一些知識:

box-sizing 屬性容許您以確切的方式定義適應某個區域的具體內容。

參考:http://www.w3school.com.cn/tiy/t.asp?f=css3_box-sizing

個人理解就是讓你設置的區域寬度用百分比固定爲父元素的寬度對應的百分百，不會收到padding把把盒子撐大的效果

大概就是這樣的，解決方案就大師幫我想的。這個項目是一個web app如今用的是彈性佈局，後期會用botstrap加上響應式佈局，這個項目的ui徹底是用bootstrap實現的。