第8章 1218-盒模型与对齐方式，学习心得，笔记

今天所学心得、笔记

1、实例演示box-sizing属性;

    .box {
        width: 20em;
        height: 20em;
        /*padding部分颜色，不跟随背景颜色*/
        background: content-box;
        background-color: violet;
        border: solid 1px;
        padding: 10px;
        /*遵从 W3C 标准，宽高不包括border和padding值*/
        box-sizing: content-box;
        /*宽高包含border和padding值*/
        box-sizing: border-box;
    }

---

2、实例演示常用的元素居中方式;

    /*1. span 实现水平、垂直居中*/
    .box {
        width: 20em;
        height: 20em;
        border: solid 1px;
        /*span水平居中*/
        text-align: center;
        /*span垂直居中*/
        line-height: 20em;
    }
    /* 2. padding 实现DIV水平、垂直居中 */
    .box {
        width: 20em;
        padding: 5em;
        border: solid 1px;
        box-sizing: border-box;
    }
   .box>div {
        width: 10em;
        height: 10em;
        background-color: violet;
    }
    /* 3. margin 实现DIV水平、垂直居中 */
    .box {
        width: 20em;
        height: 20em;
        position: relative;
    }
    .box>div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

---