CSS小技巧

Posted ~往无前

tags:

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

一、多行文字的垂直居中

1.单行实现垂直居中

<style>
  .item{
    width: 90px;
    height: 50px;
    border: 1px solid orange;
    margin-bottom: 5px;
    text-align: center;
    line-height: 50px;
  }
  .item .text{
    font-size: 12px;
  }
</style>
<body>
  <ul>
    <li class="item">
      <span class="text">我是行内元素我是行内元素</span>
    </li>
  </ul>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PaMOhGzv-1626042663594)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710161517117.png)]

2.多行实现垂直居中

从上面看到在盒子内的元素确实实现了垂直居中，但是超出的部分不再盒子内部，下面介绍使用：display

:table来实现多行文本的垂直居中。

.item{
    display: table;   //在父元素中添加样式display:table
    width: 90px;	
    height: 50px;
    border: 1px solid orange;
    margin-bottom: 5px;
    text-align: center;
  }
  .item .text{
    display: table-cell; //在子元素中使用样式:table-cell，vertical-align:middle
    vertical-align: middle; 
    font-size: 12px;
  }
</style>
<body>
  <ul>
    <li class="item">
      <span class="text">我是行内元素我是行内元素</span>
    </li>
  </ul>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HTkWP10w-1626042663601)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710161805206.png)]

二、Sticky footer

Sticky footer实现的效果是：当文字内容不足时，footer元素在屏幕的下方。如果文字内容过多，下方的footer元素会自动的往下移动，处在文字的下面。

<style>
   .content{
       width: 100%;
       height: 100%;
       position: fixed;
       top: 0;
       left: 0;
       background: rgba(0, 0,0, 0.8);
       overflow: auto;
   }
   .content-wrapper{
       width: 100%;
       min-height: 100%;
   }
   .content-wrapper .content-main{
       padding-bottom: 64px;
   }
   .footer{
        width: 32px;
        height: 32px;
        background-color: orange;
        margin: -64px auto 0;

   }
  
</style>
<body>
    <button style="background: white;">我是按钮</button>
    <div class="content">
        <div class="content-wrapper">
            <div class="content-main">
                发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网
                发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网发电机房屋的经费公开网
            
            </div>
        </div>
        <div class="footer">
        </div>
    </div>
</body>

效果就是当文字没有占满屏幕时，footer元素在屏幕的下方位置不改变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fcAk4YW2-1626042663604)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710171638797.png)]

2.当文字内容超多时，会使得footer元素向下移动，footer元素存在于content-main的padding-bottom区域。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eiosqesO-1626042663608)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710172149931.png)]

三、flex布局最后一行元素左对齐

<style>
    .photos{
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .photos .item{
        width: 120px;
        height: 120px;

    }
    .photos img{
        width: 100%;
        height: 100%;

    }
</style>
<body>
  <div class="photos">
    <div class="item">
        <img src="./photos/CPNS.jpg" alt="">
    </div>
    <div class="item">
        <img src="./photos/CPNS.jpg" alt="">
    </div><div class="item">
        <img src="./photos/CPNS.jpg" alt="">
    </div><div class="item">
        <img src="./photos/CPNS.jpg" alt="">
    </div><div class="item">
        <img src="./photos/CPNS.jpg" alt="">

  </div>
</body>

1.使用flex布局后，不进行左对齐时实现的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AF1wseH5-1626042663611)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710175633381.png)]

这里会发现，当图片的数量不是3的倍数时，会导致最后一行的图片不按序排列的情况。

2.为了使最后一行实现按序排列，使用伪元素实现最后一行元素的左对齐：

.photos::after{
        content:"";
        width: 120px;
        height: 120px;
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BsWvnlOq-1626042663614)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710180551334.png)]

使用伪元素实现的原理就是，在photos的末尾添加一个同样大小的元素用来占位，只不过是隐形的。

3.使用伪元素之后带来的问题：

因为使用弹性布局时，盒子的大小是由内容撑开的。由于伪元素的存在，所以伪元素会自动占一行从而把整个盒子的大小给撑开了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uXSdyKGn-1626042663615)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710181152591.png)]

解决方法：不要给伪元素确定的高度，让他自己计算高度。当元素是六个的时候，伪元素的高度时0。当元素不是3的倍数的时候，伪元素的高度自动计算为确定的高度。

不给伪元素添加高度
.photos::after{
	content:"";
	width:120px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Le20prqE-1626042663616)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710181521639.png)]

四、使用padding实现图片自适应并保持宽高比

1.正常情况下，我们使用下面的方法来实现图片的自适应：这样图片的宽高比不会发生变化

<style>
    .img-wrapper{
        width: 100%;
    }
    .img-wrapper img{
        width: 100%;
        height: 100%;
    }

</style>
<body>
    <div class="img-wrapper">
        <img src="photos/cat.png" alt="">        
    </div>
    <h1>我是标题</h1>
    </div>
</body>

问题：但是会带来的问题就是当刷新页面的时候，因为要发起请求图片的加载会有延迟。所以会出现图片展示不出来，而下面的文字占据了图片的位置。

2.使用padding实现

如果使用给图片设置确定高度，虽然不会出现上面文字占据图片位置的问题。但是图片的宽高比会发生变化。

 .img-wrapper{
        position: relative;
        width: 100%;
        /* 这里的75%是相对于wrapper的宽度来说的 */
        padding-bottom: 75%; 
    }
    .img-wrapper img{
        /* 这里设置为absolute使得图片占据wrapper的paddnig */
        position: absolute; 
        width: 100%;
        height: 100%;
    }

</style>
<body>
    <div class="img-wrapper">
        <img src="photos/cat.png" alt="">        
    </div>
    <h1>我是标题</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WOuOGUrG-1626042663617)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710185655160.png)]

五、使用伪元素扩大点击区域

实现目标：当点击一个图标的时候，出现某种动作。在某些情况下，需要扩大图标的点击范围。

当然我们很容易想到，只需要增大图标的font-size实现就可以了。

如何不增大字体大小扩大点击的范围呢？

使用伪元素来实现：

<style>
  .header{
    width: 50%;
    height: 60px;
    background-color: orange;
  }
  .header .close{
    position: relative;
    float: right;
    font-size: 30px;
    color: #fff;
    margin-right: 10px;
    cursor: pointer;
  }
 .header .close::after{
    content:"";
    position:absolute;
    /* 元素的上下左右扩大10px大小 */
    top: -10px;   
    right: -10px;
    bottom: -10px;
    left: -10px;
}
</style>
<body>
   <div class="header">
      <span class="close" id="class">X</span>
   </div>
   <script>
      var point=document.getElementsByClassName("close")[0]
      point.οnclick=function(){
        alert("hello")
      }
   </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fhtE0Ntk-1626042663618)(C:\\Users\\86185\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210710215021553.png)]

X
```

[外链图片转存中…(img-fhtE0Ntk-1626042663618)]

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

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

zoho在线文档使用小技巧

css有用的代码片段

CSS文字处理实用小技巧总结

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

css的小技巧