第一步：先跟据需求定义一个div，要求width为300px，height为300px；

第二步：给该div添加一个边框，要求实线，宽度10px，粉色；

第三步：给该div再设置20px的内边距；

我们发现这个div随着border和padding的设置一直在变大。此时div的占位宽度为：width+padding+border=300+20*2+10*2=360px。

但是我想设置border和padding之后，div还保持width=300px、height=300px，这怎么办呢？

第一种解决方式：

事先算好div的width和height。比如上面的例子，我想保证div这个盒子模型的宽度和高度为300px，那么就得设置div的宽度的初始值为

width=300-border-padding=300-20-40=240px。高度height同理也是240px。

第二种解决方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div{

            width:300px;

            height: 300px;

            background: #CCC;

            border: 10px solid pink;

            padding: 20px;

            box-sizing: border-box;  /*灵魂代码*/

        }

    </style>

</head>

<body>

   <div>css</div>

</body>

</html>    
box-sizing: border-box; 有了这句灵魂代码之后问题就解决了。它会自动做减法运算保证整个div的width和height为300px。
最终的样式为：


总结：
在盒子模型中，当盒子的width和height保持不变时，设置盒子的border和padding，此时盒子真实尺寸为：宽度=width+border+padding；
高度=height+border+padding。但是这不是我们想要的结果，我们想设置border和padding时盒子的宽度和高度还是原始值，此时只能通过减少
width和height的像素来实现，box-sizing：border-box；就为我们自动做了减法运算，解决了该问题。

css的padding和border问题的更多相关文章

  1. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  2. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  3. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  4. 图解CSS的padding,margin,border属性

    原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...

  5. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  6. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  7. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  8. css的padding,border,margin的意思

    下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...

  9. 【CSS3】---盒模型margin、padding及border

    盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...

随机推荐

  1. 异步API

    整合到一起,作为参考: //2 5 3 4 1 //2 5 3 1 4 var img = new Image(); img.src = '.'; img.onerror = function() { ...

  2. 给资源文件添加指纹（Gulp版）

    至于为什么要费尽心思地给文件添加指纹,请参看前端静态资源缓存控制策略.这次要达到的小目标就是生成的资源文件能够被客户端缓存,而在文件内容变化后,能够请求到最新的文件. 需要用到的 gulp 插件是 g ...

  3. github和本地仓库关联

    1.安装git 2.在github上注册账号 3.github上创建repository 4.克隆github上的repository 5.在target directory中右键打开git gui

  4. Prime Ring Problem

    Problem Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ... ...

  5. PAT-甲级-1002

    1.来,先看题,https://www.patest.cn/contests/pat-a-practise/1002. 2.需要注意的地方只有一个:两个多项式相加之后,系数可能为零,这些项不应该出现在 ...

  6. HTML5与搜索引擎优化[转载]

    原文:http://lusongsong.com/reed/398.html 我觉得HTML5的兴起完全是因为iPhone和iPad,自从Adobe停止开发flash.Android4.0不支持fla ...

  7. 通讯框架 T-io 学习——给初学者的Demo：ShowCase设计分析

    前言 最近闲暇时间研究Springboot,正好需要用到即时通讯部分了,虽然springboot 有websocket,但是我还是看中了 t-io框架.看了部分源代码和示例,先把helloworld敲 ...

  8. sublime text3添加右键打开的操作

    前一段重新安装了Sublime Text3,不过一直不在右键菜单中,所以决定添加,有如下2种方法. 方法一(推荐). 把以下代码,复制到SublimeText3的安装目录,然后重命名为:sublime ...

  9. Facebook-Haystack合并小文件

    1.原文 https://www.usenix.org/legacy/event/osdi10/tech/full_papers/Beaver.pdf 2.翻译版 http://www.importn ...

  10. File signature analysis failed to recognize .old file

    My friend May she found a strange file called "bkp.old" as below in the evidence files. Sh ...