CSS3「box-sizing: border-box; 」讓內距和邊框不改變元素的寬度與高度
2018/09/22
萌芽站長
3,452 1
網站技術 , CSS
過去站長寫網頁版面時常常會遇到一個問題,那就是 CSS3 屬性 padding (內距) 和 border (邊框) 的大小會影響這個元素的大小,也就是其 width (寬度) 和 height (高度),造成同樣的寬高下,因為不同的內距與邊框造成兩個或多個元素大小完全不同,影響美觀,所以那時都是手動計算寬度應該要多少才能符合同樣大小的原則,相當麻煩!不過我們現在有了 CSS3 的「box-sizing: border-box;」,以上所敘述的問題馬上獲得解決。
CSS3「box-sizing: border-box; 」的主要功能是讓 padding (內距) 和 border (邊框) 不改變元素本身的 width (寬度) 和 height (高度),所以固定寬高下,不管內距和邊框大小怎麼設定,這些元素大小都是相同的。
以下提供範例網頁原始碼的截圖與預覽結果:
![](https://mnya.tw/cc/wp-content/plugins/native-lazyload/assets/images/placeholder.svg)
▲示範截圖。
▲示範結果。
這是我第一次使用「CodePen」展示自己寫的網頁原始碼,非常感謝朋友的推薦!😉
✎ 參考資料 · References
贊助廣告 ‧ Sponsor advertisements
MySQL:解決缺少表達式及 MySOL server has gone away 問題(教學基於 XAMPP)
📆 2022-10-08
📁
軟體應用, 網站技術, 伺服器, 資料庫
nvm-windows:Windows 平台的 Node.js 版本管理工具,可安裝、切換和管理多個 Node.js 版本
📆 2024-06-26
📁
軟體介紹, 軟體應用, 網站技術, Node.js
YOURLS:建立自己的短網址系統
📆 2016-02-27
📁
網站技術, 架站程式
Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題
📆 2019-03-27
📁
網站技術, CSS, JavaScript, Node.js, Gulp
WordPress 外掛推薦列表(萌芽站長提供,4/7隨時更新)
📆 2019-04-06
📁
網站技術, 推薦列表, 架站程式, WordPress
Git 版本控制:將專案上傳至遠端存放庫(使用 VS Code、GitHub)
📆 2019-09-24
📁
軟體應用, 網站技術, 程式設計
Global DNS Propagation Checker:檢查全球 DNS 傳播、生效狀態
📆 2018-08-20
📁
網路應用, 網站技術, 架站資源
WordPress 外掛推薦列表(2016、2017 舊版)
📆 2016-02-05
📁
網站技術, 推薦列表, 架站程式, WordPress
留言區 / Comments
萌芽論壇