第一步：先跟据需求定义一个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. Spring AOP分析(1) -- 基本概念

    AOP全称是Aspect Oriented Programming,面向切面编程,是面向对象编程(OOP:Object Oriented Programming)的补充和完善.一般在系统中,OOP利用 ...

  2. C# group 子句

    group 子句返回一个 IGrouping<TKey,TElement> 对象序列,这些对象包含零个或更多与该组的键值匹配的项. 例如,可以按照每个字符串中的第一个字母对字符串序列进行分 ...

  3. ①bootstrap引入

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用js获取数组中最大、最小的数字

    1.查询最大值 var maxValue=Math.max.apply(Math,array); 2.查询最小值 var minValue=Math.min.apply(Math,array);

  5. python3 selenium模拟登陆斗鱼提取数据保存数据库

    # coding=utf-8from selenium import webdriverimport jsonimport timeimport pymongo class Douyu: def __ ...

  6. Python学习——列表

    定义:1.列表(list)是由一系列特定顺序排列的元素组成,可以包含字母,数字或者将任何东西加入列表. 2.列表的标识符号为 [ ],函数名称为list 3.列表是有序的 相关概念: 元素:列表中的值 ...

  7. Nginx服务及编译安装

    第1章 Nginx 1.1 nginx的概念 Nginx("engine x")是一个开源的.支持高性能.高并发的WWW服务和代理服务软件,具有高开发(特别是静态资源),占用系统资 ...

  8. SSM框架搭建（Spring+SpringMVC+MyBatis）与easyui集成并实现增删改查实现

    一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller        //控制类 service //服务接口 service.impl //服务 ...

  9. DIY 温控烙铁

    由于工艺原因,某处要使用200W大功率烙铁(恒温烙铁虽然有那么大功率,但没有那么大的烙铁头),只能选用普通电热丝烙铁(无温控),存在温度过高现象(造成工艺不良,同时因助焊剂+高温造成烙铁头腐蚀),逐渐 ...

  10. .Net中各种不同的对象创建方式的速度差异

    在.Net中,微软给我们提供了很多不同的创建对象实例的方法,它们的速度又各有不同,以下一一列举. 使用new关键字 这在.Net中是最常见,也是速度最快的方式:                     ...