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
【論壇經營】Discuz! X3.1 修復無法修改頭像
📆 2014-11-08
📁
網站技術, 架站程式, Discuz!
WordPress 網址異動,利用 SQL 指令快速更改
📆 2016-02-01
📁
網站技術, 資料庫, SQL, 架站程式, WordPress
純 CSS 區塊輪播效果
📆 2021-12-07
📁
網站技術, HTML, CSS
Node-RED:將資料寫入至 MSSQL 資料庫中的資料表
📆 2021-12-07
📁
網站技術, 資料庫, Node.js, Node-RED
jQuery.qrcode:純前端生成 QR Code
📆 2019-09-25
📁
網站技術, JavaScript, jQuery
CSS:開發:原件放大
📆 2013-01-01
📁
網站技術, CSS
Sass/SCSS 初嘗試,新手入門語法教學 ◆ 進階的 CSS:巢狀結構、變數、函數、迴圈與繼承等
📆 2019-03-19
📁
網站技術, Sass/SCSS
jQuery CDN 掛點解決方案?簡單的 JavaScript 讓您有本地替代方案!
📆 2019-08-17
📁
網站技術, HTML, JavaScript, jQuery
留言區 / Comments
萌芽論壇