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

关于 掌握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?:清除浮动黑科技完整解读

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,033评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,123评论 0 2
  • 本文转发自github, 原文地址 前端开发知识点: 作为一名前端工程师,无论工作年头长短都应该掌握的知识点: 此...
    XDUZ阅读 643评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,782评论 1 19
  • 梦里,画面变幻着,破碎着,重组着!星星月亮闪烁着,汇聚着,慢慢地,夜空好像变成了一头荒古巨兽,从恒古走来。...
    笔尖素颜阅读 295评论 2 2

友情链接更多精彩内容