css3：盒模型以及box-sizing属性

前端开发 2016-09-20

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

css3：盒模型以及box-sizing属性

在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

css3：盒模型以及box-sizing属性

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

css3：盒模型以及box-sizing属性

前端开发

前端开发

相关推荐

移动端的特殊样式

-webkit-appearance:none 清除iOS中预置的样式，如input，botton

RexLeee / 0评论 2020-05-01

web前端入门到实战：CSS box-sizing属性的正确用法

CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度

MrHaoNan / 0评论 2019-12-19

CSS3 新特性（box-sizing盒模型，filter滤镜，calc函数，transition过渡）

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。　如果盒子模型我们改为了 box-sizing：border-box，那么 padding

wangjie / 0评论 2019-10-25

CSS3 box-sizing 属性

表格中的数字表示支持该属性的第一个浏览器版本号。box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。也就是说，

王为仁 / 0评论 2019-10-11

CSS3 CSS3 box-sizing 属性

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 . 此属性表现为标准模式下的盒模型。如果做响应式布局，一般采用box-sizing:border-box;

AnyBisks / 0评论 2015-12-23

入浅出JMS(三)--ActiveMQ简单的HelloWorld实例

第一篇博文深入浅出JMS(一)–JMS基本概念，我们介绍了JMS的两种消息模型：点对点和发布订阅模型，以及消息被消费的两个方式：同步和异步，JMS编程模型的对象，最后说了JMS的优点。第二篇博文深入浅出JMS(二)–ActiveMQ简单介绍以及安装，我们介

Jolestar / 0评论 2016-06-02

CSS3中的box-sizing（content-box与border-box）

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型border-box：怪异盒模型，低版本IE浏览器中的盒模型现代浏览器和IE9+默认值是content-box。box-sizing：content-box |

qiupu / 0评论 2019-07-01

读《css世界》笔记（1）

css流体布局下的宽度分离原则宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。}此时.box的宽度是102px,然后设计师需要20px的留白那么现在我们需要增加padding:20px;

王景迁 / 0评论 2019-07-01

CSS 专业技巧

您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：。}现在元素的 margin 和 padding 已为0，box-sizing可以管理您的CSS盒模型布局。}如此在插件或其它组件里改变 box-sizing 变得简单。

dazhifu / 0评论 2019-07-01

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

W3C规范一般来说，页面中的每一个元素都会形成一个矩形盒子，渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说，页面的布局就是一个个盒子的排列和摆放。Each box has a content area and optional surroundin

yongquanx / 0评论 2016-08-01

CSS3 box-sizing border-box 学习笔记

对象的实际宽度等于设置的width值和border、padding之和，即 此属性表现为标准模式下的盒模型。border-box：padding和border被包含在定义的width和height之内。示例：content-box:.test1{ box-

李鴻耀 / 0评论 2016-06-16

CSS3 CSS3 box-sizing 属性

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 . 此属性表现为标准模式下的盒模型。如果做响应式布局，一般采用box-sizing:border-box;

opspider / 0评论 2015-12-23

CSS3中的box-sizing

懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型。我们都知道盒模型从里到外主要包括：content，padding，border，margin。两种盒模型的宽度width 标准盒模型的width = content 怪异盒模

yibawuqing / 0评论 2019-06-27

Controlling width with CSS3 box-sizing

This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical exa

zhouguizhi / 0评论 2014-08-27

box-sizing是CSS3的box属性

box-sizing是CSS3的box属性之一。一说到CSS的盒模型我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-si

张大晴 / 0评论 2014-08-27

css3中的box-sizing属性

盒子宽度、高度计算公式：css元素宽度 = width + padding + bordercss元素高度 = height + padding + border. css3之前，当我们需要呈现一个宽度为200px的盒子时，我们需要减去它本身的内边距、边框

yezi / 0评论 2019-06-26

CSS3中的box-sizing属性

box-sizing属性是css3中新添加的属性，用来替换原来的css盒子模型，box-sizing属性值的不同，元素的高度和宽度的计算方法也不同。box-sizing: padding-box;在默认情况下，设置的width和height属性都是指元素内

jianqi / 0评论 2019-06-25

css note

padding-top: 0 !important;padding-bottom: 0 !important;-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !im

icecoffeemzp / 0评论 2012-09-05

CSS3 box-sizing 属性

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。值说明content-box这是CSS2.1指定的宽度和高

李鴻耀 / 0评论 2017-01-08

css3中的box-sizing属性的使用

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值：content-box、border-box、inherit。content-box也叫标准盒子模型，是默认值。举个例子，如果这个元素的宽度为100px，那么它

BitTigerio / 0评论 2018-04-18

css3 box-sizing详解。

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。<div class="box">这个 div 占据右半部分。border-box，border和padding计算入widt

大前端 / 0评论 2017-01-20

【CSS3】css3：box-sizing属性

本文介绍了css3中的box-sizing属性，在这之前读者需要预备知识width的范围。SafariYes5.13.2 -webkit-box-sizing属性box-sizing属性可以有三个值：content-box，border-box属性。con

前端开发探路者 / 0评论 2016-12-01

width 、 height 与 box-sizing : border-box ,content-box 的关系

默认 width 、height的 content-box 的宽高.box-sizing 经常用做一些自适应的布局。对象的实际宽度等于设置的width值和border、padding之和，即 此属性表现为标准模式下的盒模型。border-box： p

编程爱好者联盟 / 0评论 2016-11-25