CSS清除浮动&内容居中&文字溢出

学习！

1、CSS清除浮动的方法

　　（1）添加标签清除浮动：

　　　　　　在浮动元素结尾处，并列的添加标签<div style="clear:both;"></div>。（增加无意义标签不建议使用）

<ul>
    <li style="float: left;"></li>
    <li style="float: left;"></li>
    <li style="float: left;"></li>
    <div style="clear:both;"></div>
</ul>

　　（2）伪类元素清除浮动（常用）

HTML:

<ul class="clearfix">
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
</ul>

CSS:
.clearfix:after {
    content: '';
    width: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
ul li {
　　float: left;
}       

　　（3）浮动的父元素添加overflow: hidden;zoom: 1;来清除浮动  

2、div居中

　　（1）定义宽度效果明显

div {
   width: 520px;
   margin: 0 auto;
}

　　（2）常用,position也可换成absolute

div {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

　　（3）

div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
}

3、文字溢出，显示省略号

　　（1）单行文字溢出

p {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

　　（2）多行文字溢出时，该方法适用于 -webkit内核so多用于手机端,PC有点凉凉

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

　　（3）多行文字溢出用伪类模拟

HTML:
<p>轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始轮播图开始</p>

CSS:
p {
　　position: relative;
　　width: 400px;
　　height: 40px;
　　font-size: 16px;
　　line-height: 20px;
　　overflow: hidden;
} 
p:after{
　　position: absolute;
　　bottom: 0;
　　right: 0;
　　content: '...';
　　font-size: 16px;
　　display: block;
　　width: 2em;
　　height: 20px;
　　background: #fff;
}

 

　

　　

 

转载于:https://www.cnblogs.com/Angxf/p/10144989.html