张老师的小测试

左手的ㄟ右手 2022-03-02 07:30 168阅读 0赞

[张鑫旭老师的github][github]  
一、  
![啊啊啊][2839299514-5c35d65745a25_articlex]

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...][https_www.zhangxinxu.com_wo...]

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

--------------------

[github]: https://github.com/zhangxinxu/quiz
[2839299514-5c35d65745a25_articlex]: /images/20220302/6e0ecd35d7c247b191e9c99f4578d4e3.png
[https_www.zhangxinxu.com_wo...]: https://www.zhangxinxu.com/wordpress/2019/01/css-quiz-1/