文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在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#的MongoDB数据库开发应用（3）--MongoDB数据库的C#开发之异步接口

    在前面的系列博客中,我曾经介绍过,MongoDB数据库的C#驱动已经全面支持异步的处理接口,并且接口的定义几乎是重写了.本篇主要介绍MongoDB数据库的C#驱动的最新接口使用,介绍基于新接口如何实现 ...

  2. 微信开发中遇到“当前页面的url未注册”问题

    在公众号后台设置支付授权目录,完全按照规则去设定的,但是在实际测试中会出现“当前页面的url未注册”的问题,反复确认后发现目录并没有问题,唯一的区别就是大小写不同. 但是一般url不都是不区分大小写的 ...

  3. 【开源】Ionic项目实例《Ionic中文社区》

    介绍 这几天闲着没事,就做了个第三方的Ionic社区的移动客户端,练练手,界面设计和图片资源直接从官方版拿来的.真懒o(︶︿︶)o 唉 网站开放出来的接口,都已全部实现,大家可以下着试试看. 源码 h ...

  4. iOS阶段学习第一天笔记（Mac终端的操作）

    前言部分 原本从事的是.NET开发,一直在要不要转iOS 中犹豫徘徊,经过复杂的内心挣扎终于鼓起勇气辞职脱产学习iOS;希望通过四个月的 学习后能够拿到理想的薪资.以下是学习过程中的学习笔记,为了方便 ...

  5. Win10 IoT C#开发 3 - GPIO Pin 控制发光二极管

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一篇文 ...

  6. script加载文件

  7. TabHost的使用

    Android中的选项卡是用TabHost实现的. 首先,定义TabHost的布局文件: <?xml version="1.0" encoding="utf-8&q ...

  8. Java就业指导

    想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?本文陈列的这些内容既可以作为个人简历中的内容,也可以作为面试的时候跟面试官聊的东西,你可以把这些内 ...

  9. opencart 添加新模型

    1,修改模板页,复制category_list.tpl,category_form.tpl,修改成新的名称. category_list.tpl是列出页面,category_form.tpl是添加和修 ...

  10. AppleDoc的安裝使用

    前言,還是那句話,新手按照濤叔下面畫黃色的步驟順序執行就好了,不要問為什麼. 一.安裝(注意,濤叔事先已經下載了appledoc) 1.找到下載的appledoc目錄 $ cd /Users/libo ...