盒子模型 - Onlywjy－IT工程師數位筆記本

文章出處

CSS盒子模式具備的屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)。

默認的盒子模型：content-box

默認盒子模型，設置寬度值，不包含padding僅僅指盒子中內容content的寬度

默認盒子模型的寬度=width（content）+'padding-left'+'padding-right'+

'border-left'+'border-right'+'margin-left'+'margin-right'.

2.另一種盒模型：border-box

width包含padding border 和content，但不包含margin;

width優先給border和padding提供空間，最后為content提供空間。

<!doctype html>
<html lang="en">
 <head>
  <title>盒子模型</title>
  <style>
   #one{
     box-sizing:content-box;/*盒模型設置*/
     border:1px solid black;
     width:200px;
     height:200px;
     padding:50px;
   }
   #two{
     box-sizing:border-box;
     border:1px solid black;
     width:200px;
     height:200px;
     padding:50px;
   }
  </style>
 </head>
 <body>
     <div id="one">默認的盒子模型：content-box</div>
     <div id="two">另一種盒模型：border-box</div>
 </body>
</html>

效果如下：

同樣的width height border和padding屬性值兩種盒子模型出現效果截然不同，那是因為不同的盒子模型width和height所包含的內容不同。

正如上面結論所說默認盒子模型的width屬性指的是盒子中的內容content而另一種盒子模型的width屬性包含padding border 和content。

另一個值得注意的地方border-box盒子模型的width優先給border和padding提供空間，最后才為content提供空間，但padding設置的值太大

時content空間不夠里面的內容將會被擠壓自動換行,嚴重時會影響布局。

 #one{
     box-sizing:content-box;/*盒模型設置*/
     border:1px solid black;
	 width:200px;
	 height:200px;
	 padding:80px;
   }
   #two{
     box-sizing:border-box;
     border:1px solid black;
	 width:200px;
	 height:200px;
	 padding:80px;
   }