我们都知道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的大小。

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

padding标准盒模型和怪异盒子模型的更多相关文章

  1. CSS3_标准盒子模型和怪异盒子模型

    #box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding ...

  2. 标准盒子模型和IE盒子模型

    标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content ( ...

  3. 标准W3C盒子模型和IE盒子模型

    标准W3C盒子模型和IE盒子模型   CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...

  4. box-sizing怪异盒子模型在移动端应用

    盒子模型不必多少,公认的盒子模型 总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right) ...

  5. 怪异盒子模型和行内元素的float

    设置了float属性的行内元素的display值会变成inline-block 怪异盒子模型: box-sizing:border-box:元素content包含内间距和border

  6. w3c盒子模型与ie盒子模型

    盒子模型是css的专有名词,用来描述页面设置中的各种属性,如内容(content).填充(padding).边框(border).边界(margin),由于这些属性拼在一起,与日常生活中的“盒子”很相 ...

  7. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  8. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  9. css中box-sizing简单说明(标准盒式模型和怪异盒式模型)

    今天写程序做布局的时候,遇到关于css中盒式模型的问题,百度了下这属性的解释,脑大啊,文字太绕看不懂.怎么办,于是自己动动手写了段程序测试,嗯,不错,一看效果就恍然大明白了.这里简单说明下,也可能说得 ...

随机推荐

  1. python求数字位数的方法

    第一种:利用str()函数将数字转化成字符串,再利用len()函数判断位长. a=Int(raw_input("the number you want type in:") b=l ...

  2. Java Web 项目目录规范

    一.项目结构 这里和其他项目区别不大,我将模板抽离出来,更容易分析和理解: 解释一下:js主要包括extends(引入第三方的js).module(项目模块自己的js).lib(引用包,这里也可以继续 ...

  3. 2016-2-10 tomcat基础学习

    安装tomcat服务器(1)配置 JAVA_HOME指向你的jdk主目录 也可以在startup.bat文件中设置JAVA_HOME环境变量. 首次使用JAVA_HOME前设置即可.set JAVA_ ...

  4. 跨界玩AR,迪奥、Hugo Boss等知名奢侈品牌将制造AR眼镜

    Snapchat因为阅后即焚消息应用而被人所熟知,前段时间这家公司拓展主要业务,未来将不再只有消息应用,还有款名为"Spectacles"的AR太阳镜.内置了一个摄像头,戴上之后即 ...

  5. 【BZOJ1857】[Scoi2010]传送带 三分法

    三分套三分,挺神奇的...每次找到,每个传送带的上下两个三等分点,下面那个小,则一定有更优的在中间. #include <iostream> #include <cstdio> ...

  6. Windows安装mysql-5.7.17-winx64.zip方式

    1.去官网上下载.zip格式的文件. 2.解压到一个文件夹,这里我用D:\MySql表示 3.在D:\MySql\mysql-5.7.17-winx64下新建my.ini配置文件 黄色背景色的地方需要 ...

  7. java反射学习之二万能EXCEL导出

    一.EXCEL导出的实现过程 假设有一个对象的集合,现在需要将此集合内的所有对象导出到EXCEL中,对象有N个属性:那么我们实现的方式是这样的: 循环这个集合,在循环集合中某个对象的所有属性,将这个对 ...

  8. [IOS] 'Double' is not convertible to 'CGFloat'

    在做一个对象旋转的时候,要求转动的弧度角, 这个地方报错,如题的错误,其实是类型转换的问题,swift不能静静的做类型转换,一定要显式的转换 typeTableView?.transform=CGAf ...

  9. myeclipse tomcat内存溢出解决方法

    Tomcat直接启动正常,通过myeclipse启动tomcat内存溢出.MyEclipse启动Tomcat无视catalina.bat中设置内存大小的问题.在 tomcat的catalina.bat ...

  10. AJAX回调函数,返回JSON格式,应该返回自定义状态STATUS,但是却返回200

    返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...