文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。

  • 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

  • 在IE模型中: 总宽度 = margin-left + width + margin-right

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.

共包括两个选项：

  • content-box：标准盒模型，CSS定义的宽高只包含content的宽高。（默认）

  • border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

实例：

(con1设置为box-sizing：border-box，con为默认的content-box)

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         .con{width: 100px; height: 100px;background-color:royalblue;

              border:1px solid red; padding: 10px;}

         .con1{box-sizing: border-box;}

     </style>

 </head>

 <body>

     <div class="con"></div>

     <div class="con con1"></div>

 </body>

在控制台可以一目了然的看出两个盒子的区别

第一个div的盒子模型如下：content-box

第二个div的盒子模型如下：border-box

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

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. CSS3盒模型display:box简述

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...

  4. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  5. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  6. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  7. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  8. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  9. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  10. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

随机推荐

  1. 基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出

    数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...

  2. 关于C#基础

    前几天帮人做个社交网站,还是用的控件方式,不过学习了ajax和一般处理程序ashx后,也用在了里面一些,今天回来继续写博客.继续上次总结下基础知识,学的内容多,总结的可能比较杂乱,分条总结为平时能自己 ...

  3. C++宏和枚举

    宏 我们的计算器程序,用1234对应加减乘除,对于人阅读很产生一点障碍.隔一个月后再看此代码可能想不起是0123还是1234了,还得去代码中查找,如果能为代表四则运算的四个数取个有意义的别名就好了,一 ...

  4. C#获取 URL参数

    假设当前页完整地址是:http://www.test.com/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.te ...

  5. 不可或缺 Windows Native (13) - C++: 标准输入, 标准输出, 字符串内存流

    [源码下载] 不可或缺 Windows Native (13) - C++: 标准输入, 标准输出, 字符串内存流 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 标准输 ...

  6. input框中的size和maxlength的区别

  7. archive for required library...

    最近把移动硬盘上的一个Android项目复制到笔记本上面,import后项目文件夹始终有一个红色叹号,console里面提示“archive for required library...”,原来是l ...

  8. [译]WebVR技术方案草案

    注:基于官方的.bs规范专用格式进行了翻译,但结果发现无法编译成html格式,所幸基本兼容.markdown格式. 中文翻译项目地址:https://github.com/web3d/webvr-sp ...

  9. 用xutils3.0进行下载

    写的例子比较简单,是用xutils3.0来进行下载项目更新 1.先通过网络请求,判断版本是否要更新 2.若要更新,则弹出一个弹窗,我用的是系统自带的Dialog,将下载的版本号及下载的内容提示展示出来 ...

  10. 七个结构模式之适配器模式(Adapter Pattern)

    定义: 将一个接口转换为客户需要的另外一个接口,使接口不兼容的类型可以一起工作,也被称为包装器模式(Wrapper Patern). 结构图: Target:目标抽象类,客户所需要的接口. Adapt ...