第一次div+css布局笔记
1.z-index只能在position属性值为relative/absolute/fixed的元素上有效。若子元素设置z-index后仍被覆盖，应考虑含有position设置的父元素的z-index设置情况。
2.设置float元素时发生的问题：
⑴对于设置float样式的子元素，它的父元素的高度无法自适应，float元素漂浮不会撑开父元素的高度，所以父元素需要设置高度或清除浮动。
⑵非替换元素在设置左右浮动时，需要指定明确的宽度，否则宽度会趋于0而导致无法显示效果。
3.margin:0px auto;解决自适应居中问题
4.margin发生重叠现象
⑴对于相邻的两个普通的div，两个div之间的上下边距不会简单叠加，而是取其中较大的边距值。
<style>
#div1 {width:800px; height:100px; margin-bottom:50px; background:red;}
#div2 {width:800px; height:100px; margin-top:50px; background:blue;}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
#div1 {width:800px; height:100px; margin-bottom:50px; background:red;}
#div2 {width:800px; height:100px; margin-top:100px; background:blue;}
⑵对于div嵌套，父div的高度不会被子div的margin撑开，margin-top和margin-bottom会发生重叠。给父div加padding可解决问题
<style>
#div1 {margin:100px; width:300px; background:red;}
#div2 {margin:100px; width:100px; height:100px; background:blue;}
</style>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
#div1 {margin:100px; width:300px; padding:10px; background:red;}
浙公网安备 33010602011771号