Css方法大总结

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

今天跟着大家一起来学习CSS实现盒子垂直居中的方法、 清除浮动的方法、实现一个三角形、文字溢出隐藏、响应式布局，CSS是前端的基础哦~

常见的盒子垂直居中的方法

利用子绝父相定位的方式来实现

 #container{
    width:500px;
    height:500px;
    position:relative;
}
#center{
    width:100px;
    hight:100px;
     position: absolute;
     top: 50%;
     left: 50%;
    margin-top:-50px;
    margin-left:-50px;
    
}

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中

#container{
    position:relative;
}
#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex

    display:flex;
    justify-content:center;
    align-items: center;
}

#center{

}

清除浮动的方法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝

4.使用before和after双伪元素清除浮动

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

实现一个三角形

span{
      display: block;
      width: 0;
      height: 0;
      border:10px solid transparent;
      border-bottom-color: red;
    }

文字溢出隐藏

overflow: hidden;
text-overflow:ellipsis; 
white-space: nowrap;

响应式布局

0. 媒体查询：可以手动设置不同情况下跟字号的大小
1. 百分比：相对于父元素的百分比
2. vw/vh：相对单位，将视口平均分成100等分，100vw就是视口宽百分百
3. rem：根据html跟字号，相对单位

以上就是我今天给大家分享的CSS一些样式写法，学好css也能事半功倍哦~