您所在的位置:小祥子 » 编程 » CSS » 正文

padding标准盒模型和怪异盒子模型

时间:2015-08-15 编辑:GaryGuo321 来源:CnBlogs

我们都知道padding是为块级元素设置内边距

但是在使用过程中,我们却会遇到一些问题。padding的标准盒模型和怪异盒模型

padding盒子模型

我们通过demo来讲这个问题,用文字干讲第一没意思,第二讲不明白

标准盒模型:

我们先摆出HTML和CSS代码:

 <div class="shoebox">          <!--此div模仿鞋子的鞋盒-->
         <div class="shoes">                <!--此div模仿鞋子-->
         </div>
     </div>
 .shoebox{
     width: 100px;
     height: 100px;
     background-color: #389cff;
     padding-left: 10px; padding-right: 10px;   
 }
 
 .shoes{
     width: 80px;
     height: 80px;
     background-color: #98bf21;
 }

一个小demo的代码已经放了出来,很简单的一个demo,先讲讲他的用意,我的一双大小是80*80的鞋子,为此我给了这个鞋子做了一个100*100的盒子,我想要让这个鞋子有10px的内边距,所以我设了一个padding-left:10px和padding-right:10px

我们想象中的场景效果可能是这样的:有木有,有木有,好正啊,但是现实真的好残酷。。他却是这样的:

这时候我们会很奇怪,明明我们设置的shoebox的高和宽是100*100怎么变成了110*110了呢,这多出来的10px是怎么回事。

这是padding元素膨胀造成的结果。在标准盒模型中,设置padding会自动挤压空间,而不会利用给出来的空间,不会占用宽内位置,不通过width影响,会自己挤出空间来,就好像,我的鞋子是80*80的,我不需要100*100的盒子,你给我一个80*80的盒子就好了,我靠我自己来把他挤成100*100,这时很显然的解决的办法就出来了,我们的盒子的宽度只要设置成80*80然后设置padding:10px;来让鞋子把周围额空间挤成100*100。

这就是padding的标准盒模型,先做好鞋子,再去做盒子

怪异盒模型

怪异盒模型与标准盒模型的区别就是,怪异盒模型是先做好盒子,再来做鞋子,我把盒子的大小固定住,你鞋子怎么挤也没有用。

这时我们只要在我们的代码中加一条box-sizing:boeder-box,就可以把我的盒子给固定住,这时你鞋子想要用padding来撑大盒子的空间已经没用了,因为鞋子已经被固定死了,这时我们就可以用代码:

  <div class="shoebox">          <!--此div模仿鞋子的鞋盒-->
         <div class="shoes">                <!--此div模仿鞋子-->
         </div>
     </div>
 .shoebox{
     width: 100px;
     height: 100px;
     background-color: #389cff;
     box-sizing: border-box;
     padding-left: 10px;
     padding-top: 10px;
  }
 
 .shoes{
     width: 80px;
     height: 80px;
     background-color: #98bf21;
 }

来实现我们要的效果:

最后在总结一点padding的知识:

1. 当我们给width设置一个固定的值或者给width设置100%时,设置padding都会把盒子给挤开,挤大了

2. 若想要不使用怪异盒模型又不会把盒子挤大,请把width设置为auto,width默认的值是auto。自动占满整个屏幕

3. 标准盒模型在pc端比较常用,因为pc端的屏幕大,有优势可以撑

4. 怪异盒模型在手机端比较常用。手机屏幕是有限大小的,有时我们往往需要使用怪异盒模型把他固定住。

5. 怪异盒模型的盒子大小还要加上border的大小。

本文为原创作品,未经允许不可私自转载,谢谢!

关键词:dd 标准 盒模型 模型