CSS3「box-sizing: border-box; 」讓內距和邊框不改變元素的寬度與高度
2018/09/22
萌芽站長
3,339 0
網站技術 , CSS
過去站長寫網頁版面時常常會遇到一個問題,那就是 CSS3 屬性 padding (內距) 和 border (邊框) 的大小會影響這個元素的大小,也就是其 width (寬度) 和 height (高度),造成同樣的寬高下,因為不同的內距與邊框造成兩個或多個元素大小完全不同,影響美觀,所以那時都是手動計算寬度應該要多少才能符合同樣大小的原則,相當麻煩!不過我們現在有了 CSS3 的「box-sizing: border-box;」,以上所敘述的問題馬上獲得解決。
CSS3「box-sizing: border-box; 」的主要功能是讓 padding (內距) 和 border (邊框) 不改變元素本身的 width (寬度) 和 height (高度),所以固定寬高下,不管內距和邊框大小怎麼設定,這些元素大小都是相同的。
以下提供範例網頁原始碼的截圖與預覽結果:
▲示範截圖。
▲示範結果。
這是我第一次使用「CodePen」展示自己寫的網頁原始碼,非常感謝朋友的推薦!😉
✎ 參考資料 · References
贊助廣告 ‧ Sponsor advertisements
Master Styles Language Service(Visual Studio Code 擴充功能):Master 框架的語法突顯及完成提示
📆 2022-05-02
📁
軟體應用, 網站技術, HTML, CSS
Google AdSense:廣告封鎖復原,讓訪客按一下就將貴站加入廣告阻擋器白名單
📆 2023-02-24
📁
網路應用, 網站技術
【網站設計】NProgress.js 美化用進度條
📆 2015-05-21
📁
網站技術, JavaScript
YOURLS:建立自己的短網址系統
📆 2016-02-27
📁
網站技術, 架站程式
JavaScript:科學記號與數字互相轉換
📆 2022-09-12
📁
網站技術, JavaScript
Joomla! 內容管理系統(架站程式)完整安裝過程
📆 2017-03-30
📁
網站技術, 架站程式
CSS:list-style-type屬性
📆 2014-01-29
📁
網站技術, CSS
JavaScript:閏年判斷
📆 2021-03-03
📁
網站技術, JavaScript
留言區 / Comments
萌芽論壇