（21）css3盒模型box-sizing属性

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

1.content-box标准盒模型

Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分。

标准和模型是外扩的，再元素的宽高度之外绘制内边距和边框。

2.boder-box怪异盒模型

Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩。

怪异盒模型是内减的，再元素的宽高度之内绘制内边距和边框。将内容收缩，把宽度和高度分别缩短到160px。

总结：标准盒模型是外扩的，怪异盒模型是内缩的。

（21）css3盒模型box-sizing属性相关推荐

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
什么是盒模型(Box Model)
什么是盒模型(Box Model) 盒模型规定了网页元素如何显示以及元素间相互关系,它本质上是一个盒子,封装周围的HTML元素.css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区 ...
CSS3盒模型box-sizing属性详解，布局更方便
使用方法: box-sizing: content-box; box-sizing: padding-box; box-sizing: border-box; 属性解析: 当设置为content-bo ...
css3盒模型、过渡、转换介绍
CSS3中盒模型: 前面CSS中学到的盒子模型给padding.border会撑开盒子的大小,实际大小要通过计算才能得到,为了解决这个问题,CSS3推出了box-sizing属性来解决此问题,当box ...
css3盒模型：IE6混杂模式下的盒模型
IE6混杂模式下的盒模型本来是IE的特有的,后来大家发现,诶还行好用,所以在CSS3中加入了属性box-sizing,当属性值为border-box时,则按照混杂模式的原则创建盒子适用于场景 1.宽 ...
CSS盒模型( CSS margin 属性)
常见的图片怎样理解呢看下面例如 ' 设置的属性如下 .mian_one{width: 500rpx;height: 500rpx;background: #00d8a0;}.main_two{wid ...
extjs中滚动条属性_前端学习随笔6 盒模型及相关属性
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 一心得体会最大的收获是第一次知道了outline(轮 ...
CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

（21）css3盒模型box-sizing属性

1.content-box标准盒模型

2.boder-box怪异盒模型

（21）css3盒模型box-sizing属性相关推荐

最新文章

热门文章