文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在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. 炉石传说 C# 设计文档（序）

    经过3个月的开发,有很多感触. 以前一直以为技术是开发成败的第一因素,现在发现,等到你代码写的时间够长,经验够丰富,什么功能都能随手完成,对于业务的分析能力变成了第一位. 炉石山寨版的BS版本用到的H ...

  2. MongoDB管理工具的插件系统

    MongoDB管理工具  MongoCola的开发已经进入第三个年头了. 官方对于C#驱动的投入不够导致了很多东西都必须自己实现,但是不管怎么样,工具现在已经很强大了. 最近准备着手插件系统的开发,简 ...

  3. C++: read access data using ADOX.DLL and System::Data::OleDb

    #pragma once #include "Form2.h" namespace cdemo { using namespace System; using namespace ...

  4. Oracle数据库，查询语句、内置函数

    一.数据库的查询语句: 1.查询整个表: select * from 表名 例: 2.通过条件查询某一行数据: select * from 表名 where 字段名 例: 3.某一列数据去重查询: s ...

  5. java servlet手机app访问接口(三)高德地图云存储及检索

    这篇关于高德地图的随笔内容会多一点, 一.业务说明     对应APP业务中的成员有两类,一是服务人员,二是被服务人员,  主要实现功能, 对APP中的服务人员位置进行时时定位, 然后通过被服务人员登 ...

  6. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  7. 泛函编程（30）－泛函IO：Free Monad－Monad生产线

    在上节我们介绍了Trampoline.它主要是为了解决堆栈溢出(StackOverflow)错误而设计的.Trampoline类型是一种数据结构,它的设计思路是以heap换stack:对应传统递归算法 ...

  8. singleCall单来源调用解析及实现

    定义: 单来源调用指一个类的生成工作只能由特定类来执行. eg李宁牌鞋子只能由李宁专卖店生产 这个问题归结起来,也就是说在工厂模式中,指定的产品类只能通过具体的特定工厂类来生成,而不能自己new出来或 ...

  9. 2013年最新流行的响应式 WordPress 主题【上篇】

    WordPress 是最流行的内容管理系统,经历了多年的发展和演变.它的成功体现在庞大的社区,数百万的用户,设计师和开发者推动着 WordPress 往更高的层次发展. 海量的免费主题是 WordPr ...

  10. Dropplets – 极简的 Markdown 博客平台

    Dropplets 是一个简单的博客平台,专注于提供正是你在博客解决方案中需要的.当涉及到基础的博客功能,你真正想要做的是写和发表,而这就是 Dropplets 的过人之处.Dropplets 是一个 ...