前端小白--css样式知多少I

本文主要介绍前端样式书写的一些易错点

1.兼容性，适用于iphone5/6/7等型号。

2.css样式要尽可能发现共性，减少垃圾代码

3.使用浮动要用伪元素after或者before清除浮动.

.my-cf:after{
     content: '';
     display: block;
     clear: both;
     width: 0;
     height: 0;
 }

4.当行间距缩小，无法容纳元素而导致的父盒子坍塌，需要设置固定的宽度或者最大宽度。

5.文本超出隐藏的实现

//单行标题超出省略
.single_overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;  //根据需求调整宽度
    white-space: nowrap;/*强制不换行*/
}
//多行文本超出省略
.text_overflow{
    overflow: hidden;
    max-width: 54px;  
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2; /*改变第几行的位置*/
    -webkit-box-orient:vertical;
}

6.阴影box-shadow

    //语法
    {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}。
投影方式inset：投影方式是外阴影，设置inset就是将外阴影变成内阴影;
阴影模糊半径blur-radius：只能是为正值，值为0时，阴影不具有模糊效果，值越大边缘就越模糊；
阴影扩展半径spread-radius：值可以是正负值，值为正，则整个阴影都延展扩大，反之则缩小
兼容性:
-webkit-box-shadow: 0px 0px 10px #F1F1F1;
-moz-box-shadow: 0px 0px 10px #F1F1F1;
box-shadow: 0px 0px 10px #F1F1F1;
（tips:inset和spread-radius比较少用,所以此处的案例略去）

6.文本超出省略

//单行文本超出省略
.single_overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;  //根据需求调整宽度
    white-space: nowrap;/*强制不换行*/
}
//多行文本超出省略
.text_overflow{
    overflow: hidden;
    max-width: 54px;  
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2; /*改变第几行的位置*/
    -webkit-box-orient:vertical;
}