響應(yīng)式Web設(shè)計(jì)經(jīng)常需要我們通過百分比設(shè)置組件寬度。如果我們不考慮邊框，那么很容易就可以實(shí)現(xiàn)，但如果你給每一列以及總寬度都采用百分比設(shè)置，那這個(gè)時(shí)候固定的邊框大小就會(huì)出來搗亂。下面我們將看到一組方法去解決這個(gè)問題，你會(huì)學(xué)到如何創(chuàng)建一個(gè)流式布局，而不用擔(dān)心額外的邊框以及內(nèi)邊距。 假設(shè)我們需要一個(gè)五列的布局。我們要考慮的第一件事就是外邊距（margins）.假設(shè)所有的列都需要4%的外邊距，我們需要為所有的外邊距保留20%（4%*5（5列）=20%）的占寬比；然后我們從總寬比（100%）里面減去20%，得到的就是所有列實(shí)際占的總寬比。所以每一列的占寬比即16%（80% /5）。下面是一個(gè)詳細(xì)的圖表：
相應(yīng)的CSS代碼如下： .column{     width:16%;     margin: 2% 2%;    float: left;    background: #03a8d2;   }  對(duì)應(yīng)的界面是：
當(dāng)我們給每一列添加一個(gè)2px的邊框時(shí)，問題出現(xiàn)了，如下圖，最后一列被擠到下面去了。
解決方案當(dāng)然應(yīng)該是：在之前的計(jì)算中我們應(yīng)該考慮到邊框（border），但是我們?cè)趺慈プ瞿兀拷Y(jié)論是，我們不能用百分比去設(shè)置border邊框的大小，只能用一個(gè)固定的值。因?yàn)槿绻械亩际褂冒俜直仍O(shè)置，那么我們留給border的空間也會(huì)是一個(gè)變化的值，也就是說當(dāng)頁面寬度變化時(shí)，border的值也會(huì)跟著變化，這樣是有問題的。這使得我們沒有辦法去決定我們邊框的寬度！   解決方案 設(shè)置CSS的box-sizing屬性值為“border-box”，這樣就會(huì)把borders和padding全都包含在定義的寬高里面。這就意味著一個(gè)帶有2px邊框的200px的div仍然寬度是200px!!是不是很神奇呢？ .column{      width: 16%;      margin: 2% 2%;      float: left;      background:#03a8d2;      border: 2px solid black;      box-sizing: border-box;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;  } 
即使我們加上padding，也同樣可以正常顯示：
瀏覽器兼容性問題： 兼容性和上面的一樣，除了IE需要8以上的版本，其他瀏覽器均可兼容，同時(shí)這個(gè)方法不會(huì)出現(xiàn)上面提到的陰影問題?？棄?mèng)無憂（www.dedecms51.com 專注織夢(mèng)好模板）