前端基础点

一、link与@import的区别

1. link是html自带标签，页面加载时就会自己加载，没有兼容性问题;
2. @import是css样式提供的，页面加载结束时才是加载，有兼容性问题，兼容ie5以上;
3. link样式的权重高于@import;  

二、清除浮动的4种方法

1. 利用overflow清除浮动  
.clear{
    overflow: hidden;
}  
2. 增加额外标签法(在浮动的盒子下面再放一个标签，标签中使用clear: both;来清除浮动)
.clear{
    clear: both;
}  
3. 利用伪元素清除浮动  
.clear:after{
    content: ''; // 必须有的内容
    height: 0;  // 高度为0
    line-height: 0; // 行高为0
    display: block; // 将行内元素转为块级元素
    visibility: hidden; // 把元素设为隐藏 visibility
    clear: both;
}
.clear{
    zoom: 1;    // 兼容ie
}  
4. 利用双伪元素清除浮动(第三种的推演而来，不够严谨，不建议使用)  
.clear:before,.clear:after{
    content: '';
    display: block;
    clear: both;
}
.clear{
    zoom: 1;
}    

三、css实现单行、多行文字超出文本省略号

1. 单行
.single-ell{
    width: 100px;   // 设置文本盒子宽度
    overflow: hidden;   // 超出隐藏
    white-space: nowrap;    // 文字超出不换行
    text-overflow: ellipsis;    // 文字超出文本展示省略号 
}
2. 多行（适用于WebKit浏览器及移动端）
.mul-ell{
    width: 100px;   
    overflow: hidden;   // 超出隐藏
    display: -webkit-box;   // 将对象作为弹性伸缩盒子模型显示
    -webkit-line-clamp: 2;  // 限制文本显示行数
    -webkit-box-orient: vertical;   // 设置弹性布局子元素的布局为垂直
}  

四、