張老師的小測試

Batkid 發(fā)布于2019-08-30 15:55 / 534人閱讀

摘要：三好的實現(xiàn)方法標(biāo)簽絕對定位布局實現(xiàn)布局實現(xiàn)浮動實現(xiàn)借助原生流體特性實現(xiàn)最完美第期小測點(diǎn)評與答疑以上

張鑫旭老師的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. 格式與縮進(jìn)的問題**
 **2. 答題點(diǎn)評之值得商榷的實現(xiàn)**
    ①通配符reset的問題：為了一棵樹砍掉整個森林的做法是不合適的；
    ②容器定高的問題：會降低容錯性和可維護(hù)性；
    ③50%的問題：左邊安全寬度，右側(cè)自動分配剩余空間；
    ④absolute實現(xiàn)的問題：我沒有考慮到這種，但文章內(nèi)有詳細(xì)解答；
    ⑤有必要考慮極端內(nèi)容： 文字內(nèi)容很多: 戰(zhàn)略布局；
                        連續(xù)的一串英文字符 `work-break: break-all`；
                        沒有文字內(nèi)容 `dd:empty::before {content:"-";color:#999;}`。

三、好的實現(xiàn)方法

 1.  dt標(biāo)簽絕對定位
     dt { position: absolute; }
     dd {text-align: right; margin-left: 5em; }
 2.  Flex布局實現(xiàn)
 3.  Grid布局實現(xiàn)
 4.  float浮動實現(xiàn)
 ```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.借助原生流體特性實現(xiàn)（最完美）
 ```css
dd {
    margin: -1.5em 0 0 5em;
    text-align: right;    
}
 ```

第1期CSS小測點(diǎn)評與答疑https://www.zhangxinxu.com/wo...

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