发表于： 2019-03-26 23:33:21
1 829
今天完成的事：
1.完成了任务十三，页面（1）（2）
2.学习了vertical-align的使用
明天的计划：
1.结束任务十三第三个页面，并结合sass进行优化代码
2.开始任务十四学习
3.学习JS基知识
4.CSS基础查漏补缺
遇到的问题：
无
收获：
1.今天重点学习了vertical-align这个属性
【1】说到vertical-align我第一反应就是middle，可以让文字居中。但是这个需要条件，不是所有情况下，都可以让文字居中，所以在哪些情况下可以使用？
【2】幽灵空白点——这是我之前遗留在脑中的问题，就是在一个盒子里，我添加一张图片，但是图片无法碰到盒子底部，总会有一个间隙，这个间隙称为幽灵空白点。我们如果在图片前面加上一个xx，就可以看见
今天在看张鑫旭老师的书，讲解vertical-align的时候，才知道，产生间隙的三大元凶分别就是 幽灵空白点--line-height- vertical-align，这三个老哥共同作用下，产生了这个间隙。 所以，我们知道了原因，但是如何消除这个间隙？
【3】有些小图标旁边一个文字， 想要让他们几种对齐， 如果使用vertical-align: middle，其实效果不然，vertical-align还可以用数值、百分比来控制。 vertical-align: 10px 就可以让文字内容上升10px
【4】要使用vertical-align，前提条件就是 在内联元素 以及display值为table-cell的元素。 【块级元素不支持】
所以综述以下几种情况都支持vertical-align ：
（1）inline/ inline-block/ inline-table/ table-cell
（2）默认情况下的<span> <strong> <em>等内联元素， <img> <button> <input>等替换元素
（3） <td>单元格
【5】幽灵空白点 有这几种处理方式
（1） 把图片块级化 （2）把line-height设为0 （3） 把font-size设为0 （4）使用vertical-align 设为bottom/top/middle
放大以后，更加明显的间隙：
-----------------进一步探讨
这是vertical-align: baseline 也就是默认情况下文字的基准线，注意中文的基准线和字母略有不同
而在inline-block中，分为两种情况，看图。
一种是内部有内联元素（文字），那么盒子的基准线会变成文字的基准线，所以呈现出来的状态就是，第一个盒子的底部和“我的”对齐了
另一种是盒子内部没有内容，那就以margin底边缘为准，就是盒子的底部
返回列表
评论