在标准的盒子模型下，css中 width，padding以及border的关系

关于css中的width和padding以及border的关系。

在css中，width和height指的是内容区域的宽度和高度，增加padding,border,和margin不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

例如：  这样设置div：width=300px; padding=10px;得到的图如下

在这个图中，width的值是多少？

有人可能以为是：width=300+10+10=320,这是错误的，实际width的值还是300。

不会形成总宽度为：300-10-10=280的效果，最终的宽度还是300px不变，总宽度会变成300+10+10=320px;

css3中的box-sizing 改变盒子模型的组成方式

语法：

box-sizing ： content-box | border-box | inherit

相关属性 ： 无

取值：

content-box:

此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。

示例：

  • content-box:

    .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

border-box:

此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型。

border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

示例代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>css3 box-sizing使用指南</title>

    <style>

        .box_sizing {

            width: 180px;

            padding: 40px 20px;

            background: #a0b3d6;

            overflow: hidden;

        }

        .box_sizing .in {

            width: 100%;

            border: 12px double #34538b;

            padding: 5px;

            background: white;

            box-sizing: border-box;

            -o-box-sizing: border-box;

            -ms-box-sizing: border-box;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div class="box_sizing">

        <div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~！</div>

    </div>

</body>

</html>

选中最外层div的时候，css的截图如下：

可以看到设置了width=180,实际的内容依然是180，只不过总宽度到了220px

当选中里面的div时，css图如下：

由于设置了box-sizing:border-box,此时12px的border和5px的padding算在了宽度中，此时实际的内容区域为146px

当我们把box-sizing:border-box属性去掉的时候，截图如下：

此时内容区域的宽度还是为180px，但是最外层的div的总宽度为： 180+20+20=220px；

而里面的div的总宽度为： 180+12+12+5+5+20=234px,所以溢出了。最后面的20为最外层div的padding-left;

所以设置了 box-sizing:boder-box ,会把boeder和padding的值也算在内容的宽度中，总宽度不变。

css 盒子模型 以及 box-sizing属性的更多相关文章

  1. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  2. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  3. CSS盒子模型中的Padding属性

    CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...

  4. css盒子模型中的border属性

        认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...

  5. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

  6. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  7. （5）css盒子模型（基础上）

    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...

  8. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  9. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

  10. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

随机推荐

  1. 【数据结构】29、hashmap=》tableSizeFor 中求大于等于当前数的最小2的幂

    最近面试被问到hashmap的实现,因为前段时间刚好看过源码,显得有点信心满满,但是一顿操作下来的结论是基础不够扎实... 好吧,因为我开始看hashmap是想了解这到底是一个什么样的机制,具体有啥作 ...

  2. 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略

    转自:http://blog.csdn.net/gao5528/article/details/6256119 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略(K5系列产品篇) 一年 ...

  3. Docker-Compose 自动创建的网桥与局域网冲突解决方案

    环境: 使用docker-compose.yml 部署应用,docker 默认的网络模式是bridge ,默认网段是172.17.0.1/16  ,不巧的是我们局域网也使用的172.22. xx 网段 ...

  4. Mysql----MySQL的mysql_insert_id和LAST_INSERT_ID(转)

    本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...

  5. COM线程单元

    节选自C#高级编程 不管是单线程单元还是多线程单元,一个线程只能属于一个单元. 1) 单线程单元(apartment, 寓所,套间) 单线程单元与它拥有的线程是一对一的关系.COM对象在编写时不是线程 ...

  6. python基础： day4作业计算器

    作业:计算器开发 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...

  7. 使用Swoole加速Laravel(正式环境中)

    1 Laravel的速度瓶颈在哪? 1.1 已有的一些优化方法 1.1.1 laravel官方提供了一些优化laravel的优化方法 php artisan optimize php artisan ...

  8. Cassandra数据库Java訪问

    针对的时Cassandra 2.0 数据库 Java本地client訪问Cassandra,首先建立Javaproject,使用Maven进行管理. 引入依赖: <dependency> ...

  9. html checkbox的checked属性问题和value属性问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. tomcat 编码问题

    默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找到如下代码:    < Connector port="8080 ...