張老師的小測試

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

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

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

 1.  dt標簽絕對定位
     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小測點評與答疑https://www.zhangxinxu.com/wo...

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

GPU云服務器云服務器 php老師 python老師 java畢老師鎖微老師python

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117217.html

運營干貨 - 開發(fā) - Email - SJR

摘要：畢老師運營這明顯是廣告，但為什么要在這里發(fā)過去一段時間，由于團隊中的各種高富帥人生淫家都在全世界旅游，我們的開發(fā)進度比較慢當然之前也一直很慢，因為想要做一個慢產(chǎn)品。 Gradchef · 畢老師運營這明顯是廣告，但為什么要在這里發(fā)？過去一段時間，由于團隊中的各種高富帥、人生淫家都在全世界旅游，我們的開發(fā)進度比較慢（當然之前也一直很慢，因為想要做一個慢產(chǎn)品）。但是，我們一直都在堅...

PumpkinDylan 2019-08-19 14:28 評論0 收藏0
新時代的「數(shù)字富士康」：揭秘 AI 風口下的數(shù)據(jù)標注生意

摘要：目前的數(shù)據(jù)標注工廠，多集中在河北河南山東山西等地區(qū)，這同以富士康為代表的傳統(tǒng)人力密集企業(yè)的選址偏好重合度極高以更低廉的勞動力成本支撐起聚集在首都的人工智能底層數(shù)據(jù)需求。開玩笑的時候，小雪說她的男友是 AI 產(chǎn)業(yè)中工資較低的那個，其次就是她自己。剛從濟南德州信息工程學校計算機專業(yè)畢業(yè)，小雪和男友正在接受手寫體錄入培訓，當她能認識這些手寫字母后，就輪到她把這些知識教給計算機——把一張張快遞單或...

ssshooter 2019-04-25 18:28 評論0 收藏0
我在北京寫代碼，你在哪兒？

摘要：我是年月日來的北京，至今已有天了用這樣計算巧合的是到京后，新辦理的兩張銀行卡都是數(shù)字結(jié)尾，從那時起覺的這個數(shù)字在北京應該和我的運勢相合，以至于后來入職現(xiàn)在公司的日期我都特意選擇了月，想想自己也真是比較搞笑。我是2014年7月17日來的北京，至今已有941天了（用php這樣計算：echo (time() - strtotime(2014-7-17)) / 86400;）巧合的是到京后，...

aervon 2019-06-27 15:27 評論0 收藏0
【收藏】6000字人工智能科普，高中生都能讀懂 —— Jinkey原創(chuàng)

摘要：人工智能概述簡史應用領域安防實時從視頻中檢測出行人和車輛。通過多張醫(yī)療影像重建出人體內(nèi)器官的三維模型，幫助醫(yī)生設計手術，確保手術為我們每個人提供康建議和疾病風險預警，從而讓我們生活得更加健康。 showImg(https://segmentfault.com/img/remote/1460000015971504); 0 引言本文是《人工智能基礎（高中版）》的讀書筆記，這本書的配圖非...

張巨偉 2019-06-26 18:31 評論0 收藏0