CSS盒模型 学习笔记 之 box-sizing
CSS 盒模型
- 元素的宽高 的计算规则
box-sizing: content-box; ( 默认值 )
- 在浏览器上进行渲染的盒子宽高默认会包含设置的边框 border 和 内边距 padding
例如 :
核心样式:
.box {
width: 100px;
height: 100px;
padding: 5px;
background-color: pink;
}
/* box-sizing: content-box; 默认值 总宽 = 内容宽 + 边框 + 内边距 */
.border-box {
/* 内容宽 = 总宽 - 边框 - 内边距 */
box-sizing: border-box;
}
HTML 结构:
元素的详细尺寸:元素的内容区宽度 + (border + padding )
box-sizing: border-box;
当 为box 元素盒子设置 box-sizing: border-box; 后,改变了内容区域的实际宽度 它 = 元素的width - (border + padding) 的计算结果
默认样式还原
···
margin: revert;
···