content-box:默认行为,在元素的宽度和高度之外绘制元素的内边距和边框;
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
作用:当需要指定某元素为父元素100%宽度,同时还要给该元素加边框或者内边距时可以用到。
值 | 说明 |
---|---|
content-box | 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
border-box | 指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 指定 box-sizing 属性的值,应该从父元素继承 |
简单理解:在样式中 添加 box-sizing: content-box; 后所指定的宽高,不包含外边距 margin ,也不包含内边距 padding
已经笔记均是渣渣本人自己所看,做个保存而已,各位大神看到不要噴!