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

来源：互联网发布：苹果手机比价软件编辑：程序博客网时间：2024/06/03 13:53

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

0 0