常见的CSS问题
一.多个盒子之间的外边距影响
1. 行内盒子水平排放的外边距
描述:水平排放的盒子,水平间距是margin
的叠加。
2. 块级盒子垂直排放的外边距
描述:垂直排放的盒子,垂直间距是合并的(取最大值)。
3. 父,子盒子的垂直外边距合并
未设置子盒子的外边距
设置子盒子的外边距
在给子盒子添加外边距后,父、子盒子同时下移,这说明父、子盒子的外边距合并了。
为子盒子添加的外边距也就是为父盒子添加了外边距,这对网页排版造成了一定影响。
解决方式:
- 父盒子添加
overflow:hidden
- 父盒子添加
padding
- 父盒子添加
border
- 添加浮动,固定,绝对定位
二.子盒子浮动造成的造成父盒子高度塌陷
描述:
当父盒子未设置高度时,设置子盒子高度时,父盒子会被撑开。
当子盒子设置浮动后,子盒子会完全脱离文档流,子盒子无法撑起父盒子的高度,导致父盒子高度塌陷变变为0。
未设置浮动前
设置浮动后
解决方式
1.在父元素中添加一个新的元素
clear:both
2.为父元素中添加overflow:hidden
3.为父元素添加伪类:after
,对伪类设置clear:both
三.inline-block元素间的换行符空格间隙问题
描述:
当多个行内块元素排列在一起,会出现换行符/空格间隙(padding margin
已清0)。
解决方式:
1.向其所属的父元素添加
font-size:0
2.向其所属的父元素添加letter-spacing:-5px