首页>新闻动态>网络新原创知识
网站布局中margin的auto的使用与冲突
今天依然说说网站建设技术方面的事情,对于大多从事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的意思,其是内部的填充,不是模块外的填充。


下一条:媒体查询@media screen没有优先级
文章分类
热门文章
网站套餐 / 解决方案 / 客户案例 / 公司优势 / 新闻动态 / 主机域名 / 关于我们 / 返回首页
版权所有:南京希丁哥网络信息服务有限公司