每日思考（2020/07/14）

题目概览

• 对HTML5的img标签属性srcset和sizes的理解
• display:inline-block在什么时候会显示间隙
• var x, y = 1; x + y = ?

题目解答

对HTML5的img标签属性srcset和sizes的理解

• srcset：规定了图片的src候选集;
• sizes：规定了图片在不同条件下的尺寸取值，根据尺寸取值从srcset中找到对应的图片src；配合srcset属性才能使用；
• 如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用
• 应用场景：多用于响应式图片或不同像素密度设备的图片适配；
• 参考文档：响应式图片srcset全新释义sizes属性w描述符

display:inline-block在什么时候会显示间隙

• 在CSS布局中，如果想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”
• 解决办法：
  • 移除两个元素之间的空格
  • 使用margin负值
  • 全局使用font-size：0

var x, y = 1; x + y = ?

x // => undefined
y // => 1
x + y // => undefined + 1 => NaN