div关于宽度与对齐的样式


关键词

DIV 宽度 对齐

摘要

本文介绍div标签对于宽度、高度、水平对齐、竖直对齐等属性。

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就居右了,没有这个说法。


 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:div关于宽度与对齐的样式:http://www.splaybow.com/post/div-width-align.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« 使用<a>标签来罩着一个div 为什么竖直方向的两个div的margin不相加? »