资讯专栏INFORMATION COLUMN

百度ife任务3总结

xcold / 1219人阅读

摘要:在做百度的任务,没能组队成功只好自己做,如果现在还有收人的请务必带上我哦。因为脱离标准文档流,父元素无法自适应高度。问题能不能在不改变结构的情况下仅凭达到列式中间居中自适应宽度的效果

在做百度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://www.ucloud.cn/yun/115168.html

相关文章

  • 百度前端技术学院2017学习总结

    摘要:向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍,这样才有移动与变化的空间。不足及改进总结来看,自己做得不够,虽然也花了时间,不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE,2016年就听说了,当时自己也报名,还组成队伍了,不过自己一个任务也没完成就结束了,遗憾... 关注了IFE,知道2017年2月有新的一期培训,于是一直在等着报名,然后开始做里面发布的任务(...

    pkwenda 评论0 收藏0
  • 百度前端技术学院2017学习总结

    摘要:向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍,这样才有移动与变化的空间。不足及改进总结来看,自己做得不够,虽然也花了时间,不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE,2016年就听说了,当时自己也报名,还组成队伍了,不过自己一个任务也没完成就结束了,遗憾... 关注了IFE,知道2017年2月有新的一期培训,于是一直在等着报名,然后开始做里面发布的任务(...

    ky0ncheng 评论0 收藏0
  • 百度前端技术学院2017学习总结

    摘要:向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍,这样才有移动与变化的空间。不足及改进总结来看,自己做得不够,虽然也花了时间,不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE,2016年就听说了,当时自己也报名,还组成队伍了,不过自己一个任务也没完成就结束了,遗憾... 关注了IFE,知道2017年2月有新的一期培训,于是一直在等着报名,然后开始做里面发布的任务(...

    Jingbin_ 评论0 收藏0
  • 百度IFE2018任务--17-18天

    摘要:本文章用于记录百度前端技术学院的任务难点。十进制转二进制。第二步将这个数字转换成字符串,分割成数组,每一项都是数字的某一位上的数,再用判断这个数组是否包含为的元素即可,是则打印。代码判断一个数组是否包含一个指定的值,如果存在返回,否则返回 本文章用于记录百度前端技术学院的任务难点。 十进制转二进制。核心思路:在while循环中,将十进制数字除以2,同时将除以2的余数一次次记录下来,而每...

    binta 评论0 收藏0
  • 百度IFE2018任务--20-21天

    原生javascript中,用cssText如何重写内联css注意:前面的分号是为了兼容ie,加号是为了不清除已有的内联样式代码: Element.style.cssText += ;width:100px;height:100px;top:100px;left:100px; 自定义一个方法来实现追加className的效果代码如下代码: function addClass(element,val...

    Charles 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<