`
yong7181000
  • 浏览: 31093 次
  • 性别: 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,而且更方便,兼容更好

分享到:
评论

相关推荐

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

    首先,`margin: 0 auto`是CSS中的一种居中对齐方法,它将元素的上下边距设置为0,左右边距自动分配,以使元素在容器内水平居中。但这种方法有时在某些浏览器中可能不起作用,特别是当HTML文档类型定义(DOCTYPE)...

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

    这是因为`margin-top`和`margin-bottom`的值默认为`auto`时,浏览器可能会将其视作零,而不会像`margin-left`和`margin-right`那样自动调整。这可能导致元素并没有像预期的那样垂直居中。 ```css div { margin: 10...

    ie css margin auto 不居中解决方案

    对于“一边固定,一边自动扩展”的布局问题,这也与浏览器的解析模式有关。在Quirks模式或旧版IE中,未正确声明`DOCTYPE`可能导致元素的宽度计算方式不一致,进而影响到浮动元素的布局。添加正确的`DOCTYPE`声明可以...

    css margin:0 auto居中

    这就是为什么在第二个示例中,添加了XHTML 1.0 Transitional的DOCTYPE声明,使得浏览器以标准模式解析页面,从而使`margin: 0 auto`正常工作。 值得注意的是,虽然`margin: 0 auto`对于块级元素的水平居中非常有效...

    Intel Rank Margin Test SOP_20181010.docx

    - “Rank Margin Tool”选项位于“Intel RCSetup”-&gt;“Memory Configuration”-&gt;“Rank Margin Tool”(默认值为Auto)。 - 如图6所示,将“Serial Debug Message”设置为“Maximum”。 - 串行调试选项位于...

    css中margin属性详细分析 (2).pdf

    本文将深入解析margin属性的特性和应用场景。 首先,我们要明确margin的基本概念。在CSS中,margin属性用于设置元素的上下左右四个方向的外边距。它可以单独设置每个方向的值,如`margin-top`、`margin-right`、`...

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

    `margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合,它适用于块级元素,通过设置左右外边距为自动来达到居中效果。然而,在某些情况下,尤其是在IE浏览器中,这种方法可能无法正常工作。本篇文章将深入...

    css margin属性深入解析

    2. **自动外边距(`auto`)**:`margin: auto`可以使元素在容器中居中,通常用于水平居中。在流体布局中,`margin: auto`配合`width`设置可以实现元素在父容器内的自适应居中。 3. **百分比值**:外边距可以设置为...

    解析width:100%;与width:auto;的区别

    在这个例子中,如果`p`元素的`width`改为`auto`,那么它的宽度(包括`width`、`margin`、`padding`和`border`)将等于父级元素的宽度,减去`padding`的左右总和。所以,如果`padding`是`10px`,那么`width`的实际值...

    让IE也支持margin居中告别text-align:center

    对于使用MyEclipse等开发工具自动生成的文件,它们默认的DOCTYPE可能不包含上述DTD,从而造成在IE中无法用`margin: auto`实现居中。 因此,为了解决这个问题,开发者需要确保在每个页面的开头都正确地声明DOCTYPE,...

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

    - auto:浏览器自动计算外边距的大小; - length:使用具体的长度值,如像素(px)、厘米(cm)等; - percentage:相对于包含块(父元素)宽度的百分比。 当要设置所有四个方向的外边距时,可以使用简写属性margin,...

    利用margin属性将一个div水平居中

    - **简写形式**: margin值可以简写为一个值(四个边共用)、两个值(上下边共用和左右边共用)、三个值(上、左右、下边共用)或者四个值(按顺序分别设置上、右、下、左边)。 #### 2. 居中div的方法 - **使用...

    ff浏览器下兼容height:auto的问题

    在网页设计与开发过程中,经常遇到的一个问题是不同浏览器对CSS样式的解析差异导致的兼容性问题。本篇文章主要针对Dreamweaver(简称DW)设计工具中设置`height: auto`在Firefox浏览器下显示异常的情况进行分析,并...

    CSS网页布局DIV水平居中的各种方法

    具体做法是通过设置`div`的`margin`属性为`auto`来自动调整左右间距,使其居中显示。下面是一段示例代码: ```css #wrap { margin: 0 auto; } ``` **解析:** - `margin: 0 auto;`:这行代码表示`#wrap`元素的上...

    DIV+CSS常用的网页布局代码

    margin-left: auto; margin-right: auto; width: 400px; /* 这里可能存在一个笔误,应该是两个宽度设置为其中之一 */ } ``` - **知识点**: - `margin: 0px;`:去除默认的边距。 - `text-align: center;`:使...

    Autojs-二维码生成识别.zip

    3. 如果使用本地库,可能需要先将图像保存,然后通过系统命令行调用Zxing的解码工具,解析出二维码信息。 4. 处理识别结果:获取到二维码信息后,根据需求进行下一步操作。 由于AutoJS自身不包含完整的二维码识别...

    ie常见问题

    对于`ul`列表,Firefox默认有padding值,而IE只有margin值。统一设置`ul{margin:0;padding:0;}`可以消除差异。浮动元素的处理也需要注意,未闭合的浮动div在FF中会导致问题,需要添加`.clear{clear:both;}`进行清理...

    DIV+CSS网页布局技巧实例

    `margin` 属性用于设置外边距,`0 auto` 表示上下外边距为0,左右外边距自动分配,从而实现了水平居中。 - `text-align: center;` 这一行代码主要用于兼容老版本的IE浏览器(IE6及以下版本)。这些浏览器无法正确...

    css 盒子模型彻底解析

    外边距可以设置为自动(auto),使浏览器自动分配空间,或者设定具体的像素值。 在CSS中,元素的总宽度和总高度是由内容区域的宽高、内边距、边框和外边距共同决定的。这种计算方式在不同浏览器间可能有所差异,有...

Global site tag (gtag.js) - Google Analytics