国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css兼容所有瀏覽器的寬度計算方法，非calc

Lin_YT / 924人閱讀

摘要：優(yōu)點兼容所有瀏覽器容易理解，效率高注意盒子的整體高度，是那個非定位元素?fù)伍_的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側(cè)高度很低，那么左側(cè)因為定位是無法撐開的左側(cè)也可考慮使用絕對定位，或者使用等，大家可以試驗一下。。

作為一個前端，所見的最多的就是左右布局的情況，無論框架還是各種寫法中都有左右布局，然而有些情況下非常讓人頭疼，那就是一側(cè)固定寬度，另一側(cè)根據(jù)屏幕或者外層寬度自動適應(yīng)，例如表單：

如圖所示：左右布局，但是左側(cè)按照百分比排版的，在屏幕小的情況下非常擁擠，在屏幕寬的時候非常寬松，不能夠做到左邊固定寬度（因為左側(cè)是固定的幾個文字），右側(cè)自動適應(yīng)。類似問題還有N多，比如后臺界面左右布局形式，tab選項卡左右布局形式等等。

一、使用JavaScript來計算的弊端

麻煩，寫一大堆，然后不一定對。

效率低，改變屏幕或者改變外層div寬度，效率極低。

樣式和JavaScript不分開，非常不規(guī)整。

二、使用css3的calc計算的弊端

弊端：一言以蔽之，兼容性不好
優(yōu)點：簡單易用，效率高，能解決兼容性是最好不過了，能不能使用css2.0來寫出這個效果呢，答案是能！

三、使用定位法實現(xiàn)calc

具體的布局如上，父元素定位，左側(cè)固定寬度的元素定位，右側(cè)自動適應(yīng)寬度，使用padding來撐開被定位元素占有的那部分，這樣就能達到右側(cè)寬度根據(jù)父元素的寬度適應(yīng)，而且左側(cè)達到固定寬的效果。左右顛倒亦如此。
優(yōu)點：

兼容所有瀏覽器

容易理解，效率高

注意：
盒子的整體高度，是那個非定位元素?fù)伍_的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側(cè)高度很低，那么左側(cè)因為定位是無法撐開的（左側(cè)也可考慮使用絕對定位，或者使用min-height等，大家可以試驗一下。）。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51146.html

相關(guān)文章

  • css兼容所有瀏覽器的寬度計算方法，非calc

    摘要：優(yōu)點兼容所有瀏覽器容易理解，效率高注意盒子的整體高度，是那個非定位元素?fù)伍_的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側(cè)高度很低，那么左側(cè)因為定位是無法撐開的左側(cè)也可考慮使用絕對定位，或者使用等，大家可以試驗一下。。 作為一個前端，所見的最多的就是左右布局的情況，無論框架還是各種寫法中都有左右布局，然而有些情況下非常讓人頭疼，那就是一側(cè)固定寬度，另一側(cè)根據(jù)屏幕或者...

    468122151 評論0 收藏0

  • CSS基礎(chǔ)篇--CSS3 calc實現(xiàn)滾動條出現(xiàn)頁面不跳動

    摘要：不過最大的好處就是用在流體布局上，可以通過計算得到元素的寬度。于是，就是瀏覽器滾動條的寬度大小如果有，如果沒有滾動條則是左右都有一個滾動條寬度或都是被占用，主體內(nèi)容就可以永遠居中瀏覽器啦，從而沒有任何跳動參考的使用 什么是calc()? calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來...

    894974231 評論0 收藏0

  • 總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

    摘要：如果要居中的塊級元素直接是內(nèi)聯(lián)元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產(chǎn)生默認(rèn)的間距，父元素設(shè)置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內(nèi)聯(lián)元素，需要添加屬性而且元素不浮動。 前端開發(fā)中，我們經(jīng)常需要對元素進行水平垂直居中。為此，小編特地總結(jié)了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

    fnngj 評論0 收藏0

  • 總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

    摘要：如果要居中的塊級元素直接是內(nèi)聯(lián)元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產(chǎn)生默認(rèn)的間距，父元素設(shè)置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內(nèi)聯(lián)元素，需要添加屬性而且元素不浮動。 前端開發(fā)中，我們經(jīng)常需要對元素進行水平垂直居中。為此，小編特地總結(jié)了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

    douzifly 評論0 收藏0

發(fā)表評論

0條評論

Lin_YT

男|高級講師

TA的文章

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