css盒子模型_CSS盒子模型宽高设定须知

---

今日背诵小纸条

Content宽度和高度

元素空间大小

Element空间高度 = height + padding + margin + border

Element空间宽度 = width + padding + margin + border

元素实际大小

Element实际高度 = height + padding + margin

Elenment实际宽度 = width + padding + margin

CSS3盒子模型

box-sizing:border-box;

默认为content-box，border-box模式下，padding和border将不会撑开盒子的宽高

注意事项

宽高设置应用范围

宽度和高度只适应于块内元素，行内元素无法设置

padding值的影响力

当盒子没有宽度/高度或继承父级元素的宽度/高度时，则padding值不会影响盒子

内外边距异常情况

行内元素只有左右内外边距

无上下外边距，上下内边距有兼容性问题，建议行内元素不要设置上下内外边距

外边距合并(塌陷)

1 相邻盒子外边距合并

盒子垂直外边距取两个盒子外边距中的最大值

2 父子盒子外边距合并

当父级没有上内边距或边框(即使父级上外边距为0)时，子级盒子的外边距将与父级盒子合并，取其中最大值

解决方案：

1)可以为父级元素设置上内边距或边框

2)盒子溢出隐藏，overflow:hidden;