在标准的盒子模型下，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. Junit内部解密之三： 单元测试用例运行的全过程

    转自:http://blog.sina.com.cn/s/blog_6cf812be0100x8sb.html 我们以一个非常简单的TestCalculator类为例,只有一个测试方法: Public ...

  2. mysql 考勤表异常 【待修改】

    有考勤刷卡记录表,表名为attendance ,有如下字段: 姓名 卡号 刷卡时间 刷卡类型 name id time type    张三 59775623 2010-04-01 07:23:37  ...

  3. sublime中如何安装vue.js插件，并使代码高亮显示

    前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...

  4. Mysql的学习研究

    2017年5月16日11:26:17 从今天开始过一遍数据库的基础教程,加油!!!!! 看了之后对一些基础知识有了理解,加油... 笔记: 2017年5月16日11:35:46mysql的基础教程1. ...

  5. Root（hdu5777+扩展欧几里得+原根）

    Root                                                                          Time Limit: 30000/1500 ...

  6. lua注册函数

    #include <stdio.h> #include <math.h> #define MAX_COLOR 255 extern "C" { #inclu ...

  7. 信息搜集之google语法

    总结的比较全,无耻的转了.D: http://blog.csdn.net/chaosa/article/details/1828301 说起Google,可谓无人不知无人不晓.作为世界第一的搜索引擎, ...

  8. 3.设计模式----TemplateMethod模式

    模板模式,其实是一种思想,在开发中有很多地方用到模板,因为毕竟我们不可能每一个都一出一段!一个模板,填充不同,出来效果也是不一样! 准备画个时序图的,没找到工具,过几天补上! 模板模式在出现bug时候 ...

  9. CF451E Devu and Flowers(容斥)

    CF451E Devu and Flowers(容斥) 题目大意 \(n\)种花每种\(f_i\)个,求选出\(s\)朵花的方案.不一定每种花都要选到. \(n\le 20\) 解法 利用可重组合的公 ...

  10. 好用的 curl 抓取 页面的封装函数

    由于经常使用php curl 抓取页面的内容,在此mark 平时自己封装的 curl函数,(其实 现在也开始用 Python 来爬了~ ^-^) /** * 封装curl方法 * @author Fr ...