在标准的盒子模型下，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. HDFS源码分析数据块复制选取复制源节点

    数据块的复制当然需要一个源数据节点,从其上拷贝数据块至目标数据节点.那么数据块复制是如何选取复制源节点的呢?本文我们将针对这一问题进行研究. 在BlockManager中,chooseSourceDa ...

  2. IOS设置图片背景

    在UIViewController里面这样设置: self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageN ...

  3. 浅析Apache中RewriteCond规则参数的详细介绍

    RewriteCond就像我们程序中的if语句一样,表示如果符合某个或某几个条件则执行RewriteCond下面紧邻的RewriteRule语句,这就是RewriteCond最原始.基础的功能,为了方 ...

  4. 阿里云服务器---centos编译安装ffmpeg

    环境 系统环境:CentOS release 6.7 (Final) 需求 编译安装ffmpeg 获取依赖 安装依赖包 yum install -y autoconf automake cmake f ...

  5. thinkPHP5.0的学习研究【架构】

    2017年6月19日18:51:53 架构:1.ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织.2.MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC ...

  6. uitableview滚动到最后一行

    本文转载至 http://mrjeye.iteye.com/blog/1278521 - (void)scrollTableToFoot:(BOOL)animated { NSInteger s = ...

  7. opengl绘制图片

    #include <GL/glew.h>#include <glut.h>#include "FreeImage.h"#include <stdio. ...

  8. git本地分支管理

    查看分支:git branch创建分支:git branch dev重命名分支:git branch -m dev dev1删除分支:git branch -d dev切换分支:git checkou ...

  9. 500 Lines or Less: A Template Engine(模板引擎)

    介绍: 多数项目都是包含很多的逻辑处理,只有少部分的文字文本处理.编程语言非常擅长这类项目.但是有一些项目只包含了少量的逻辑处理,大量的文本数据处理.对于这些任务,我们期望有一个工具能够很好的处理这些 ...

  10. [闲来无事，从头再来][C51篇]导读

    目       的:  通过学习C51,熟悉单片机,熟悉C语言,熟悉单片机系统的外部电路. 方       法:  通过看书和使用板子做实验来进行学习 参考资料: <新概念51单片机C语言教程& ...