今天依然说说网站建设技术方面的事情,对于大多从事div+css布局的人来说,margin 0 auto这个代码是再熟悉不过了,意思是说让某个模块相对于其上一层的模块居中一下,很是简单,当然这个仅是用来确定模块本身位置的,至于模块内部的东西如果要居中,还要再次设置一下这个模块的text-align属性为center值。
详细的说一下这个margin 0 auto(注:以下内容仅是菜鸟专用,高手请绕过),有四层意思,即margin-top:0px、margin-right:auto、margin-bottom:0px、margin-left:auto,换句话说,即上下为0px,左右侧为自动居中auto,而margin的参数含义顺序为上端、右端、下端、左端,当要某个模块居中时,直接使用margin 0 auto,就是说左右居中,上下不空隔。
啰嗦了这么长的时间,究想表达什么呢?网站布局中margin的auto使用不能重复定义,否则就会产生严重冲突,致使布局杂乱无章。
比如有时需要设置某个模块上端空个50px出来,或是下端空一点出来,菜鸟们会这样写 margin 0 auto;margin-top:50px,其实这样做是非常错误的,因为这个margin 0 auto已经包含上端空隙了,反复定义二次,两者margin就会有冲突,显然程序就会乱套,正确的写法是严格按照先前我讲的格式写,比如这个模块上端要空50px,下端要空70px出来,则必须这样写:margin 50px auto 70px(三个参数),或是margin 50px auto 70px auto(四个参数),两者一样。
今天表达的就是这个意思,但如果觉得麻烦,也可使用padding来实现,比如可以这样写:margin 0 auto; padding-top:50px;padding-bottom:70px,当然在实际的网站建设过程中,要弄清padding的意思,其是内部的填充,不是模块外的填充。