iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 03:CSS盒模型-box-model

什麼是box-model?

意思是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整

  • Margin -負責調整 元素與元素 之間的邊界間距,屬於元素外部的邊界調整。
  • Padding-負責調整 元素內所有內容與元素自身 的邊界間距,屬於元素內部的邊界調整。
  • Border-元素最外層的邊界,常見的元素外框設定就是此設定。

懶人包:margin推外邊界,padding、border推內邊界

如圖原本設定的width:200px,實際寬度為width+左右padding+左右border=240px。

box-sizing: border-box;

覺得計算盒模型很麻煩嗎?就用這個吧!
box-sizing: content-box; 這個是預設屬性。
box-sizing: border-box; 用這個屬性的話,就會把 padding 等地考慮進來,而自動做內縮調整。

懶人包:運用box-sizing: border-box,寬度就不會隨著padding和border影響,但要小心內容會隨著內縮影響。


如圖原本寬度因為設定padding及border=240px,運用box-sizing: border-box,寬度變回原本設定200px


1 則留言

0
chihuahua
iT邦新手 5 級 ‧ 2020-03-03 23:12:53

盒模型的英文應該是Box Model~?

感謝你幫我debug,我竟然都沒發現!!/images/emoticon/emoticon41.gif

我要留言

立即登入留言