CSS3中width屬性的calc 使用問題

2021-09-10 21:11:10 字數 846 閱讀 3896

恭喜博主今天又踩到了乙個坑,繼滾動條問題解決後博主在測試過程中又發現了乙個問題。由於博主的左側選單可以摺疊,博主在摺疊開啟左側選單過程中發現右側主題內容的寬度顯示不正常,上圖說明:

初始渲染顯示正常:

摺疊選單顯示正常:

問題來了,再次開啟發現顯示不正常:

博主通過谷歌的開發者工具發現了問題,之前的內容寬度為1306px,但是經過摺疊寬度就變成了1346px。因為內容寬度用的是css3的calc屬性,於是猜測與此有關。後來經過實驗,發現calc在初始渲染和之後的動態渲染時對padding的計算機制不太相同,並且有一些問題。博主因為設定了padding:20px,這裡正好多了40px,於是在計算時多減去40px

.main

發現果然正常了,而且初始化時也和原來一樣正常:

博主現在只是調整好了樣式的問題,但是至於問題產生的原因和裡面的原理還不是很清楚,希望路過的大神幫忙解答一下午,感激不盡!

CSS3中的屬性

讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素,從頂端移...

CSS3中的box sizing屬性

box sizing屬性是css3中新新增的屬性,用來替換原來的css盒子模型,box sizing屬性值的不同,元素的高度和寬度的計算方法也不同。box sizing的三個屬性值,我們只針對前兩個說明 box sizing content box box sizing border box box...

css3中的動畫屬性

一 過渡動畫 transition 過渡動畫,就是能讓css樣式的變化,體現的更明顯一點,讓使用者能更清晰的看見樣式的變化。過渡的實現我們一般通過事件來觸發 例如滑鼠單擊 獲得焦點 被點選或對元素任何改變中觸發 1.transition property 檢索或設定物件中的參與過渡的屬性 all為預...