首页 > Web开发 > 详细

第一次div+css布局笔记

时间:2016-01-06 13:45:08      阅读:269      评论:0      收藏:0      [点我收藏+]

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;}

技术分享

第一次div+css布局笔记

原文:http://www.cnblogs.com/zyt654/p/5103944.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!