CSS小细节 - 易踩坑点

CSS伪类 :first-child & :first-type-child 傻傻分不清

前者要满足标签匹配，还有父元素下位置上的第一位子元素
后者只要标签匹配，父容器下类型第一位就好，不用是位置上第一位

透过a标签看CSS选择器优先级（易忽略现象）

image.png image.png

选择器权重问题！！！！

img底部留空产生原因及解决办法

• 根本原因：行内元素底部基线对齐的问题
• 解决方法：
  1.第一种思路：将img元素变为块级元素，使其不再具备行内元素的特性
    1）display:block;
  2.第二种思路：针对底部基线下手，思考有哪些元素可以影响文本底部基线？
    1）font-size
       字体大小，如果字体足够小的话，基本不会影响到底部基线下移
    2）line-height
       行高，行高足够小的话，也几乎不会对底部基线下移造成影响
    3）vertical-align
       直接下手
       行内元素的底部基线，默认情况下是baseline，所以你可以直接修改它的属性值为底部对齐bottom，而不是基线对齐！

行内元素间距产生原因及解决办法

• 根本原因: 代码中空格实际代表一个字符
• 解决办法:
  1.改变元素类型
    行内元素 -> 块元素
  2.不改变元素类型
    1)水平方向 -> font-size 竖直方向 -> line-height
    2)将代码间的间距删除(不推荐)