张老师的小测试

张鑫旭老师的github
一、

    dl{
        width: 50%;
        height: 200px;
        border: 1px solid #eee;
        margin: 0 auto;
        padding: 0 20px;
    }
    dt{
        float: left;
        width: 50%;
        margin-top: 20px;
    }
    dd{
        float: right;
        width: 50%;
        text-align: right;
        margin-top: 20px;
    }

二、存在问题及改善

 **1. 格式与缩进的问题**
 **2. 答题点评之值得商榷的实现**
    ①通配符reset的问题：为了一棵树砍掉整个森林的做法是不合适的；
    ②容器定高的问题：会降低容错性和可维护性；
    ③50%的问题：左边安全宽度，右侧自动分配剩余空间；
    ④absolute实现的问题：我没有考虑到这种，但文章内有详细解答；
    ⑤有必要考虑极端内容： 文字内容很多: 战略布局；
                        连续的一串英文字符 `work-break: break-all`；
                        没有文字内容 `dd:empty::before {content:'-';color:#999;}`。
    

三、 好的实现方法

 1.  dt标签绝对定位
     dt { position: absolute; }
     dd {text-align: right; margin-left: 5em; }
 2.  Flex布局实现
 3.  Grid布局实现
 4.  float浮动实现
 ```css
        dl{
            border: 1px solid #eee;
            overflow: hidden;
            color: #cecece;
            width: 500px;
        }
        dt{
            float: left;
            width: 5em;
        }
        dd{
            text-align: right;
            word-break: break-all;
            margin-left: 5em;
        }
        dd:empty::before {
                  content:'-';
                   color: #999;
        }   
```
5.借助原生流体特性实现（最完美）
 ```css
dd {
    margin: -1.5em 0 0 5em;
    text-align: right;    
}
 ```        

第1期CSS小测点评与答疑https://www.zhangxinxu.com/wo...

----------20190109以上

---