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

資訊專欄INFORMATION COLUMN

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

Lin_YT / 928人閱讀

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

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

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

一、使用JavaScript來計(jì)算的弊端

麻煩，寫一大堆，然后不一定對(duì)。

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

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

二、使用css3的calc計(jì)算的弊端

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

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

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

兼容所有瀏覽器

容易理解，效率高

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51146.html

相關(guān)文章

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

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

    468122151 評(píng)論0 收藏0

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

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

    894974231 評(píng)論0 收藏0

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

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

    fnngj 評(píng)論0 收藏0

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

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

    douzifly 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Lin_YT

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<