都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」


學習

職場產業

<blockquote class="draft-block draft--blockquote">都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」</blockquote>
<h2 class="draft-block draft--h2" name="header-bb5ll"><span style="font-weight: bold; "> 什麼是 box-sizing </span></h2>
<div class="draft-block draft--p left">css新屬性，box-sizing作用控制 width 與 height作用對象空間，也可以說是設定物件尺寸方式。</div>
<h2 class="draft-block draft--h2" name="header-3ffak">box-sizing 語法</h2>
<div class="draft-block draft--p left">內容盒子 box-sizing: content-box 【預設】</div>
<div class="draft-block draft--p left">邊框盒子 box-sizing: border-box</div>
<h2 class="draft-block draft--h2" name="header-e81or">內容盒子 content-box</h2>
<div class="draft-block draft--p left">一開始 width / height 的作用就是設定為內容資料的範圍空間，一個物件的範圍 content-box。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:633px" class="image-block-prerender" data-src="https://images.vocus.cc/9b7ecf53-7cbf-49bc-988e-dc6fe68f2d59.png" data-width="633" data-height="586" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">content-box  (寬高設定作用在內容範圍)</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-bhvn4">範例:</h2>
<div class="draft--imgNormal draft-block"><div><div style="height:1600px" class="image-block-prerender" data-src="https://images.vocus.cc/831cd79f-b4e0-4077-b203-d0e8fc74f70f.png" data-width="1600" data-height="676" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-6c1gr">物件寬度</h2>
<div class="draft-block draft--p left">指定給內容物空間，padding 和 border 就會往外加。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:940px" class="image-block-prerender" data-src="https://images.vocus.cc/d2f017cd-c025-462f-80a7-8782f9e26008.png" data-width="940" data-height="446" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-fv7u">邊框盒子 border-box</h2>
<div class="draft--imgNormal draft-block"><div><div style="height:404px" class="image-block-prerender" data-src="https://images.vocus.cc/10341f3f-14e9-4050-bcf5-34e9b4574f28.png" data-width="404" data-height="368" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">border-box (寬高設定作用在邊框外緣範圍內)</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-3oarj"><span style="font-weight: bold; ">範例: (</span>padding)</h2>
<div class="draft--imgNormal draft-block"><div><div style="height:1600px" class="image-block-prerender" data-src="https://images.vocus.cc/b774a169-7b41-4c17-aef9-4ee2abaee4be.png" data-width="1600" data-height="711" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-eurqh"><span style="font-weight: bold; ">物件寬度</span></h2>
<div class="draft--imgNormal draft-block"><div><div style="height:928px" class="image-block-prerender" data-src="https://images.vocus.cc/79db1856-1e34-4077-8670-6e95a4e50c39.png" data-width="928" data-height="436" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">寬度會維持 300px</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-8sa3i"><span style="font-weight: bold; ">範例: (padding</span>+ border<span style="font-weight: bold; ">)</span></h2>
<div class="draft--imgNormal draft-block"><div><div style="height:1790px" class="image-block-prerender" data-src="https://images.vocus.cc/0cb5636f-440e-4cb0-b7ae-5090b77fbd49.png" data-width="1790" data-height="742" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-bqsb0"><span style="font-weight: bold; ">物件寬度</span></h2>
<div class="draft--imgNormal draft-block"><div><div style="height:1024px" class="image-block-prerender" data-src="https://images.vocus.cc/5275704c-491b-4da0-bb67-dffd601ec989.png" data-width="1024" data-height="466" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-9pi8i">總結</h2>
<div class="draft-block draft--p left">box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。</div>
<h2 class="draft-block draft--h2" name="header-4bs0e">參考資料</h2>
<div class="draft-block draft--p left">文章 : https://ithelp.ithome.com.tw/articles/10252827</div>
<div class="draft-block draft--p left">影片: https://www.youtube.com/watch?v=O8EOgg-hhvI</div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>

<blockquote>都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」</blockquote>
<h2><strong>&nbsp;什麼是 box-sizing&nbsp;</strong></h2>
<p>css新屬性，box-sizing作用控制 width 與 height作用對象空間，也可以說是設定物件尺寸方式。</p>
<h2>box-sizing 語法</h2>
<p>內容盒子 box-sizing: content-box 【預設】</p>
<p>邊框盒子 box-sizing: border-box</p>
<h2>內容盒子 content-box</h2>
<p>一開始 width / height 的作用就是設定為內容資料的範圍空間，一個物件的範圍 content-box。</p>
<p>content-box &nbsp;(寬高設定作用在內容範圍)</p>
<h2>範例:</h2>
<p><br></p>
<h2>物件寬度</h2>
<p>指定給內容物空間，padding 和 border 就會往外加。</p>
<p>物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px</p>
<h2>邊框盒子 border-box</h2>
<p>border-box (寬高設定作用在邊框外緣範圍內)</p>
<h2><strong>範例: (</strong>padding)</h2>
<p><br></p>
<h2><strong>物件寬度</strong></h2>
<p>寬度會維持 300px</p>
<h2><strong>範例: (padding</strong>+ border<strong>)</strong></h2>
<p><br></p>
<h2><strong>物件寬度</strong></h2>
<p><br></p>
<h2>總結</h2>
<p>box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。</p>
<h2>參考資料</h2>
<p>文章 : https://ithelp.ithome.com.tw/articles/10252827</p>
<p>影片: https://www.youtube.com/watch?v=O8EOgg-hhvI</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>

都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」

css新屬性，box-sizing作用控制 width 與 height作用對象空間，也可以說是設定物件尺寸方式。

內容盒子 box-sizing: content-box 【預設】

一開始 width / height 的作用就是設定為內容資料的範圍空間，一個物件的範圍 content-box。

content-box  (寬高設定作用在內容範圍)

指定給內容物空間，padding 和 border 就會往外加。

物件尺寸: width 300px+左 padding 30px + 右 padding 30px = 360px

border-box (寬高設定作用在邊框外緣範圍內)

box-sizing控制寬度值，border-box指定寬度值邊寬與邊寬之間。padding+border 就會自動往內推。

文章 : https://ithelp.ithome.com.tw/articles/10252827

影片: https://www.youtube.com/watch?v=O8EOgg-hhvI

【CSS必學屬性】box-sizing

什麼是 box-sizing

box-sizing 語法

內容盒子 content-box

範例:

物件寬度

邊框盒子 border-box

範例: (padding)

物件寬度

範例: (padding+ border)

物件寬度

總結

參考資料