css中常见margin塌陷问题之解决办法
2017-10-15 15:40
549 查看
塌陷问题
当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。
①垂直并列
首先设置两个DIV,并为其制定宽高-
1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div> 5 </body> 6 /*CSS部分*/ 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .box1{ 13 width: 200px; 14 height: 200px; 15 background: yellowgreen; 16 } 17 .box2{ 18 width: 200px; 19 height: 200px; background: gray; 20 } 21 </style>
-
1 <style> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 .box1{ 7 width:200px; 8 height:200px; 9 background: yellowgreen; 10 margin-bottom: 50px; 11 } 12 .box2{ 13 width:200px; 14 height:200px; 15 background: gray; 16 margin-top: 40px; 17 } 18 </style>
②嵌套关系(父级元素塌陷)
-
1 /*CSS部分*/ 2 <style> 3 .box1{ 4 width:400px; 5 height:400px; 6 background: pink; 7 } 8 .box2{ 9 width:200px; 10 height:200px; 11 background: lightblue; 12 } 13 </style> 14 /*HTML部分*/ 15 <body> 16 <divclass="box1"> 17 <divclass="box2"></div> 18 </div> 19 </body>
.son:before{ content:""; overflow:hidden; }
相关文章推荐
- Css中margin塌陷与合并问题与解决办法
- div+css 布局常见问题及解决办法如下
- css之margin相关的问题以及解决办法
- CSS中float造成的浮动“塌陷”问题的解决办法
- DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!
- IE浏览器常见CSS兼容性问题及解决办法
- div+css常见浏览器兼容问题以及解决办法
- IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
- (转)IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
- CSS中,margin-top塌陷问题的解决
- CSS常见兼容性问题及解决办法汇总
- CSS常见问题解决001——子div的margin-top影响父div的位置
- div+css设计中常见问题的解决办法
- CSS常见问题小技巧解决办法收集
- IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法 -
- 使用Linux常见问题及其解决办法
- 移动端前端笔记 — 常见JS与CSS问题及解决方法
- 移动端常见兼容性问题及解决办法
- OpenGL常见问题以及解决办法
- 常见php与mysql中文乱码问题解决办法