在工作用常用的css技巧总结篇

最新推荐文章于 2022-08-03 10:11:29 发布

原创最新推荐文章于 2022-08-03 10:11:29 发布 · 377 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

css 专栏收录该内容

3 篇文章

订阅专栏

本文总结了多种CSS布局技巧，包括水平垂直居中、左右自适应布局等，并提供了单行及多行文本居中、背景透明处理等实用CSS技巧。

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

在工作用常用的css技巧总结篇

css之布局技巧

1.如何实现水平居中,宽度已知

        .className{
            width:400px;
            margin-left:auto;
            margin-right:auto;
        }

2.宽度已知，高度已知，如何水平垂直居中

        .parent{
           position:relative;
         }
         .child{
             position:absolute;
             height:400px;
             width:400px;
             top:50%;
             left:50%;
             margin-left:-50%;
             margin-right:-50%;
         }
         
         flex实现：
         .parent{
            display:flex;
        }
        .child{
            height:400px;
            width:400px;
            justify-content:center;
            align-items:center;
        }

3.宽度，高度都未知，如何水平，垂直居中【这个在弹出框定位时候会用到】

        .parent{
            position:relative;
        }
        .child{
            position:absolute;
             top:50%;
             left:50%;
             tansform:translate(-50%,-50%);
        }
        
        flex实现：
        .parent{
            display:flex;
        }
        .child{
            justify-content:center;
            align-items:center;
        }

4.左列定宽，右列自适应

        .left{
            float:left;
            width:200px;
        }
        .right{
            margin-left:200px;
        }
        
        flex实现：
        .parent{
            display:flex;
        }
        .left{
            width:200px;
        }
        .right{
            flex:1;
        }

5.左列不定宽，右侧自适应

        .left{
            float:left;
        }
        .right{
            overflow:hidden;
        }
        
        flex实现：
        .parent{
            display:flex;
        }
        .right{
            flex:1;
        }

6.两侧定宽，中间自适应

    .left{
        width:200px;
        float:left;
    }
    .right{
        width:200px;
        float:right;
    }
    .middle{
        float:left;
        width:100%;
        margin-right:-400px;
    }
    
    通过table实现
    .parent{
        display:table;
        width:100%;
        table-layout:fixed
    }
    .left,.right,.middle{
        diaplay:tabel-cell;
    }
    .left,.right{
        width:200px;
    }
    
    通过flex实现
    .parent{
        display:flex;
    }
    .left,.right{
        width:200px;
    }
    .middle{
        flex:1;
    }

7.两侧不定宽，中间自适应

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>   /**注意div的顺序，middle要放在right后**/
</div>
  .left{
      float:left;
  }
  .right{
      float:right;
  }
  .middle{
      overflow:hidden;
  }
  
  flex实现
  <div class="parent">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
  .parent{
      display:flex;
  }
  .middle{
      flex:1;
  }

8.全屏布局

    <div class="parent"> 
        <div class="top">top</div> 
        <div class="left">left</div> 
        <div class="right">right</div> 
        <div class="bottom">bottom</div> 
    </div>
    
    html,body,parent{
        height:100%;
        overflow:hidden;
    } 
    .top{
        position:absolute:
        top:0;
        left:0;
        right:0;
        height:100px;
     } 
     .left{
         position:absolute;
         top:100px;
         left:0;
         bottom:50px;
         width:200px;
     } 
     .right{
         position:absolute;
         overflow:auto;
         left:200px;
         right:0;
         top:100px;
         bottom:50px;
     } 
     .bottom{
         position:absolute;
         left:0;
         right:0;
         bottom:0;
         height:50px;
     }
     
     flex实现
    <div class="parent"> 
        <div class="top">top</div>
        <div class="middle">
            <div class="left">left</div> 
            <div class="right">right</div> 
        </div> 
        <div class="bottom">bottom</div> 
    </div>
     .parent{
         display:flex;
         flex-direction:column;
     }
     .top{
         height:100px;
     }
     .bottom{
         height:100px;
     }
     .middle{
         flex:1;
         display:flex;
     }
     .left{
         width:100px;
     }
     .right{
         flex:1;
     }

2.css之其它技巧

1.单行文本如何水平垂直居中

    {
        text-align:center;
        height:40px;
        line-height:40px;
    }

2.多行文本如何垂直居中【已知高度，但是内容未知】

   .parent{
       display:table;
       height:400px;
   }
   
   .child{
       display:table-cell;
       text-align:center;
       vetical-align:middle;
   }

3.如何实现背景透明但是文字不透明

    /**在div框中，包含两个绝对定位的背景框和文字框，背景框设置透明效果即可**/
    .parent{
        position:relative;
        width:100px;
        height:100px;
    }
    .bg{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0.5;
    }
     .text{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        text-align:center;
        line-height:100px;
    }
    
    /**使用rgba**/
    .bg{
        :background:rgba(0,0,0,0.5);
    }

4.框子四边阴影

    /**模糊的阴影是不占空间的**/
    {
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    }
    
    /**文字模糊道理一样**/
    {
        color: transparent;   
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

5.表格定宽

/**table-layout:fixed;使用该属性，表格通过列数和每列设定的宽度计算，跟列中的内容无关，超出的可以设置换行或者隐藏**/
{
    diaplay:table;
    table-layout:fixed;
}

6.如何通过css画三角形，这是一个经典的问题

7.css3中常用的选择器