每日思考(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
上一篇:Pagination 分页 封装


下一篇:WebApi 内容协商 简单区分JSON 和 Xml