成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決“有邊框的子元素寬度設(shè)定絕對值后,縮放瀏覽器會錯位”的兩種方法

ad6623 / 665人閱讀

摘要:現(xiàn)象用浮動布局時,如果為子元素的寬度指定絕對值,并且子元素具有邊框,在縮放瀏覽器的時候會出現(xiàn)錯位現(xiàn)象。舉例正常顯示效果縮小為原本后產(chǎn)生錯位解決方法一利用屬性的指定寬度和高度最小最大屬性確定元素邊框。

現(xiàn)象:

用浮動布局時, 如果為子元素的寬度指定絕對值,并且子元素具有邊框,在縮放瀏覽器的時候會出現(xiàn)錯位現(xiàn)象。
這種現(xiàn)象產(chǎn)生的原因是:
瀏覽器縮放時,子元素父元素的內(nèi)容都等比例縮放,而子元素的邊框不能等比例縮放,在縮放到達一定程度后,會造成子元素大于父元素,從而產(chǎn)生錯位現(xiàn)象。

舉例:

    
left
right

正常顯示效果:

縮小為原本67%后產(chǎn)生錯位:

解決方法一:

利用box-sizing屬性的border-box.[border-box:指定寬度和高度(最小/最大屬性)確定元素邊框box。也就是說,對元素指定寬度和高度包括padding和border的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算]
css:

縮放50%后的效果

解決方法二:

將子元素浮動,即兩個元素不在一個文檔流中,從而避免產(chǎn)生錯位
CSS:

縮放30%后的效果:

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/115921.html

相關(guān)文章

  • 解決跨域兩種方案JSONP和CORS

    摘要:由于第二種方法如今已經(jīng)采用的非常少,所以我們在這兒不做講解一帶填充的是一種可以在中繞過同源策略,并發(fā)起跨域請求的使用模式,可以啟動的跨域請求同源策略有一個顯著的例外,腳本元素是可以規(guī)避檢查的。 講跨域之前,我們先來講同源策略(SOP),同源策略是網(wǎng)景公司提出的一個著名安全策略。所謂同源就是域名、協(xié)議、端口相同。例如http://www.12306.cn中,http就是超文本傳輸協(xié)議,1...

    曹金海 評論0 收藏0
  • Django ORM層日志兩種實現(xiàn)方式

    摘要:最近開發(fā)一個內(nèi)部的記錄系統(tǒng)其中有一個需求要求將所有數(shù)據(jù)庫操作記錄下來為此想了一些方案記錄一下思路演化這個需求出來的一瞬間我就否定了在業(yè)務(wù)邏輯層保存操作記錄的方案我認為這樣耦合度比較高成本也太高代碼也會大量重復(fù)的操作中刪除操作會調(diào)用的方法增改 最近開發(fā)一個內(nèi)部的記錄系統(tǒng),其中有一個需求要求將所有數(shù)據(jù)庫操作記錄下來,為此想了一些方案.記錄一下. 思路演化 這個需求出來的一瞬間我就否定了在業(yè)...

    CKJOKER 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<