CSS常见问题

常见的CSS问题

一.多个盒子之间的外边距影响

1. 行内盒子水平排放的外边距

描述：水平排放的盒子，水平间距是margin的叠加。

2. 块级盒子垂直排放的外边距

描述：垂直排放的盒子，垂直间距是合并的（取最大值）。

3. 父,子盒子的垂直外边距合并

未设置子盒子的外边距

设置子盒子的外边距

  在给子盒子添加外边距后，父、子盒子同时下移，这说明父、子盒子的外边距合并了。
  为子盒子添加的外边距也就是为父盒子添加了外边距，这对网页排版造成了一定影响。

解决方式：

1. 父盒子添加 overflow：hidden
2. 父盒子添加 padding
3. 父盒子添加 border
4. 添加浮动，固定,绝对定位

二.子盒子浮动造成的造成父盒子高度塌陷

描述：
  当父盒子未设置高度时，设置子盒子高度时，父盒子会被撑开。
  当子盒子设置浮动后，子盒子会完全脱离文档流，子盒子无法撑起父盒子的高度，导致父盒子高度塌陷变变为0。
未设置浮动前

设置浮动后

解决方式

1.在父元素中添加一个新的元素clear:both
2.为父元素中添加overflow:hidden
3.为父元素添加伪类：after ，对伪类设置clear:both

三.inline-block元素间的换行符空格间隙问题

描述：
  当多个行内块元素排列在一起，会出现换行符/空格间隙(padding margin已清0)。

解决方式：

1.向其所属的父元素添加font-size:0
2.向其所属的父元素添加letter-spacing:-5px