记录一下平时遇到的css问题

原创已于 2024-04-24 14:51:27 修改 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css问题汇总

于 2018-12-21 10:01:56 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了CSS中常见的布局问题，包括img与div的间隔、多行文本溢出省略、页面滚动条引起的跳动及font-size:0px的作用。提供了实用的代码示例，如vertical-align属性调整图片对齐、利用CSS属性解决多行文本溢出显示省略号、通过calc和vw或:root解决页面跳动问题，以及如何消除inline-block元素间的莫名间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下平时遇到的css问题

img与div下边有间隔

图片文字等inline元素默认与父级元素的baseline对齐，而baseline又和父级底边有必定间隔（这个间隔和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。
1.img标签添加vertical-align:bottom，vertical-align:middle，vertical-align:top;

 img{vertica## 标题l-align:bottom;}

2.定义容器里的字体大小为0:

 div {font-size:0}；

css多行文本溢出省略

eg:第二行超出部分文字省略样式如下

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

浏览器出现滚动条页面跳动问题

当页面内容过长浏览器会出现滚动条导致页面发生跳动，影响用户体验，现代浏览器下可以使用css解决这个问题代替js计算。
1.利用calc和vw

.wrap-outer { margin-left: calc(100vw - 100%); }
@media screen and (min-width: 1150px) {
  .wrap-outer {margin-left: calc(100vw - 100%); }
}

2.利用:root

html {overflow-y: scroll; }
:root {overflow-y: auto;overflow-x: hidden; }
:root body { position: absolute; }
body {width: 100vw;overflow: hidden; }

font-size:0px作用

父元素设置font-size:0，可避免子元素display:inline-block时之间莫名其妙的间距。

.box{
            width: 200px;
            height: 30px;
            line-height: 30px;
            font-size: 0;
 }
.box>div{
            display: inline-block;
            width: 60px;
            border: 1px solid #000000;
            font-size: 16px;
            /*float: left;不建议使用*/
}