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