首页 > > 网页制作 > css >

盒子模型

2018-06-24 00:37:19来源：未知阅读 ()

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;
   }