文章目录
1、png、jpg、gif 这些图片格式的区别
- png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。大多数地方都可以用。
- jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
- gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
- webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
2、style 标签写在 body 后与 body前有什么区别?
页面加载自上而下 当然是先加载样式。
写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在 style 标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现 FOUC 现象(即样式失效导致的页面闪烁问题)
3、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
- 参数是 scroll 时候,必会出现滚动条。
- 参数是 auto 时候,子元素内容大于父元素时出现滚动条。
- 参数是 visible 时候,溢出的内容出现在父元素之外。
- 参数是 hidden 时候,溢出隐藏。
4、CSS Sprites是什么?它的优势和劣势?
CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。
然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
优势:
- 很好的减少网页的请求,大大提高页面的性能;
- 减少图片的字节;
- 解决了网页设计师在图片命名上的困扰;
- 更换风格方便,维护方便。
劣势:
- 图片合并时需预留好足够空间,宽屏、高分辨率的屏幕下易出现背景断裂;
- 开发较麻烦,测量繁琐;(可使用样式生成器)
- 维护麻烦,背景少许改动有可能影响整张图片,使得字节增加还要改动css。
5、CSS 伪类和伪元素的区别?
- 伪类: :focus、:hover、:active、:first-child :link :visitive :lang
伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;- 伪元素::before、:after
伪元素本质上是创建了一个有内容的虚拟容器;
6、rgba() 和 opacity 的透明效果有什么不同?
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
7、letter-spacing的妙用?
可以用于消除inline-block元素间的换行符空格间隙问题。
8、CSS引入的方式有哪些?使用Link和@import有什么区别?
内联,内嵌,外链,导入
- link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义RSS,定义 rel 连接属性等作用,无兼容性,支持使用javascript改变样式;而@import是CSS提供的,只能用于加载CSS,不支持使用 javascript 改变样式;
- 页面被加载的时,link 会被同时加载,而@import 引用的CSS会等到页面加载完再加载;
- import是CSS2.1 提出的,CSS2.1以下浏览器不支持,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。
9、行内元素和块级元素的区别是是什么。
行内元素:
- 行内元素不换行
- 行内元素不可以设置大小
- 行内元素大小由内容决定
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select(下拉列表)、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)
块元素:
- 块元素独立成行
- 块元素可以设置大小
- 块元素如果不设置宽度,宽度会自适应其父级的宽度
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等