css3之box-sizing

假如想象 提交于 2020-02-08 12:59:17

首先,box-sizing 属性是以特定的方式定义匹配某个区域的特定元素,以适应指定区域,是css3中新增的属性。

**
语法格式

box-sizing: content-box/border-box/inherit;

**

属性介绍
①.content-box: 由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。也就是我们所说的标准盒模型;

即: Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
**
②.border-box: 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。;

即: Element空间高度 =( content height + padding + border)+ margin
Element 空间宽度 = ( content width+ padding + border)+ margin
**
③inherit : 规定应从父元素继承 box-sizing 属性的值。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!