CSS中遇到的重难点问题

link和@import导入外部样式表的区别

1、link是html标签，除了可以引入外部css外，还可以引入其他文件。而@import属于css范畴，只能加载css（老祖宗区别）
2、link引入css文件和页面同时加载，@import引入的css文件要在页面加载完成后载入（加载顺序不同）
3、link是html标签，无兼容性问题，@import是css2.1提出的，低版4、link支持js控制DOM改变样式，而@import不支持（是否支持js改变样式）
4、link支持js控制DOM改变样式，而@import不支持（是否支持js改变样式）

css层叠的含义
css层叠是指样式的优先级，当发生冲突时以优先级高的为准
a、内联>内部>外部（除非使用！important标记）
b、id>class>标签
c、权重相同取后定义的

单行文本省略号设置，四条件缺一不可（非常重要）
a、设置宽度            width:vlaue;
b、设置文本强制在一行显示        white-space:nowrap;
c、溢出文本隐藏不可见        overflow:hidden;
d、显示省略号            text-overflow:ellipsis;

float对块元素和内联元素的影响（重要）
a、块元素    给块元素设置浮动后，脱离默认文档流，在一行显示
b、内联元素    给内联元素设置float后，隐性的转换为了块元素，可以定义宽高及任意的padding margin

相对和绝对的区别（非常重要）
 a、参照物不同
        相对是偏离前自身位置，
        绝对是离他最近的具有定位属性父包含块
b、位置是否保留
        相对不会脱离文档流，原来位置保留；
        绝对会脱离文档流，原来位置不保留

图片整合技术
    1、概念（非常重要）
        将导航，按钮等多张图片整合到一张背景图中，通过background-position来实现背景图定位的技术叫做图片整合技术
    2、优势（非常重要）
        减少了对服务器的请求次数，减轻了服务器的压力，加快了页面的加载速度，减小了图片体积，达到了网站性能优化

最小高度
        语法：min-height:数值+单位;
    注：在IE6下，不能识别min-height属性，解决方案：
        a、min-height:100px; _height:100px;
        注：添加下划线的css属性只有IE6识别，其他不识别
        b、min-height:100px;
            height:auto!important;
            height:100px;
        注：添加 important关键词的css属性值除了IE6不识别，其他浏览器都识别

高度塌陷问题（常见的几种清除浮动的方法及其优缺点）（重点）
    描述：父元素高度自适应，子元素float，造成父元素高度为0，就叫高度塌陷问题
    解决方案：
        1、给父元素设置一个高度（重点）
            缺点：违背了高度自适应的原则（重点）
        2、给父元素设置overflow:hidden;（重点）{常用}
            缺点：显示在父元素框之外的部分会被隐藏（重点）
            原理：由于子元素设置了float后，脱离了文档流，不再占据空间，也就意味着不再参与父元素的高度计算，导致父元素高度为0；当我们给父元素设置overflow:hidden;就出发了BFC(块级格式上下文)的状态，闭合了子元素的浮动，子元素重新参与父元素的高度计算，从而解决了高度塌陷。
        3、在浮动的子元素的末尾添加一个空div，并设置如下样式（重点）：
            .clearfix{
                clear:both;
                overflow:hidden;
            }（重点）
        注：主要为了兼容IE6浏览器，解决不能识别较小 高度容器的问题
            缺点：页面中多次出现无意义的div，{会造成代码冗余}（重点）
        4、万能清除浮动法
            父元素：after{
                content:"";
                display:block;
                clear:both;
                height:0;
                overflow:hidden;
                visibility:hidden;
                }（重点）
            扩展：元素隐藏不可见的两种方式
                a、display:none; 元素隐藏，位置消失
                b、visibility:hidden; 元素隐藏，位置保留
多行文本省略号
display: -webkit-box;     将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;     设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3;     用来限制在一个块元素显示的文本的行数
overflow: hidden;