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

在工作用常用的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中常用的选择器