css的外边距合并(如何实现不合并)
2016-03-20 13:54
489 查看
如何实现外边框不合并呢?我总结了几个知乎大神和老师上课说的办法:
1.可以只设置下边距或者上边距:
<!DOCTYPE > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合并</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin-bottom: 20px;} .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> </body>2。让父级元素触发 BFC,就能使父级 margin 和当前元素的 margin 不重叠。
<!DOCTYPE html PUBLIC > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合并</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin: 20px;} .container{ overflow: hidden; } .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="container"> <div class="first">first</div> </div> <div class="container"> <div class="second">second</div> </div> <div class="third">third</div> </body>可以看到第一和第二之间没有发生合并,而第二第三之间合并了。
3.border的设置:
<!DOCTYPE html PUBLIC > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合并</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin: 20px;border: 10px solid #fff;} .container{ overflow: hidden; } .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> </body>
这三方法其实都是让两个元素不再相邻,就可以避免合并的情况出现。
----------------------------------------------------------
2016/3/22修改
今天又不小心看到一篇总结的很好的博文。实在汗颜。
附地址:http://www.hujuntao.com/web/css/css-margin-overlap.html
说的很全面了,可以参考
----------------------------------------------------------------------
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS