先上图

  由图可看到，块级元素的水平方向上又“7大属性”：margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。这些属性中，只有3个属性可以设置为auto，分别为：margin-left、width和margin-right。

在讨论之前，首先记住两条原则：

  1）这7大属性的值总和=父元素的width；

  2）属性间冲突时，优先级：width>margin-left>margin-right。

元素的属性width和margin的不同组合情况分如下4种情况：

(1) (2) (3) (4)
width 定值 定值 auto auto
margin 定值 auto 定值 auto

（1）width= 定值，margin=定值

  此种情况即为width、margin-left、margin-right均为定值，为过分受限，根据原则2，此时总会把margin-right强制为auto。
  也就是说，为了达到原则1，margin-right会根据情况调整，使元素的总宽度等于其包含快的width。

（2）width= 定值，margin=auto

  * width= 定值，margin-left = mergin-right = auto，此时margin-left与margin-right会设置为相等的长度，因此元素会在父元素中居中
  * width= 定值，margin-left和mergin-right中一个为定值、一个为auto，则为auto的属性根据原则1，自动调整。

（3）width= auto，margin=定值
  * marin-left + margin-right < 父元素宽度，则width根据原则1设置为某个值
  * marin-left + margin-right >= 父元素宽度，则width为0

（4）width= auto，margin=auto

  * width、margin-left、mergin-right均为auto，这就是默认的情况，此时两个外边距会设置为0，width会尽可能宽以达到原则1。
  * width = auto，margin-left和mergin-right中一个为定值、一个为auto，此时，根据原则2，width为占用剩下的所有宽度，为auto的margin的值为0。

以上是针对块级元素，对于非块级元素（内联元素和替换元素）：

  * 只要设置为display:block，除了元素的宽度为内容的固有宽度这一点，其他表现与块级元素表现一致。
  * 如果不设置display:block， 则width为内容的固有宽度，水平方向margin可以设定为固定值，但设置为auto会表现为0；

水平方向margin：auto的更多相关文章

  1. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  2. 小tip: margin:auto实现绝对定位元素的水平垂直居中

    转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...

  3. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  4. margin:auto你真的理解么？

    含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...

  5. margin auto 实现居中，与text-align:center的区别

    本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...

  6. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  7. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  8. margin:auto你真的理解么

    含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...

  9. html5水平方向重力感应

    html5图片随手机重力感应而移动 <!DOCTYPE html> <html lang="zh-cn"><head><meta http ...

随机推荐

  1. python iter函数用法

    iter函数用法简述 Python 3中关于iter(object[, sentinel)]方法有两个参数. 使用iter(object)这种形式比较常见. iter(object, sentinel ...

  2. 【xsy2815】净空 大暴力

    绝了场上居然没做这一题 题目大意:给你一个数$x=\Pi_{i=1}^{n}a_i!$. 你需要将x表示为$x=\Pi_{i=1}^{m}(c_i!)^{d_i}p$ 满足$p$无法再分解,且$(c_ ...

  3. 二、LINQ之查询表达式基础

    1.查询是什么? 查询是一组指令,描述要从给定数据源(或源)检索的数据以及返回的数据应具有的形状和组织.查询表达式和它所产生的结果不同.

  4. 【原创】贡献一个项目中用到的js身份证验证-超级准！！！

    前言 百度百科解释:身份证号码 首先贡献一个大神的链接:js验证身份证超准 代码 function checkIdcard(idcard) { var Errors = new Array( &quo ...

  5. C#基础篇七类和静态成员

    1.new关键字做的4个事情 1.1 开辟堆空间 a.开辟多大的空间呢? 当前类 所有的 成员变量类型所占空间的总和 + 类型指针(方法表的地址) b.开辟了空间干什么用呢? 存放 成员变量 1.2 ...

  6. TensorFlow object detection API应用--配置

    目标检测在图形识别的基础上有了更进一步的应用,但是代码也更加繁琐,TensorFlow专门为此开设了一个object detection API,接下来看看怎么使用它. object detectio ...

  7. 目标检测技术演进：R-CNN、Fast R-CNN、Faster R-CNN

    看到一篇循序渐进讲R-CNN.Fast R-CNN.Faster R-CNN演进的博文,写得非常好,摘入于此,方便查找和阅读. object detection,就是在给定的图片中精确找到物体所在位置 ...

  8. Spring Actuator源码分析（转）

    转自:http://blog.csdn.net/wsscy2004/article/details/50166333 Actuator Endpoint Actuator模块通过Endpoint暴露一 ...

  9. WPF中的Visual Tree和Logical Tree与路由事件

    1.Visual Tree和Logical TreeLogical Tree:逻辑树,WPF中用户界面有一个对象树构建而成,这棵树叫做逻辑树,元素的声明分层结构形成了所谓的逻辑树!!Visual Tr ...

  10. 【React 资料备份】React Hook

    Hooks是React16.8一个新增项,是我们可以不用创建class组件就能使用状态和其他React特性 准备工作 升级react.react-dom npm i react react-dom - ...