乐趣区

关于前端:用CSS便可实现的效果以及解决几个小问题

jiezi

前言：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】，加我好友一起探讨
微信交换群：加好友（备注思否）邀你入群，抱团学习共提高

退出移动版