CSS-Box Model 觀念
css
Lastmod: 2019-12-13

Css Box Model 規定了Element處理元素ContentPaddingbordermargin的方式 。

Box Model基本概念

這張圖就是在說明一個Element元素的Box Model,紅色框範圍內表代為Element內的各屬性距離,而橘色框的代表ElementElement之間的距離。

screenshot.png

來看看下列的Html與Css

   <!-- html -->
   <div class="box1">Box 1</div>
   <div class="box2">Box 2</div>

   --------------------------------
   <!-- Css -->
   .box1{
       padding:10px;
       border: 5px solid red;
       margin:10px
   }

顯示如下,其中Box 1文字到框線的距離為padding 10px,然後框線的寬度為5px, 最後Box1Box2的距離為margin 10px

screenshot.png

Chrome ToolsElements Style 的結果如下。

screenshot.png

Box Model的寬度

如果在一個Element設置width,那麼該Element的寬度是指Box Model的那個範圍呢??根據W3C的標準定義Content Width,如下面Css我們在增加width:500px屬性。

	.box1{
		width:500px;
  		padding:10px;
 		border: 5px solid red;
 		margin:10px
	}

結果如下,width:500px所指的為content width,也就是Element的內容寬度。

screenshot.png

Box-Sizing屬性

在上一段文章中有提到,在Element上增加width屬性實際上是指content width, 所以有時後有人會很疑惑,明明寬度設了500pxXXXpx卻還是超過,這往往是Box Model不熟悉的問題。

Box-Sizing屬性的border-box值,就是指將width屬性從content width改成content + padding + border 的 with,如下Css,我們新增加了box-sizing : border-box

	.box1{
		box-sizing : border-box
		width:500px
  		padding:10px;
 		border: 5px solid red;
 		margin:10px
	}

screenshot.png

參考資料

comments powered by Disqus