自己编写简单的框架，并用来制作一个UI页面-2019年9月11日

编写一个简单的框架，应用到一个实际的页面中

本次课程中学习了前端的封装方式，也从phpcn UI中学习了重置和预制属性的基本内容；

封装的原理很简单，可是想自己搞出一个合理有效的封装框架，实在太不容易了，形成不了系统。

所以本次作业中，我尝试的方法是实现代码的复用，首先实现的是水平垂直居中、绝对定位和flexbox的基本设置。

在仿写用户手册中仅用到绝对定位和单行内联元素垂直居中：

代码部分

实例
// 绝对定位:使该元素相对于父容器（relative）或者body实现绝对定位
@mixin ele-fixed-lt($left: 0, $top: 0, $ele-width: auto, $ele-height: auto) {
    position: absolute;
    width: $ele-width;
    height: $ele-height;
    left: $left;
    top: $top;
    // z-index: 999;
}

@mixin ele-fixed-rb($right: 0, $bottom: 0, $ele-width: auto, $ele-height: auto) {
    position: absolute;
    width: $ele-width;
    height: $ele-height;
    right: $right;
    bottom: $bottom$bottom;
}

@mixin ele-flexbox($box-width: auto, $box-height: auto, $direction: row, $wrap: nowrap) {
    display: flex;
    width: $box-width;
    height: $box-height;
    flex-direction: $direction;
    flex-wrap: $wrap;
}

// 绝对居中:使一个元素相对于父容器或者body实现水平垂直居中
// xy-center-box：不用此类名，则元素针对body绝对居中；
// xy-center-box和xy-center-ele所指元素都需要有具体宽度和高度；
@mixin xy-center-ele($ele-width: 100px, $ele-height: 100px) {
    position: absolute;
    width: $ele-width;
    height: $ele-height;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    // z-index: 999;
}

@mixin xy-center-box($box-width: auto, $box-height: 300px) {
    position: relative;
    width: $box-width;
    height: $box-height;
}

// 以下是练习内容
// .xy-center-box {
//     @include xy-center-box();
//     border: 1px solid #000;
//     background-color: lightcyan;
//     .xy-center-ele {
//         @include xy-center-ele();
//         background-color: lightcoral;
//     }
// }
//============================================================
// 绝对居中:父容器利用flex来实现其内部子元素水平垂直居中
@mixin xy-center-flexbox($box-width: auto, $box-height: auto) {
    display: flex;
    width: $box-width;
    height: $box-height;
    justify-content: center;
    align-items: center;
}

// .xy-center-flexbox {
//     @include xy-center-flexbox();
//     border: 1px solid #000;
//     background-color: lightcyan;
//     .xy-center-ele {
//         width: 100px;
//         height: 100px;
//         background-color: lightcoral;
//     }
// }
//===============================================
// 绝对居中:使用table来实现水平垂直居中
// xy-center-table：父元素；
// xy-center-table-ele；子元素
@mixin xy-center-table-ele() {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@mixin xy-center-table($box-width: auto, $box-height: auto) {
    display: table;
    width: $box-width;
    height: $box-height;
}

// .xy-center-table {
//     @include xy-center-table();
//     border: 1px solid #222;
//     .xy-center-table-ele {
//         @include xy-center-table-ele();
//         padding-right: 20px;
//     }
// }
//===========================================================
// 水平居中:多元素实现水平居中
@mixin x-center-eles($ele-width:auto, $ele-height:auto) {
    display: inline-block;
    // display: inline;
    /*hack IE*/
    // zoom: 1;
    /*hack IE*/
    margin: 0;
    padding: 0;
    width: $ele-width;
    line-height: $ele-height;
}

@mixin x-center-box($box-width: auto, $box-height: auto) {
    text-align: center;
    width: $box-width;
    height: $box-height;
}

.x-center-box {
    @include x-center-box();
    border: 1px solid #222;
    .x-center-eles {
        @include x-center-eles(100px, 60px);
        &:hover {
            color: red;
            border-bottom: 2px solid red;
        }
    }
}

运行实例 »
点击 "运行实例" 按钮查看在线实例