前端进阶试题css_html/css_WEB-ITnose

一. css 40分

1. 什么是盒模型？    2. Doctype的几种类型？   3. 如何布局左不动右边自适应的两列布局？

 4. 如何布局两列等高？    5. 如何布局右侧定宽，左侧或中间自适应？

  6. 如何布局三列自适应？  7. gif,png,jpg的区别？   8. 什么是css sprite?优缺点？ 10. 制作细线表格？   11. position:relative,absolute,fixed区别与联系？   12. 如何居中一个float:left的元素

 13. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；

 

一、边界、边框、填充、内容四个属性

 

 

二 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

 

DOCTYPE html

 

三可以参照百度网盘

左边栏，float:left width:300px;

右边栏，margin-left：300px；

 

四，五，六均为布局。。。

 

7，gif,png,jpg

   1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
   2. 可插入多帧，从而实现动画效果。
   3. 可设置透明色以产生对象浮现于背景之上的效果。

 

png

* 支持256色调色板技术以产生小体积文件
    * 最高支持48位真彩色图像以及16位灰度图像。
    * 支持Alpha通道的半透明特性。
    * 支持图像亮度的gamma校正信息。
    * 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
    * 使用无损压缩。
    * 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
    * 使用CRC循环冗余编码防止文件出错。
    * 最新的PNG标准允许在一个文件内存储多幅图像。

 

jpg

JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。在这种情况下，它 通常比完全无失真方法作得更好，仍然可以产生非常好看的影像（事实上它会比其他一般的方法像是GIF产生更高品质的影像，因为GIF对于线条绘画 （drawing）和图示的图形是无失真，但针对全彩影像则需要极困难的量化）。

 

 

简单点gif体积小，能不用滤镜兼容ie6，就是颜色差点

png，体积大，色彩好，需要滤镜兼容IE6

jpg，色彩自己选，要好的色彩体积就变大，不透明

 

上面写了那么大一串是给美工，设计看的！前端只要这么点就OK了

 

 

8 什么是css sprite?优缺点？

就是css小精灵

 

CSS Sprites优缺点

 

优点

 

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

 

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

 

3.解决了 网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

 

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

 

缺点

 

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：

 

1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在 宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

 

2.CSS Sprites在开发的时候比较麻烦，你要通过 photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好 腾讯的鬼哥用 ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

 

3.CSS Sprites在维护的时候比较麻烦，如果 页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

 

4.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

 

 

 

十border-collapse:collapse

 

 

十一position:relative,absolute,fixed区别与联系？

相对，绝对，浮动。。。基本都用过不介绍了

 

 十一如何居中一个float:left的元素

 

margin-left:50%;  position:relative; left:width除2 。。。这个方法是我想的笨办法，如果有更好的可以提出 Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；hack。。。页面的规范！。。。好吧这玩意已经变成一种习惯了。。。基本一次成型怎木办IE6滤镜css3的部分属性兼容ie6，pie.js