我们都知道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 学习第十七天 jQuery

    一,jQuery 知识详解 利用jquery 查找元素,操作元素 1,jquery 引入 <!DOCTYPE html> <html lang="en"> ...

  2. [leetcode] 数字游戏

    169. Majority Element Given an array of size n, find the majority element. The majority element is t ...

  3. D3中selection之使用

    1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selecti ...

  4. 【CentOS】LAMP

    文章需要整合,学习需要归纳,博主把一连四篇的LAMP合并成为一片长篇的大部头,并梳理了一下他们的关系,希望对各位有所帮助 最近一次更新:2016年12月21日21:38:31 本文为博主JerryCh ...

  5. Daily Scrum Meeting ——SeventhDay(Beta)12.15

    一.Daily Scrum Meeting照片 二.Burndown Chart 想做的太多,冲刺仍在继续 三.项目进展(check-in) 1.完成了登录注册剩下的所有界面 2.更改通知详情和活动详 ...

  6. dedecms循环列表样式

    简单用法: {dede:arclist typeid="1" row="} <li class="list[field:global.autoindex/ ...

  7. Java 正则表达式匹配模式[贪婪型、勉强型、占有型]

    Greediness(贪婪型):最大匹配 X?.X*.X+.X{n,} 是最大匹配.例如你要用 “<.+>” 去匹配 “a<tr>aava </tr>abb”,也许 ...

  8. RNN求解过程推导与实现

    RNN求解过程推导与实现 RNN LSTM BPTT matlab code opencv code BPTT,Back Propagation Through Time. 首先来看看怎么处理RNN. ...

  9. MacOS下Express安装过程中遇到的问题

    问题描述: 使用nmp install express -g命令全局安装express后,在终端使用express -V命令可以获取到express的版本号,但在引用express的项目运行时,会报缺 ...

  10. 用soapUI测试webservice

    测试webservice时,有时需要写一个客户端来向服务端发起请求才可以测试服务,最近看到一款工具soap ui,也可以调试VS2010中的程序. 首先要把webservice 发布到本地,网上已经有 ...