響應式web設計經常需要我們通過百分比設定元件寬度。如果我們不考慮邊框，那麼很容易就可以實現，但如果你給每一列以及總寬度都採用百分比設定，那這個時候固定的邊框大小就會出來搗亂。下面我們將看到一組方法去解決這個問題，你會學到如何建立乙個流式布局，而不用擔心額外的邊框以及內邊距。
假設我們需要乙個五列的布局。我們要考慮的第一件事就是外邊距（margins）.假設所有的列都需要4%的外邊距，我們需要為所有的外邊距保留20%（4%*5（5列）=20%）的佔寬比；然後我們從總寬比（100%）裡面減去20%，得到的就是所有列實際佔的總寬比。所以每一列的佔寬比即16%（80% /5）。下面是乙個詳細的圖表：
相應的css**如下：
.column
對應的介面是：
當我們給每一列新增乙個2px的邊框時，問題出現了，如下圖，最後一列被擠到下面去了。
解決方案當然應該是：在之前的計算中我們應該考慮到邊框（border），但是我們怎麼去做呢？結論是，我們不能用百分比去設定border邊框的大小，只能用乙個固定的值。因為如果所有的都使用百分比設定，那麼我們留給border的空間也會是乙個變化的值，也就是說當頁面寬度變化時，border的值也會跟著變化，這樣是有問題的。這使得我們沒有辦法去決定我們邊框的寬度！
解決方案
設定css的box-sizing屬性值為「border-box」，這樣就會把borders和padding全都包含在定義的寬高裡面。這就意味著乙個帶有2px邊框的200px的div仍然寬度是200px!!是不是很神奇呢？
即使我們加上padding，也同樣可以正常顯示：
瀏覽器相容性問題：
相容性和上面的一樣，除了ie需要8以上的版本，其他瀏覽器均可相容，同時這個方法不會出現上面提到的陰影問題。
H5 邊框 帶border的百分比布局
響應式web設計經常需要我們通過百分比設定元件寬度。如果我們不考慮邊框，那麼很容易就可以實現，但如果你給每一列以及總寬度都採用百分比設定，那這個時候固定的邊框大小就會出來搗亂。下面我們將看到一組方法去解決這個問題，你會學到如何建立乙個流式布局，而不用擔心額外的邊框以及內邊距。假設我們需要乙個五列的布...
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
百分比布局
參考位址 螢幕的適配是我們android開發最經常做的事情之一，我們一直指望著能夠一套布局適配所有。於是在android5.0之後，提供了android support percent lib，這樣我們可以盡情的使用。使用的時候，我們嗯需要設定的有 layout marginpercent layo...