百度ife任务3总结

在做百度ife的任务,没能组队成功只好自己做,如果现在还有收人的请务必带上我哦。

task3作业地址:
https://github.com/emonki/BaiduIfe/tree/…
*demo还不会设,周末研究一下

总结的经验如下,不对之处麻烦指正:

1.html先写float元素,因为float不影响后续元素布局,但是会被普通流影响。

2.设置margin-left/right普通流实现居中,受父元素padding宽度影响。

3.positong:relative,absolute定位小地方,不能用来做自适应布局。
因为absolute脱离标准文档流,父元素无法自适应高度。
absolute不受relative的父元素的padding影响,要计算padding值。

4.清除浮动方法
a) 父元素overflow:hidden;原理是overflow时会计算浮动部分的高度,从以撑开父元素高度。

(但是如果对父元素设置了position:relative,居中列absolute的话overflow:hidden的话会隐藏超出父元素高度的部分)

b) 父元素:after一个内容为””的block;clear:both;原理是在父元素结尾添加一个内容为空的块,再清除该块元素附近的浮动,让这个块元素到最下方,撑开父元素高度。

问题:能不能在不改变html结构的情况下仅凭css达到3列式中间居中自适应宽度的效果?

    原文作者:神田明神
    原文地址: https://segmentfault.com/a/1190000004833105
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞