首页 > 技术文章 > css小知识点

webliu 2015-04-16 22:18 原文

1.继承是CSS技术中的一项强大的功能。类似于DOM,CSS也把文档的内容视为一棵节点数。节点树上的各个元素将继承其父元素的样式属性。可继承的属性有:字体属性,列表属性,表格属性,文本属性(除text-decoration),cursor,visiblity。

2.行内元素、块级元素、空元素

  • 行内元素:a,span,img,input ,label,textarea,sub,sup,em。。。
  • 块级元素:div,p,h1。。,ul,ol,li,dl,dt,dd,fieldset,form,table。。。
  • 空元素:input,link,img

3.link与@import的区别

  • link是XHTML的标签,而@import是css提供的;
  • link在页面加载时加载,@import引用的css得等到页面加载完成后加载;
  • link无兼容性问题,而@import只在IE5.0以上的浏览器支持,存在兼容性问题;
  • link加载页面没有闪烁,而@import在开始加载页面的瞬间有闪烁,然后才恢复正常;
  • link加载样式的权重高于@import加载的权重;
  • link可以使用DOM去控制样式,而&import不支持这种方式;
  • @import必须置于<style>标签内。

4.FOUC(Flash of unstyled content):文档样式短暂失效

  出现条件:

  • windows上的IE5.0版本以上;
  • IE临时文件夹中没有缓存过该页面的CSS文件;

  出现原因:

  • 使用@import导入样式表;
  • 样式表放在了页面底部;
  • 几个样式表放在文档的不同位置

  原理:当样式表晚于html加载时,当页面加载到样式表时,就会停止当前的渲染,当样式表下载、解析完成后,则重新渲染页面,就会出现短暂的花屏现象。

  解决办法:用<link>标签加载样式,并放置在<head>标签中。 

推荐阅读