正文 

当前位置： 首页 > 知识 > java教程

css小技巧(代码片段)

~往无前 ~往无前     2022-12-07     340

关键词：

一、多行文字的垂直居中

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小技巧(代码片段)

一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul&g 查看详情

css小技巧(代码片段)

一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul>&l 查看详情

css高频实用小技巧(代码片段)

利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round 查看详情

css高频实用小技巧(代码片段)

利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round - 查看详情

css的几个小技巧(代码片段)

本文收录css设置样式的一些小技巧1.设置文字在块级标签居中（包括水平居中和垂直居中）水平居中方法一：使用text-aligntext-align:center方法二：目标标签的父级标签设置position:relative，目标标签设置margin:auto.parentposition:relative.targe... 查看详情

css设置背景小技巧(代码片段)

代码：　　背景色background:green;　　背景图background-image:url(../../1111.png);　　图片大小background-size:20%50%;　　使图在任何大小的屏幕都不会显示重复(图像不平铺)background-repeat:no-repeat;<spanstyle="background:green;background-image:url(../../1111.... 查看详情

前端之css（宽高）设置小技巧(代码片段)

一、css宽高自适应： 1.宽度自适应： 元素宽度设为100%（块状元素的默认宽度为100%） 注：应用在通栏效果中 2.高度自适应： height:auto;或者不设置高度 3.最小，最大高度，最小，最大宽度： a)最小高度mi... 查看详情

必须掌握的css书写小技巧(代码片段)

一、元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是displayvisibility和overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类... 查看详情

你不知道的css---position小技巧(代码片段)

众所周时"position:sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、f... 查看详情

github小技巧-定义项目语言(代码片段)

GitHub是根据项目里文件数目最多的文件类型,识别项目类型。后端项目难免会包含前端的资源，有时候就会被标记成前端语言，因为项目里css等文件比较多,被误识别成css项目。GitHub不提供指定项目语言的功能，感觉挺傻的。不过... 查看详情

css黑魔法小技巧，让你少写不必要的js，代码更优雅(代码片段)

...家的欢迎，有人希望能博主还能整理个CSS的一些黑魔法小技巧，无奈我CSS一直很渣，没什么干货，最近写了一个Chrome插件GayHub，算是把GitHub的样式审查了个变，在写的过程中，也收获了很多关于CSS的小技巧，尤其是开始的第一个... 查看详情

css高阶小技巧(代码片段)

本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用CSS绘制如下图形：在之前，类似的图案，其实我们有尝试过，在单标签实现复杂的棋盘布局一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么... 查看详情

小技巧-css三角的做法(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>Document</title><style>/*宽和高设置为0（貌似可以省... 查看详情

第八天，scrapy的几个小技巧(代码片段)

 一.微博模拟登陆1.百度搜微博开放平台可满足爬取量不大的情况2.微博模拟登陆和下拉鼠标应对ajax加载fromseleniumimportwebdriverimporttimebrowser=webdriver.Chrome()browser.get(‘https://www.weibo.com‘)time.sleep(10)browser.find_element_by_css_se 查看详情

小技巧(代码片段)

## 小技巧 ### vscode 自动生成.vue 文件三组标签结构的用法 1. 选择 `文件 -> 首选项 -> 用户代码片段`，在弹出的搜索框中输入 vue，选择 vue 后，编辑会自动打开一个名为&... 查看详情

26个常用易忘css小技巧(代码片段)

收集于平时常用但易忘的CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrapdisplay:inline-block;overflow:hiddenvertical-align:bottom复制代码超出部分显示省略号//单行文本.wrapove... 查看详情

markdown实用小技巧(代码片段)

查看详情

关于写手机密码锁页面的css技巧(代码片段)

昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和大家一起分享，如果有不成熟的地方希望大家指出来，大家有更好的方法我也很乐意倾听哦~好啦，不说那么多啦，先附上一张页面截图... 查看详情