发表于： 2020-03-19 23:52:44
1 1472
今日完成
修改task5细节
由于分割线使用的是inline-block
在上传代码前不小心格式化代码，产生空格，导致线条粗细不均及未对齐
解决办法
重新修改html消除空格
或重新修改结构样式
阅读学习资料 《不定宽-常见布局》
学习不同的样式完成同一种效果（水平、垂直居中，及两列、多列定宽不定宽布局）
深入学习margin负值的应用（圣杯布局和双飞翼布局）
明日计划
着手task8
遇到的问题
根据学习资料写出代码并不符合预期，右列定宽，左列自适应会被右列覆盖
左右定宽，中间自适应同样会被右列覆盖
个人认为学习资料中的这两个部分代码有问题
通过其他资料学习margin负值应用后如下
资料：margin负值的应用https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
双飞翼及圣杯布局就是margin负值的应用
圣杯和双飞翼布局资料
https://www.jianshu.com/p/81ef7e7094e8
资料中布局实际为双飞翼布局
修改后如下图所示
同时学习圣杯布局
遇到的问题
不理解如何通过
padding-bottom:9999px;margin-bottom:-9999px;实现等高
参考资料http://blog.sina.com.cn/s/blog_493fe5fa0100zulj.html
该方法为内外补丁负值法
通过padding撑开内容 margin负值抵消padding对外标签的影响
再通过父容器overflow：hidden；切除实现等高
收获
了解并会使用圣杯和双飞翼布局
了解margin负值的应用及原理
返回列表
评论