web开发成品，8个优秀的CSS实践

html、css基础

1，link和@import的区别？

• 从属关系区别：
  link属于html标签，而@import是css提供的。

• 加载顺序区别：
  页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。

• 兼容性区别：
  import只在IE5以上才能识别，而link是html标签，无兼容问题。

• dom可操作性区别：
  可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式；

• 权重区别：
  如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高@import的权重这样的直观效果。
  （aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

2，calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

3，如何理解标签语义，它有哪些好处？
1）语义元素清楚地向浏览器和开发者描述其意义。
2）好处：
（1）html结构清晰，代码可读性较好。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

// 常用的语义化标签
h1-h6 
p
ul
ol
dl
thead
tbody 

// html5中新增的语义化标签
header   section或page的页眉 
nav   导航栏 
footer   section或page的页脚 
progress   进度条 
video   视频

4，css的选择符有