个人笔记-累计的前端笔记 CSS

个人笔记-累计的前端笔记 CSS

作者：谢景，撰写时间2019-2-6
下面是我自己积累的前端笔记
CSS：

img{    
        /*blur(2px) 图片模糊（模糊程度 px） grayscale 黑白*/   
        -webkit-filter: blur(2px) grayscale(1);/*webkit浏览器*/
        -moz-filter: blur(2px) grayscale(1);/*火狐*/
        -o-filter: blur(2px) grayscale(1);/*Opera*/
        -ms-filter: blur(2px) grayscale(1);/*IE10*/
        filter: blur(2px) grayscale(2);/*标准属性*/
        opacity: .7; /* fallback  透明度0~1 */        
    }
    
    body{ //文字不能选中
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

问题：在给定div宽高的时候，div里面文字过多也不会自动换行
div{//防止文本溢出
word-break：break-all；//方法一
word-wrap： break-word；//方法二
overflow-wrap：break-word；//方法三
white-space：pre-wrap | pre-line ；// 方法四
}

清除浮动的方法（#test为浮动元素的父元素）
方法一：
#test{display:block;zoom:1;overflow:hidden;}
方法二：
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}