7x24小时售后服务
5倍故障时长赔付
15天无理由退款
N对一管家服务
让我们的顾问联系您
margin-top 和 margin-bottom 的选择
Bootstrap 喜欢使用 margin-bottom 来处理块元素之间的间距,这种做法会很纠结。我之前都使用 margin-top 的,因为 margin-top 可以使用 first-child 伪类把第一个元素的 margin-top 干掉,而且是 IE7 开始支持的。margin-bottom 可能就要依赖 last-child,这得从 IE9 才开始支持。而且考虑到插入元素通常使用 appendChild,也就是说 last-child 这个元素本身很不稳定,那么 margin-bottom 就可能带来各种麻烦。所以综合各种因素考虑,我选择了 margin-top。但我觉得,既然我都能想到这些问题,Bootstrap 的开发团队应该也能够想到,也许它们是故意这么设计的?是我还不够了解 Bootstrap 的思想么?
依赖于 margin 合并的解决方案
垂直方向的块间距除了使用单向的 margin 来解决以外还可以使用双向 margin 自动合并的方式来解决,这通常用于头尾也需要间距的情况。比如这个例子:
运行<!DOCTYPE html>
<style>
.list { border: 1px solid #ccc; width: 200px; padding: 0; }
.list-item { margin: 1em; border: 1px solid #ccc; }
</style>
<div class=”list”>
<div class=”list-item”>1</div>
<div class=”list-item”>2</div>
<div class=”list-item”>3</div>
<div class=”list-item”>4</div>
</div>
这也是一种很常用的布局方式。但这种方式总是会在头尾留下间距,如果想要处理掉,可能还要利用 margin 的容器合并特性,将这个 margin 合并到容器上,因为通常容器也需要一个间距嘛。比如下面例子就使用了这个特性:
运行<!DOCTYPE html>
<style>
body { font: 14px/1.5 Arial; }
.aside {
margin: 1em;
width: 200px;
padding: 0;
outline: 1px solid red;
}
.panel {
margin: 1em 0;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.panel-heading {
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
</style>
<div class=”aside”>
<div class=”panel”>
<div class=”panel-heading”>panel 1</div>
<div class=”panel-body”>data 1</div>
</div>
<div class=”panel”>
<div class=”panel-heading”>panel 2</div>
<div class=”panel-body”>data 2</div>
</div>
<div class=”panel”>
<div class=”panel-heading”>panel 3</div>
<div class=”panel-body”>data 3</div>
</div>
</div>
期望与现实
我非常希望使用 margin 合并的特性来处理垂直间距问题,但前提是所在的团队成员都必须了解 BFC,这对于大多数团队而言可能还真有点困难。如果团队无法承受各种技术细节的话,还是用最原始的解决方案来得实在。
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司, 成都网站制作公司,成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都微信网站建设,成都微商城网站建设,成都商城网站建设,成都网络公司。
7x24小时售后服务
5倍故障时长赔付
15天无理由退款
N对一管家服务
让我们的顾问联系您
川公网安备 51010502010278号
ICP备案号:蜀ICP备10206569号-2