总结一下content-box和border-box的区别，因为今天碰到这个问题给搞蒙了，看了很多帖子说content-box不包含padding和border；自己写了个盒子测试了一下

   .box {width: 200px;height: 200px;padding: 10px;margin: 20px;border: 5px solid red;background-color: cadetblue;/* content-box宽：200  高：200  padding：10  border：5px  合计大小230 *//* box-sizing: content-box; */box-sizing: border-box;/* border-box宽：170  高：170  padding：10  border：5px  合计大小200  */}

border-box 的效果图200px

content-box 效果图230px

做了测试更蒙了，这content-box最后大小不就是230px，不是包含了padding和border吗？最后又看了一些相关的博客，终于明白了！我理解的包含是把宽高计算在总大小内，而真正的理解是：“windt”，“width”，“width”，是你自己写的width在计算总盒子大小的时候不把padding和border计算在内winth内，就是要另外在加上padding和border；理解上出现了偏差。

content-box计算公式：winth=width+padding+border

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型

border-box：怪异盒模型，低版本IE浏览器中的盒模型

语法格式

box-sizing：content-box | border-box

区别

content-box：padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

border-box：padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width（padding和border不会影响实际宽度，有效果，但不计算大小）

总结

我们在理解的时候就要记住content-box是正常盒模型，border-box是怪异盒模型；
content-box正常的盒子模型：width+padding+border，盒子内所有属性相加得到最终盒子大小；
border-box怪异盒模型，就是你写个width：200px；后面无论padding和border你写多少，最终盒子宽度就200px，不会变大，不会加上padding和border的大小；也就是width包含了padding和border。

盒模型之content-box和border-box的区别相关推荐

怪异盒模型/flex布局
传统盒模型(标准盒模型) 默认的都是标准盒模型;(border,padding,margin,content) box-sizing:content-box; 盒子的宽度/高度= width/heig ...
一天搞定CSS：盒模型content、padding、border、margin--06
1.盒模型网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物- ...
【html】盒模型div，边框border，内边距padding，外边距margin
初识盒模型要想学习盒模型,首先要知道什么是盒模型.顾名思义,每个div标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成. 盒模型的组成盒模型包括:content(内 ...
CSS2.1 盒模型
8 Box model盒模型 8.1 Box dimensions 盒子的大小 Each box has a content area (e.g., text, an image, etc.) and ...
盒模型--标准盒模型---怪异盒模型
盒模型: .demo{overflow:hidden;/*超出隐藏*/width:300px;hight:300px;padding:background-color:blue;} 盒模型: 复合属性 ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...
盒模型，块状元素，行内元素
盒子模型: css盒模型分为两种,一种是遵循w3c标准的标准盒模型,另一种是IE盒模型. 标准盒子模型 IE盒子模型通过上面两张图可以看出,两种盒子模型都包括padding,margin,borde ...
简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...

盒模型之content-box和border-box的区别

border-box 的效果图200px

content-box 效果图230px

content-box计算公式：winth=width+padding+border

语法格式

区别

总结

盒模型之content-box和border-box的区别相关推荐

最新文章

热门文章