用CSS便可实现的效果，以及解决几个小问题
时间：2023-04-05 18:29:22
HTML5
CSS可以实现的效果，解决几个小问题CSS实现了以前做不到的效果。本文根据日常的开发经验，总结了几种使用CSS可以达到的效果，以及几个小问题和解决方法。CSS可以实现的效果1.子元素隐藏在父元素之外，左右滑动可以查看和隐藏内容（移动端使用）效果图：HTML代码：
CSS代码：ul{list-style:none;填充：0；边框：2px实心#999；宽度：100%；white-space:nowrap;/*该属性使得子元素li不换行，而是排成一行。即使超出了父元素，也不会换行*/overflow:auto;/*子元素超出父元素的部分被隐藏，可以滑动查看隐藏的部分*/}ulli{background-颜色：蓝色；display:inline-block;/*这里的子元素li需要转化为内联块元素*/border-radius:30%;保证金：2%；宽度：100px；height:100px;}2.css实现文本超出时显示省略号的效果指定显示多少行）效果图：显示一行显示两行html代码：
css可以精确以像素级别控制网页中元素位置的排版，支持几乎所有的字体大小和样式，具有控制网页编辑对象和模型样式的能力。 CSS代码：.text{width:300px;边框：1px实心#ccc；溢出：隐藏；显示：-webkit-box；-webkit-line-clamp:1;/*要显示的行数*/-webkit-box-orient:vertical;}CSS小问题及解决办法1.div下的子元素img标签的高度和那个不一样父元素的高度，留一个小间隙效果图：问题：子元素和父元素的高度有一个小间隙，让两个高度一致。解决方法：显示img标签display:block2。如何让父元素中的子元素span和img在同一水平线上效果图：问题：span和img没有在同一水平线上对齐解决方法：使用vertical-align:topinspan最后，我觉得这篇文章是不错，给个赞，关注！技术交流，可以关注微信公众号【GitWeb】，加我好友讨论微信交流群：加好友（备注觉得不行）邀请你进群，一起学习，一起进步
