HTML中的盒子模型
当在HTML顶部声明了 doctype后 网页就是标准模式下渲染,
HTML中的块级元素就是一个盒子模型
标准盒模型:box-sizing: content-box
一个标准盒模型所占的空间 = 实际宽高(width/height)+ 内边距(padding)+ 边框(border)+ 外边距(margin)
例如:定义一个宽高为100px的标准盒模型,然后给他加上border、margin和padding
div: {
width: 100; // 盒子的宽
height: 100; // 盒子的高
border: 10px solid green; // 盒子的边框
margin: 10px; // 外边距
padding: 10ox // 内边距
}
此时盒子在页面所占的实际空间为:
宽:100px + 20px(margin) + 20px(border) + 20px(padding) = 160px
高:100px + 20px(margin) + 20px(border) + 20px(padding) = 160px
盒子内容所占区域:
宽:100px
高:100px
怪异盒模型: box-sizing: border-box
一个怪异盒模型所占的空间 = 实际宽高(width/height)+ margin
怪异盒子的padding和border会占据盒子的width/height
例如:定义一个宽高为100px的怪异盒模型,然后给他加上border、margin和padding
div: {
box-sizing: border-box; // 把盒子变为怪异模式
width: 100; // 盒子的宽
height: 100; // 盒子的高
border: 10px solid green; // 盒子的边框
margin: 10px; // 外边距
padding: 10ox // 内边距
}
此时盒子在页面所占的实际空间为:
宽:100px + 20px(margin) = 120px
高:100px + 20px(margin) = 120px
盒子内容所占区域:
宽: 100px - 20px - 20px = 60px
高: 100px - 20px - 20px = 60px
总结
废话这么多,总结两句话(不算上margin外边距)
- 怪异盒子设置padding和border
盒子不会变大,不会影响布局,盒子总区域不变,盒子内容区域 = 盒子width/height - padding - border - 标准盒子设置padding和border
盒子会变大,会影响布局,盒子内容区域不变,盒子总区域 = 盒子width/height + padding + border
最后,有什么不足之处和错误,请各位大佬指出,谢谢!