html编程技巧

字体外部描边 Css

-webkit-text-stroke: 1px #fff;

基于flex布局的盒子上下居中 Css

.flex{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-align{
    -ms-flex-align: center;
    align-items: center;
}

基于flex布局的盒子左右居中 Css

 .flex{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .justify-content{
        justify-content: center;
    }

基于flex布局的多行多个div水平垂直居中（1） Css

    .wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .wrap-align-items{
        display: inline-block;
        width: 100px; /*定义宽度*/
        height: 200px;/*定义高度*/
        margin: 10px auto; /*定义上下距离，左右跟随屏幕*/
    }

基于flex布局的多行多个div水平垂直居中（2） Css

    .content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;/*定义父级宽度*/
        height: 100%;/*定义父级高度*/
    }
    .chart {
        display: inline-block;
        width: 30%;/*定义宽度*/
        height: 40%;/*定义高度*/
        margin: 0 auto;/*定义上下左右距离，跟随屏幕*/
    }

浮动布局之三栏布局 Css

    .layout.float .left{
        float:left;
        width:300px;/*定义宽度*/
    }
    .layout.float .center{
        background: yellow;
    }
    .layout.float .right{
        float:right;
        width:300px;/*定义宽度*/
    }

绝对定位之三栏布局 Css

    .layout{
        position: relative;
    }
    .layout-left{
        left:0;
        width: 300px;/*定义宽度*/
    }
    .layout-center{
        left: 300px;/*左边间距*/
        right: 300px;/*右边间距*/
    }
    .layout-right{
        right:0;
        width: 300px;/*定义宽度*/
    }

flex之三栏布局 Css

    .flex-layout{
         display: flex;
    }
    .flex-layout-left{
        width: 300px;/*定义宽度*/
    }
    .flex-layout-center{
        flex:1;
    }
    .flex-layout-right{
        width: 300px;/*定义宽度*/
    }

表格布局之三栏布局 Css

    .table-layout{
        display: table;
    }
    .table-layout-left{
        width: 300px;/*定义宽度*/
        display: table-cell;
    }
    .table-layout-center{
        display: table-cell;
    }
    .table-layout-right{
        width:300px;/*定义宽度*/
        display: table-cell;
    }

网格布局之三栏布局 Css

    .grid-layout{
        width:100%;
        display: grid;
        height: auto;
        grid-template-columns: 300px auto 300px;/*左边宽度 中间适应 右边宽度*/
    }

clear清除浮动 Css

    .clear{/*在浮动盒子的后面添加一个盒子，并为其赋予clear属性*/
        clear:both;
    }

overflow清除浮动 Css

    .overflow{/*通常放在父级，作为父级属性*/
        overflow:hidden;
    }

使用伪元素after清除浮动

    .clearfix:after {
        content:""; /*生成内容为空*/
        display: block; /*生成的元素以块级元素显示*/
        clear:both; /*清除前面元素浮动带来的影响 */
    }
    /*相对于空标签闭合浮动的方法*/
    /*优势：不破坏文档结构，没有副作用 */
    /*弊端：代码量多*/

字体颜色之渐变 Css

    .color-left-right{
        background: linear-gradient(to right, red, blue);/*渐变方向，颜色1，颜色2 */
        -webkit-background-clip: text;
        color: transparent;
    }

mask字体颜色之渐变 Css

    <h1 class="color-mask" data-content="字体颜色之渐变">字体颜色之渐变</h1>

    .color-mask{
         color:red;/*字体颜色*/
         position: relative;
    }
    .color-mask[data-content]::after{
        content:attr(data-content);
        display: block;
        position:absolute;
        color:yellow;
        left:0;
        top:0;
        z-index:2;
        -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(transparent));
        /*-webkit-mask-image:-webkit-gradient(linear，左(右) 上(下)，右(左) 下(上) from（颜色2），to（transparent）) */
    }

svg字体颜色之渐变 Css

<svg viewBoxs="0 0 500 300" class="color-svg">
    <defs>
        <linearGradient id="svg-id" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/><!--颜色1-->
            <stop  offset="1" style="stop-color:red"/><!--颜色2-->
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="svg-text" x="110px" y="30%">字体颜色之渐变</text>
</svg>

    .svg-text{
        fill:url(#svg-id);
        font-size:40px;
        font-weight:bolder;
    }

炫酷鎏金字体，颜色渐变 Css

    .span{
        overflow: hidden;
        font-size: 100px;
        font-style: oblique;
        text-align: left;
        background-image: -webkit-linear-gradient(left,green,yellow,pink, blue, red 25%,green 35%,
        blue 50%,yellow 60%, red 75%, pink 85%,blue 100%);/*括号内可添加多种颜色，多种百分比   线性渐变*/
        -webkit-text-fill-color: transparent;/*颜色填充 透明*/
        -webkit-background-clip: text;/*背景颜色绘制区域*/
        animation: stream 15s infinite linear;/*流动 15秒 循环 直线*/
        background-size: 200% 100%;
    }
    @keyframes stream {/*流动*/
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }

flex布局 Css

    .justify-content-left{
        justify-content: flex-start;/*左对齐*/
    }
    .justify-content-right{
        justify-content: flex-end;/*右对齐*/
    }
    .justify-content-center{
        justify-content: center;/*左右居中对齐*/
    }
    .justify-content-between{
        justify-content: space-between;/*水平方向平均分布*/
    }
    .justify-content-around{
        justify-content: space-around;/*中心点向两边方向均匀分布*/
    }
    .align-items-stara{
        align-items: flex-start;/*顶部对齐*/
    }
    .align-items-end{
        align-items: flex-end;/*底部对齐*/
    }
    .align-items-center{
        align-items: center;/*上下居中*/
    }
    .flex-direction-reverse{
        flex-direction:row-reverse;/*水平方向 靠右侧从右到左排列*/
    }
    .flex-direction-row{
        flex-direction: row;/*水平方向 靠左侧从右到左排列*/
    }
    .flex-direction-column{
        flex-direction: column;/*垂直方向 从顶部到底部*/
    }
    .flex-direction-column-reverse{
       flex-direction: column-reverse;/*垂直方向 相反顺序*/
    }