美文网首页
个人没事做做百度IFE上的前端任务 task3布局资料总结

个人没事做做百度IFE上的前端任务 task3布局资料总结

作者: 李大嘴JimmyLee | 来源:发表于2016-10-10 19:25 被阅读0次

    关于 掌握HTML/CSS布局的概念
    掌握盒模型的概念
    掌握position与float的概念以及在布局时的用法

    position:
    static: 元素处于正常文档流中,它当前的布局位置 top right left bottom 和 z-index均无效
    relative:相对定位,未脱离文档流,此元素会在原来的位置上留下空白 对table-*-group, table-row, table-column, table-cell, table-caption无效
    absolute:绝对定位,不为元素预留空间,脱离文档流 。元素位置通过指定其与它最近的非static定位的祖先元素的偏移来确定。并且可以设置外边距,并且 不会与其他边距合并。

    fixed:固定定位,不为元素预留空间,脱离文档流
    。通过指定屏幕视窗的位置来指定元素的空间。滚屏时位置不会发生变化。fixed属性通常会创建新的栈环境。

    清除浮动
    overflow:auto; 是最简单的一种方式。但是有时候在IE下有bug。
    zoom:1; 是解决IE浏览器下haslayout的hack写法。加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容,以及元素与元素之间的相互影响。
    清除浮动深入:http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
    参考资料
    MDN:position:了解 CSS position 属性的基本知识
    MDN:float:了解 CSS float 属性的基本知识
    Learn CSS Positioning in Ten Steps:通过具体的例子熟悉 position 属性
    清除浮动(clearfix hack):清除浮动是什么,如何简单地清除浮动
    StackOverflow:Which method of ‘clearfix’ is best?:清除浮动黑科技完整解读

    相关文章

      网友评论

          本文标题:个人没事做做百度IFE上的前端任务 task3布局资料总结

          本文链接:https://www.haomeiwen.com/subject/ptjvyttx.html