摘要:現(xiàn)象用浮動布局時,如果為子元素的寬度指定絕對值,并且子元素具有邊框,在縮放瀏覽器的時候會出現(xiàn)錯位現(xiàn)象。舉例正常顯示效果縮小為原本后產(chǎn)生錯位解決方法一利用屬性的指定寬度和高度最小最大屬性確定元素邊框。
現(xiàn)象:
用浮動布局時, 如果為子元素的寬度指定絕對值,并且子元素具有邊框,在縮放瀏覽器的時候會出現(xiàn)錯位現(xiàn)象。
這種現(xiàn)象產(chǎn)生的原因是:
瀏覽器縮放時,子元素父元素的內(nèi)容都等比例縮放,而子元素的邊框不能等比例縮放,在縮放到達一定程度后,會造成子元素大于父元素,從而產(chǎn)生錯位現(xiàn)象。
.wrapper { width: 400px; background-color: pink; } .wrapper::after { content: ""; display: block; clear: both; } .wrapper > div { float: left; height: 200px; /* box-sizing: border-box;*/ } .wrapper > div.left { width: 99px; border-right: 1px solid #ccc; background-color: orange; } .wrapper > div.right { width: 300px; background-color: lightblue; }
leftright
正常顯示效果:
縮小為原本67%后產(chǎn)生錯位:
解決方法一:利用box-sizing屬性的border-box.[border-box:指定寬度和高度(最小/最大屬性)確定元素邊框box。也就是說,對元素指定寬度和高度包括padding和border的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算]
css:
.wrapper { width: 400px; background-color: pink; } .wrapper::after { content: ""; display: block; clear: both; } .wrapper > div { float: left; height: 200px; /*解決錯位*/ box-sizing: border-box; } .wrapper > div.left { width: 99px; border-right: 1px solid #ccc; background-color: orange; } .wrapper > div.right { width: 300px; background-color: lightblue; }
縮放50%后的效果
解決方法二:將子元素浮動,即兩個元素不在一個文檔流中,從而避免產(chǎn)生錯位
CSS:
.wrapper { width: 400px; background-color: pink; } .wrapper > div { height: 200px; } .wrapper > div.left { width: 99px; border-right: 1px solid #ccc; background-color: orange; float: left; } .wrapper > div.right { margin-left: 100px; width: 300px; background-color: lightblue; }
縮放30%后的效果:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/115921.html
摘要:由于第二種方法如今已經(jīng)采用的非常少,所以我們在這兒不做講解一帶填充的是一種可以在中繞過同源策略,并發(fā)起跨域請求的使用模式,可以啟動的跨域請求同源策略有一個顯著的例外,腳本元素是可以規(guī)避檢查的。 講跨域之前,我們先來講同源策略(SOP),同源策略是網(wǎng)景公司提出的一個著名安全策略。所謂同源就是域名、協(xié)議、端口相同。例如http://www.12306.cn中,http就是超文本傳輸協(xié)議,1...
摘要:最近開發(fā)一個內(nèi)部的記錄系統(tǒng)其中有一個需求要求將所有數(shù)據(jù)庫操作記錄下來為此想了一些方案記錄一下思路演化這個需求出來的一瞬間我就否定了在業(yè)務(wù)邏輯層保存操作記錄的方案我認為這樣耦合度比較高成本也太高代碼也會大量重復(fù)的操作中刪除操作會調(diào)用的方法增改 最近開發(fā)一個內(nèi)部的記錄系統(tǒng),其中有一個需求要求將所有數(shù)據(jù)庫操作記錄下來,為此想了一些方案.記錄一下. 思路演化 這個需求出來的一瞬間我就否定了在業(yè)...
閱讀 1393·2021-09-24 10:26
閱讀 3701·2021-09-06 15:02
閱讀 666·2019-08-30 14:18
閱讀 601·2019-08-30 12:44
閱讀 3141·2019-08-30 10:48
閱讀 1971·2019-08-29 13:09
閱讀 2027·2019-08-29 11:30
閱讀 2309·2019-08-26 13:36