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:115085382!
了解更多好文章,请关注我们的新浪微博和腾讯微博
亲,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


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

相关文章:

HTML 表格  (2015/5/8 17:14:46)

HTML 链接  (2015/5/7 16:26:41)

HTML样式  (2015/5/1 22:54:11)

html代码如何使得背景图片自适应各类浏览器  (2015/4/27 13:31:06)

改变图像的尺寸  (2015/5/5 15:42:07)

DHTML实例  (2015/5/7 11:09:48)

表单的设计  (2015/5/6 10:35:14)

CSS中的边距  (2015/5/5 10:30:19)

HTML元素  (2015/4/29 21:52:57)

jQuery获取select选中的值  (2015/4/24 8:51:57)