box-sizing,你的宽高度计算对了吗?
Posted apanly
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了box-sizing,你的宽高度计算对了吗?相关的知识,希望对你有一定的参考价值。
我们都知道CSS
盒模型分为IE盒模型和W3C标准盒模型,它们的计算方式和一个CSS
属性有关box-sizing
。
box-sizing属性值
content-box | border-box 默认值:content-box
content-box
当我们对元素设置content-box
.demo1 { box-sizing: content-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #333; } 复制代码
在浏览器具体表现为
border-box
当我们设置成border-box
.demo2 { box-sizing: border-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #ccc; } 复制代码
在浏览器具体表现为
元素宽高计算
当我们去掉元素的宽高度时
去掉元素的内外边距时
当我们去掉元素padding
,border
时可以看出元素的宽高度是在变化的,而去掉margin
值时,元素的宽高没有变化。
所以我们的元素的宽高度值计算只和padding
,border
,元素的content
有关
width = padding + border + content height = padding + border + content 复制代码
总结
content-box
在宽度和高度之外绘制元素的内边距和边框border-box
在宽度和高度之内绘制元素的内边距和边框元素的宽高和
margin
无关,与padding
,border
,元素的content
有关当
box-sizing
属性值为content-box
时,元素的宽高等于:width + padding + border
;当
box-sizing
属性值为border-box
时,元素的宽高等于元素设置的width
和height
作者:Mondo
链接:https://juejin.im/post/5ce3c9e751882533411b1fdd
原文地址:box-sizing,你的宽高度计算对了吗?
标签:元素 宽高 高度 borderbox
智能推荐
以上是关于box-sizing,你的宽高度计算对了吗?的主要内容,如果未能解决你的问题,请参考以下文章