盒子模型

           CSS盒子模式具备的属性: 内容(content)、填充(padding)、边框(border)、边界(margin)。盒子模型_第1张图片

                     

               

 

  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-boxdiv>
     <div id="two">另一种盒模型:border-boxdiv>
 body>
html>

 

效果如下:

                  盒子模型_第2张图片

       同样的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;
   }

         盒子模型_第3张图片

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

 

你可能感兴趣的:(盒子模型)