html5 网页开发 css爬坑小技巧速查

问题列表：

1. div内img标签和文字不对齐
2. div内两个display为inline-block的div出现错位
3. div内两个display为inline-block的div有间隙
4. div内两个display为inline-block的div大小控制

1.div内img标签和文字不对齐

在写前端代码时发现在div中插入img标签后，div中的文字会对齐img图片的底端，就算设置了line-height也没有用
html结构如下：

<div>
	<img src="media/girl.png" alt="头像">
	&nbsp;&nbsp;张三
</div>

结果如下：

解决方案：
div中的img设置css vertical-align:middle即可解决。

2.并排display:inline-block的div错位

html结构如下：

<div class="parent">
	<div class="left">Left块</div>
	<div class="right">Right块</div>
</div>

出现情景：
两边的宽度都设定，右边right块只显示一行，即设置了overflow:hidden,出现错位：

解决方案：
父div设置css：vertical-align:middle

3.div内两个display为inline-block的div有间隙

出现情景见 div内两个display为inline-block的div出现错位 可以发现左右两个块之间是有间隙的。
解决方案：
设置parent父div的cssfont-size:0后(发现文字消失),再设置子div的cssfont-size:15px间隙消失

4.div内两个display为inline-block的div大小控制

当并排连个div时要固定一个div宽度，另一个自适应。条件如 div内两个display为inline-block的div出现错位时，左侧left要固定宽度，右侧right自适应大小，这时，left依旧按平常设置csswidth:100px
right解决方案：
设置csswidth:calc(100% - 100px)