css技巧

Posted 2020-10-30 wanf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css技巧相关的知识，希望对你有一定的参考价值。

1.如果ul下有很多li，需要在一行显示，并且设置margin。但是通常要取消第一个li的margin-left。使用：first-child有的浏览器不兼容。

解决：.li+.li{

　　　　margin-left: 5px;

　　　}

适用场景：单行左对齐，有间距

2.多行文字垂直居中

li{
　　display:table;
}
li>span{
　　display:table-cell;
　　vertical-align:middle;
}


3.设置图片宽度100%，高度等于宽度

img{
　　width:100%;
　　height:0;
　　padding-bottom:100%;
}

让图片垂直居中一直没有找到一个很好的办法，今天学习重温after伪类的时候突然看到一个解决方案，觉得很好。

html代码：
<body>
    <div class="pic_box">
        <img src="images/img-mobile-1.jpg"/>
    </div>
</body>

CSS代码：
<style>
        .pic_box{
            width:300px; 
            height:300px; 
            background-color:#beceeb; 
            font-size:0; 
            *font-size:200px; 
            text-align:center;
        }
        .pic_box img{vertical-align:middle;height:100px;}
        .pic_box:after{
            display:inline-block; 
            width:0; 
            height:100%; 
            content:"center"; 
            vertical-align:middle; 
            overflow:hidden;
        }
</style>

效果图：

技术分享图片

以上是关于css技巧的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

提效小技巧——记录那些不常用的代码片段