先上图

  由图可看到,块级元素的水平方向上又“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. 设计模式《JAVA与模式》之调停者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述调停者(Mediator)模式的: 调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从 ...

  2. Selenium3 + Python3自动化测试系列五——常用断言Assertion

    断言Assertion 验证应用程序的状态是否同所期望的一致. 常见的断言包括:验证页面内容,如标题是否为X或当前位置是否正确,或是验证该复选框是否被勾选. selenium 提供了三种模式的断言:a ...

  3. Docker三剑客之Docker Swarm

    一.什么是Docker Swarm Swarm是Docker公司推出的用来管理docker集群的平台,几乎全部用GO语言来完成的开发的,代码开源在https://github.com/docker/s ...

  4. SpaceSyntax【空间句法】之DepthMapX学习:第四篇 凸多边形图分析[未完]

    这一篇正式讲解分析类型中的第一个,凸多边形分析,流程图参照上一篇的. 博客园/B站/知乎/CSDN @秋意正寒(我觉得这一篇肯定很多盗图的,那么我在版头加个本篇地址吧) https://www.cnb ...

  5. opencv2函数学习之erode、dilate:图像腐蚀和膨胀

    图像腐蚀和图像膨胀是图像中两种最基本形态学操作. ,-), ,int borderType=BORDER_CONSTANT, const Scalar& borderValue=morphol ...

  6. 微信小程序(wx:for)遍历对象

    最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...

  7. 全网最详细的Sublime Text 3的插件官方网站(图文详解)

    不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...

  8. text_edit 未定义解决

    找到文件:admin\controller\setting $data['heading_title'] = $this->language->get('heading_title'); ...

  9. js获取上一个兄弟元素

    需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) pr ...

  10. MySQL的视图view,视图创建后,会随着表的改变而自动改变数据

    首先是创建视图 CREATE ALGORITHM=UNDEFINED DEFINER=`root`@`localhost` SQL SECURITY DEFINER VIEW `new_view` A ...