基础知识
1.position:static：默认定位，出现在正常流中
2.position:fixed：相对于浏览器的固定位置，窗口滚动不会变，不占空间，例{position:fixed; top:30px; right:5px;}
3.position:relative：相对其正常位置，占空间，例{position:relative; left:-20px;}左移20px
4.position:absolute：绝对定位相对已定位的父元素，若没有则相对html，不占空间，例{position:absolute; left:200px; top:150px;}
5.z-index设层级2
6.top、right、left、bottom指元素边界与其包含块之间的偏移，百分数是相对于其包含块
7.clip剪辑一个绝对定位，例{position:absolute; clip:rect(0, 60px, 200px, 0)}只能剪矩形
问题1：img margin{0 auto;}不好用
原因：首先margin{0 auto;}必须设宽度，所以对块级元素是好用的。但是img内联元素不占整行，所以不会居中。
解决：加display:block设为块级元素
问题2：<body><div></div></body> div设position:absolute;top:5%; top不起作用
原因：top的百分值是相对于其包含块的高度而言，而body与块元素一样，宽水平拉伸垂直包裹，其高度取决于包含元素的高度和，所以开始渲染的时候body里无元素，高是0，所以top值无作用。所以后来在浏览器中调试有效果是因为body已经渲染过了，有高度。
问题3：元素设z-index,margin:0 auto;不好用
原因：设z-index的元素自己单独处在某一层，所以没有包含块，即没有包含块的宽度，所以margin:0 auto;不好用解决：可以用定位
扫一扫
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
