用CSS便可实现的效果，以及解决几个小问题

2019-05-12 本文已影响3人程序员Winn

前言：CSS可以说是网页样式的灵魂，特别是CSS3发布后，更是让网页在无需借助JS的情况下，便可直接使用CSS实现以往无法实现的效果。本文根据日常的开发经验，总结出几个使用CSS就可实现的效果，以及几个小问题跟解决问题的方法

CSS便可实现的效果

1.子元素超出父元素隐藏，且可左右滑动查看隐藏内容（使用在移动端）

效果图：

image

HTML代码：

<ul>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>    
 <li></li>
</ul>

CSS代码：

ul{    
 list-style: none;    
 padding: 0;    
 border: 2px solid #999;    
 width: 100%;    
 white-space: nowrap;/*该属性使子元素li不换行，一行排列。即使超出父元素也不换行*/    
 overflow: auto;/*超出父元素的那部分子元素隐藏，且可通过滑动查看被隐藏部分*/
}
ul li{    
 background-color: blue;    
 display: inline-block;/*这里的子元素li，需要转化为内联块元素*/    
 border-radius: 30%;    
 margin: 2%;    
 width: 100px;    
 height: 100px;
}

2.CSS实现文本超出显示省略号效果（可指定显示几行）

效果图：

显示一行

image

显示两行

image

HTML代码：

<div class="text">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</div>

CSS代码：

.text {      
 width:300px;      
 border: 1px solid #ccc;      
 overflow:hidden;      
 display:-webkit-box;      
 -webkit-line-clamp:1;/*要显示的行数*/      
 -webkit-box-orient:vertical;
}

CSS的几个小问题以及解决方法

1.div下的子元素img标签与该父元素高度不一，留有小缝隙

效果图：

问题：子元素与父元素高度留有小缝隙