前端周记三

1. 请解释一下Css的Flexbox（弹性盒布局模型）以及适用场景?
   概念：Flex是Fiexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称Flex容器(f lex container), 简称"容器"。它的所有子元素自动 成为容器成员，称为Flex项目(flex item ), 简称“项目”。
   适用场景:任何一个容器都可以指Flex布局。Flexbox用于不同尺寸的屏幕中创建可自动扩展和收缩布局。
2. display: inline-block 什么时候显示间隙？
   有空格时候会有间隙，可以删除空格解决;
   margin正则的时候，可以让margin使用负值解决
   使用font-size 时候，可通过设置font-size: 0 letter-spacing , word-spacing解决
3. png,jpg,jpeg,bmp,gif 这些图片格式解决一下 ，分别什么时候用。有没有了解过Webp?
   (1) png - 便携式网络图片(portable Network Graphics),是一种无损数据压缩位图格式。优点是:压缩比高，色彩好。大多数地方都可以用。
   (2) jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在WWW上，被用来储存和传输照片的格式。
   (3), gif 是一种位图文件格式，以8位色重现直色彩图像，可以实现动画效果。
   (4),bmp的优点:高质量图片，缺点:体积太大;适用场景:windows桌面壁纸;
   (5),webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3,大小比png小45%。 缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
4. 在CSS 样式中常用使用的px ,em在表现上有什么区别？
   px相对于显示器屏幕分辨率，无法用浏览器字体放大功能。
   em值不是固定的,会继承父级的字体大小:em=像素值/父级font-size.
   5. 一个高度自适应的div，里面有两个div, 一个高度100px,希望另一个填满剩下的高度问题是怎么解决？

方案一： .content { height: calc(100%-100px); }
方案二：.container { position:relative; } .content { position: absolute; top: 100px; bottom: 0; }
方案三：.container { display:flex; flex-direction:column; } .content { flex:1; }