盒子模型

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

新老客户大回馈,云服务器低至5折

           CSS盒子模式具备的属性: 内容(content)、填充(padding)、边框(border)、边界(margin)。

                     

               

 

  1. 默认的盒子模型: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;
   }

        

 第一次写博客??,不足的地方请多指教。路过的点赞支持一下。。。。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS级联和继承

下一篇:对css中clear元素的理解