擊敗邊框 帶border的百分比布局

2021-08-11 12:42:09 字數 1222 閱讀 2442

響應式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...