HTML/CSS 常见问题的处理

图片之间的缝隙

方案：vertical-align

img{
	vertical-align:top;
	/*只要不是默认值baseline即可，可用top/middle/bottom*/
}

高度塌陷/外边距重叠

高度塌陷问题：父元素不设置高度（靠子元素撑开），子元素浮动后，完全脱离文档流，无法撑起父元素高度，导致父元素的高度丢失。

外边距重叠问题：对子元素设置margin时，会和父元素的重在一起，导致不能对子元素使用margin来改变其相对于父元素的垂直位置。

方案：（对子元素设置）

• ①设置overflow:hidden （操作方便）
• ②模块化代码.clearfix，对父元素加class="clearfix"即可。

  .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }
  

定位和视口问题

出自李立超H5 2019 p112（靠后的部分）

此时想要实现这样的效果：不论怎么拉动窗口，橙色工具条都能保持在右下角的固定位置。

如果开启绝对定位，直接设置 right=某值，不能实现这个效果。

正确做法：
先设置right:50%，再调margin-right=某一负值（可以算/尝试）

布局的等式：
left + margin-left + width +margin-right +right = 视口宽度
（以下为举例，每一个值都和上方的等式对应）
auto + 0 + 26 + 0 + 60 = 视口宽度（×）
auto + 0 + 26 + (-639) + 50% = 视口宽度
（50%和视口宽度都在改变，所以工具条可以在固定位置）