需求,有三个内容需要居中显示
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
内容居中,我们太熟悉了:)
.content1,.content2,.content3{
width:960px;
margin:0 auto;
}
这样,三个内容都居中了。然后,当content1 内容里面的h1,距离顶部有50个像素的时候,怎么写?
<div class="content1">
<h1 class="title"></h1>
<div>
.title{
margin-top:50px;
}
但是,紧邻的块级元素会发生margin collapse 。这样导致的实际效果是content1的div具体上面50px。怎么办?还有别的办法吗?
在content1 用padding
.content1{
padding-top:50px;
}
这样会发现,content1 内容宽变成960+50。根据盒模型,不要忘了。,如果坚决要用这个方法,可以如下写:
.content1{
width:910px;
}
效果是能达到,但是,如果页面有很多这样的元素,你将花大量的时间去计算width-padding 。
其实还有更好的办法:
改一下html结构:
<div class="content">
<div class="content1"><h1 class="title"></h1></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
用content 来让所有内容居中
.content{width:960px;margin:0 auto;}
通过content1 的padding 属性,实现title距离顶部50px
.content1{padding-top:50px;}
content1 ,content2,content3 通过浏览器自动计算宽度,从而就避免繁琐的计算
xiong:计算宽度实在太费脑力,多利用块级元素会自动延展的特性