資訊專欄INFORMATION COLUMN
摘要：優點兼容所有瀏覽器容易理解，效率高注意盒子的整體高度，是那個非定位元素撐開的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側高度很低，那么左側因為定位是無法撐開的左側也可考慮使用絕對定位，或者使用等，大家可以試驗一下。。
作為一個前端，所見的最多的就是左右布局的情況，無論框架還是各種寫法中都有左右布局，然而有些情況下非常讓人頭疼，那就是一側固定寬度，另一側根據屏幕或者外層寬度自動適應，例如表單：
如圖所示：左右布局，但是左側按照百分比排版的，在屏幕小的情況下非常擁擠，在屏幕寬的時候非常寬松，不能夠做到左邊固定寬度（因為左側是固定的幾個文字），右側自動適應。類似問題還有N多，比如后臺界面左右布局形式，tab選項卡左右布局形式等等。
一、使用JavaScript來計算的弊端麻煩，寫一大堆，然后不一定對。
效率低，改變屏幕或者改變外層div寬度，效率極低。
樣式和JavaScript不分開，非常不規整。
二、使用css3的calc計算的弊端弊端：一言以蔽之，兼容性不好
優點：簡單易用，效率高，能解決兼容性是最好不過了，能不能使用css2.0來寫出這個效果呢，答案是能！
具體的布局如上，父元素定位，左側固定寬度的元素定位，右側自動適應寬度，使用padding來撐開被定位元素占有的那部分，這樣就能達到右側寬度根據父元素的寬度適應，而且左側達到固定寬的效果。左右顛倒亦如此。
優點：
兼容所有瀏覽器
容易理解，效率高
注意：
盒子的整體高度，是那個非定位元素撐開的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側高度很低，那么左側因為定位是無法撐開的（左側也可考慮使用絕對定位，或者使用min-height等，大家可以試驗一下。）。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112436.html
摘要：優點兼容所有瀏覽器容易理解，效率高注意盒子的整體高度，是那個非定位元素撐開的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側高度很低，那么左側因為定位是無法撐開的左側也可考慮使用絕對定位，或者使用等，大家可以試驗一下。。 作為一個前端，所見的最多的就是左右布局的情況，無論框架還是各種寫法中都有左右布局，然而有些情況下非常讓人頭疼，那就是一側固定寬度，另一側根據屏幕或者...
摘要：不過最大的好處就是用在流體布局上，可以通過計算得到元素的寬度。于是，就是瀏覽器滾動條的寬度大小如果有，如果沒有滾動條則是左右都有一個滾動條寬度或都是被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動參考的使用 什么是calc()? calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來...
摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。 前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...
摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。 前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...
閱讀 1698·2023-04-26 01:02
閱讀 4840·2021-11-24 09:39
閱讀 1803·2019-08-30 15:44
閱讀 2872·2019-08-30 11:10
閱讀 1783·2019-08-30 10:49
閱讀 983·2019-08-29 17:06
閱讀 608·2019-08-29 16:15
閱讀 902·2019-08-29 15:17
