div标签,在不定义宽度的情况,它的宽度是100%。如下面这段代码所示,写一个border属性是为了方便观察,大家可以当它不存在。

<div style="border:1px solid blue;">11</div>

虽然说它的的宽度是100%,但大家会发现,它并没有真正与浏览器两边到底,这是为什么呢?这是因为div上面还有一个body标签。body标签默认情况下,margin是8px,padding是0px(在火狐和Chrome里面均验证)。

所以,如果我们想创建一个两边到底的div,则需要做两件事,设置body的margin为0、padding为0,同时不要定义div的宽度。

使用width属性来定义div宽度,那么div将显示指定的宽度,并且默认居中显示。如下所示:

#layout { width: 200px; height: 300px; background: #99FFcc;}

如果想要div居中显示,则需要设置div的margin的左右两边属性值为auto。如下所示:

#layout { width: 200px; height: 300px; margin: auto; background: #99FFcc;}

注意:1、居中对齐时,width为百分比也是没有问题。

2、margin的左右两边设置成auto就居中了,但不代表说把margin-right设置为auto就居右了,没有这个说法。

03-14 09:38