CSS 使用不同盒子模型可以通过 CSS 属性 box-sizing 来设置, 当它的值为 content-box 时, 是标准的盒子模型; 当它的值为 border-box 时, 是 IE 盒子模型; 当它的值是 inherit 时, 继承自父元素的 box-sizing 属性的值.
box-sizing 属性值
● content-box: 默认值, width 和 height 属性分别应用到元素的内容框. 在宽度和高度之外绘制元素的内边距, 边框, 外边距.
● border-box: 为元素设定的 width 和 height 属性决定了元素的边框盒. 就是说, 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制. 通过从已设定的宽度和高度分别减去外边距, 边框和内边距才能得到内容的宽度和高度.
● inherit: 规定应从父元素继承 box-sizing 属性的值.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
盒子模型知识扩展
一个盒子由外到内可以分成四个部分: margin(外边距),border(边框),padding(内边距),content(内容). 会发现 margin,border,padding 是 CSS 属性, 因此可以通过这三个属性来控制盒子的这三个部分. 而 content 则是 HTML 元素的内容.
盒子真正的宽和高按下面公式计算:
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
为了显得专业一点, 我们还可以用带属性的公式表示:
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
上面说到的是 默认 情况下的计算方法, 另外一种情况下, width 和 height 属性设置的就是盒子的宽度和高度. 盒子的宽度和高度的计算方式由 box-sizing 属性控制.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14645.html