`
yong7181000
  • 浏览: 29829 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

解析margin的自动值auto

    博客分类:
  • css
阅读更多

有一个div居中的样式属性,在firefox中显示正常,在IE下就不能居中
找了一下,有的说是要加一个w3c认证的一个声明

加一个3C 调用声明

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


我不想加

还有一个说法,说要给body加一个属性

Html代码 复制代码 收藏代码
  1. text-align:center;  
text-align:center;


我更不想加,代价有点大

既然给body加这个属性能行,那干嘛不在外面包上一个带这个属性的div呢
测试之,通过

Html代码 复制代码 收藏代码
  1. <div style="text-align:center;">  
  2.   <div style="margin:0 auto;">居中</div>  
  3. </div>  

 

 

.nav {
 position: relative;
 /*
 margin: 0px  0px 0px 0px;   /*主菜单的距离  为:上,右,下,左*/
 width:961px;
 margin: 0 auto 0px auto;
 background: url(images/bImg/nav_bg.png) no-repeat 0 -36px;
}

======================

使用margin的auto值有什么好说的呢。一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto。在这里和大家讨论一下三者之间的关系 。下面 介绍一下几条原则:

1. auto 可以解释为:弥补其它部分与所要求总合之间的差别;

2.如果三个属性都没有被设置成auto ,那么margin-right会被强制设为auto;

3.如果两个边界都被设为 auto ,则被设为相等的值。

4. 如果两个边界之一和width设为auto ,则被设置为auto的边界值为0;

5.三个都被设为auto ,则2个边界的值都为0,width的值为最大可能值。

写得有点乱,记得以前看过一些资料有这方面的详细描述,只是现在想不起也找不到了。不过大概也就这几个点了,了解一下就可以。

 

 

转自:http://hotsunshine.iteye.com/blog/1069573

        http://www.cnblogs.com/freeskycd/archive/2010/03/03/1677820.html

 

注意:没有上或者下方向的auto
此应用一定程度上可以代替float,而且更方便,兼容更好

分享到:
评论

相关推荐

    高通_AF关于镜头pos与DAC和margin的解析

    关于镜头pos与DAC和margin的解析

    无法居中,margin:0 auto;属性

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小...

    margin值在IE6变成双倍

    margin值在IE6变成双倍 margin值在IE6变成双倍 margin值在IE6变成双倍

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: ... margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor:

    html中使用margin:0 auto整个页面不居中的解决方法

    div style=margin:0 auto这个属怎么弄都不能让页面居中展示,原因是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档

    Intel Rank Margin Test SOP_20181010.docx

    Memory rank margin test is a memory test scheme under normal temperature and voltage. The whole test scheme is embedded in a specific BIOS. If the Rank Margin Tool option in BIOS is enabled, the ...

    CSS的margin和padding

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见...

    margin:0 auto与text-align:center的基本概念及区别介绍

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;  该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐...2.margin 是设置对象四边的外延边距,被称为外补丁或外边距。  Example:

    在IE下,当margin:0 auto;无法使得块级元素水平居中时

    今天遇到使用一个,div元素使用了以下样式 ... margin:0 auto;} 在火狐下此div水平居中,但在IE下不居中。 原因是,此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录

    行业分类-物理装置-一种损失函数中margin参数值的更新方法和系统.zip

    行业分类-物理装置-一种损失函数中margin参数值的更新方法和系统

    css中margin:0 auto居中问题深入探讨

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小...

    Div使用margin居中常见问题

    虽然我们知道在CSS中加margin:0 auto;(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见...

    ie css margin auto 不居中解决方案

    在将居中显示时,使用css:#main {margin:0 auto;width:400px;} 此css在firefox下是好的,但是在ie下不起作用。于是开始搜索整理了一下,晒出来和大家分享一下,有需要的朋友可以参考下

    css margin:0 auto居中

    复制一下代码到记事本,修改为html后缀的文件。 代码 &lt;html xmlns=”http://www.w3.org/1999/xhtml”&gt; &lt;head&gt; &lt;meta http-equiv=”Content-Type” content=... charset=utf-8″ /&gt;... margin:0 auto;

    深入解析CSS中margin属性的使用

    外边距的 margin-width 的值类型有:auto | length | percentage也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方...

    ie下margin不居中的三种解决方法

    正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:&lt;style type=”text/css”&gt;#con{...

    float元素设置百分比宽和margin自动换行问题

    问题:若两个内层盒子宽度设定为50%,则加上间隔15px会超出父容器就会自动换行;若两个内层盒子宽度设定为小于50%,则浏览器尺寸改变时就不会充满父容器,导致水平不居中。 解决方法:使用calc()动态计算宽度。...

    div使用margin:0px auto不居中的原因分析及解决

    复制代码代码如下: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: 复制代码代码如下: ”cnbruce”&gt;margin: 0 auto 看看内容居中否&lt;/div&gt; 如上调试结果,IE6.0是不居中...

Global site tag (gtag.js) - Google Analytics