张老师的小测试

Batkid 发布于2019-08-30 15:55 / 614人阅读

摘要：三好的实现方法标签绝对定位布局实现布局实现浮动实现借助原生流体特性实现最完美第期小测点评与答疑以上

张鑫旭老师的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以上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117217.html

运营干货 - 开发 - Email - SJR

摘要：毕老师运营这明显是广告，但为什么要在这里发过去一段时间，由于团队中的各种高富帅人生淫家都在全世界旅游，我们的开发进度比较慢当然之前也一直很慢，因为想要做一个慢产品。 Gradchef · 毕老师运营这明显是广告，但为什么要在这里发？过去一段时间，由于团队中的各种高富帅、人生淫家都在全世界旅游，我们的开发进度比较慢（当然之前也一直很慢，因为想要做一个慢产品）。但是，我们一直都在坚...

PumpkinDylan 2019-08-19 14:28 评论0 收藏0
新时代的「数字富士康」：揭秘 AI 风口下的数据标注生意

摘要：目前的数据标注工厂，多集中在河北河南山东山西等地区，这同以富士康为代表的传统人力密集企业的选址偏好重合度极高以更低廉的劳动力成本支撑起聚集在首都的人工智能底层数据需求。开玩笑的时候，小雪说她的男友是 AI 产业中工资较低的那个，其次就是她自己。刚从济南德州信息工程学校计算机专业毕业，小雪和男友正在接受手写体录入培训，当她能认识这些手写字母后，就轮到她把这些知识教给计算机——把一张张快递单或...

ssshooter 2019-04-25 18:28 评论0 收藏0
我在北京写代码，你在哪儿？

摘要：我是年月日来的北京，至今已有天了用这样计算巧合的是到京后，新办理的两张银行卡都是数字结尾，从那时起觉的这个数字在北京应该和我的运势相合，以至于后来入职现在公司的日期我都特意选择了月，想想自己也真是比较搞笑。我是2014年7月17日来的北京，至今已有941天了（用php这样计算：echo (time() - strtotime(2014-7-17)) / 86400;）巧合的是到京后，...

aervon 2019-06-27 15:27 评论0 收藏0
【收藏】6000字人工智能科普，高中生都能读懂 —— Jinkey原创

摘要：人工智能概述简史应用领域安防实时从视频中检测出行人和车辆。通过多张医疗影像重建出人体内器官的三维模型，帮助医生设计手术，确保手术为我们每个人提供康建议和疾病风险预警，从而让我们生活得更加健康。 showImg(https://segmentfault.com/img/remote/1460000015971504); 0 引言本文是《人工智能基础（高中版）》的读书笔记，这本书的配图非...

张巨伟 2019-06-26 18:31 评论0 收藏0