艾瑞-Arin

1、png、jpg、gif 这些图片格式的区别png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。

说出标准的CSS的盒子模型是什么？与低版本IE的盒子模型有什么不同的？盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin宽高指的是 content 的宽高低版本IE盒子模型：内容（content+padding+border）+ 边界margin，宽高指的是 content+padding+border 部分的宽高CSS 如何设置这两种模型？box-sizing :

在界面初始化添加以下js在index.html中加入此段js<script> function handleResize() { var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth let htmlDom=document.getElementsByTagName('html')[0] htmlDom.style.fontS

随着自适应布局的出现，我们在制作页面的时候，经常会碰到元素的宽度为100%的情况。了解盒模型的朋友不难想到，如果这个元素有margin，padding，border的时候，此时的元素整体宽度必会大于父级元素的宽，就会导致页面结构错乱等一系列布局问题。为了解决这种问题，我可以通过calc()来实现。calc()是什么calc()怎么用calc()实例

在项目制作过程中发现position:fixed突然无效，后发现是因为父级div使用了css3中的transform:translateZ(0)属性，导致webkit内核的浏览器使用transform:translateZ(0)属性时，position:fixed无效。

什么是盒模型首先我们说一下盒子的问题：比如一个盒子中装一本书，那么盒子对应div，书就是div中的content，书与盒子之间的距离是padding，盒子的厚度是border，两个盒子之间的距离就是margin，这样理解起来就容易多了。从上图中我们可以看出，是一个宽高为170*50的div，padding是10px，border是5px，margin是15px。