前言：CSS能够说是网页款式的灵魂，特地是CSS3公布后，更是让网页在无需借助JS的状况下，便可间接应用CSS实现以往无奈实现的成果。本文依据日常的开发教训，总结出几个应用CSS就可实现的成果，以及几个小问题跟解决问题的办法

CSS便可实现的成果

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

效果图：

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实现文本超出显示省略号成果（可指定显示几行）

效果图：

显示一行

显示两行

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标签与该父元素高度不一，留有小缝隙

效果图：

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

让两者高度一致，解决办法：将img标签display:block

2.父元素中的子元素span与img如何放弃同一水平线

效果图：

问题：span与img没有同一程度高度对齐

解决办法：在span中应用vertical-align: top

最初

感觉文章不错的，给我点个赞哇，关注一下呗！
技术交换可关注微信公众号【GitWeb】，加我好友一起探讨
微信交换群：加好友（备注思否）邀你入群，抱团学习共提高