含义

margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小

填充规则

(1) 如果一侧定值,一侧auto,则auto为剩余空间大小

(2) 如果两侧均是auto,则平分剩余空间

<style>
.father {
width: 300px;
background-color: #f0f3f9;
}
.son {
width: 200px;
height: 120px;
margin-right: 80px;
margin-left: auto;
background-color: #cd0000;
}
</style> <div class="father">
<div class="son"></div>
</div>

左边距是20px,右边距是80px。这里son宽度是200px,容器是300px,总剩余空间大小是100px,其中margin-right使用了80px,那么margin-left的‘auto’计算值就是剩余的20px了

margin-left:auto代替float:right实现右对齐

.father {
width: 300px;
background-color: #f0f3f9;
}
.son {
width: 200px;
height: 120px;
margin-left: auto;
background-color: #cd0000;
} <div class="father">
<div class="son"></div>
</div>

magin:atuo配合绝对定位实现水平和垂直方向居中

.father {
width: 300px;
height: 150px;
background-color: #f0f3f9;
position: relative;
} .son {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 100px;
background-color: #cd0000;
margin: auto;
} <div class="father">
<div class="son"></div>
</div>

原文链接:https://www.cnblogs.com/raind/p/10726591.html

margin:auto你真的理解么的更多相关文章

  1. margin:auto你真的理解么?

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

  2. 您真的理解了SQLSERVER的日志链了吗?

    您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...

  3. 【转】你真的理解Python中MRO算法吗?

    你真的理解Python中MRO算法吗? MRO(Method Resolution Order):方法解析顺序. Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多 ...

  4. 对于C#中的一些点滴你真的理解了吗?

    废话不多说看题目,看看我们自己真的理解了吗? 1.如下代码输出的结果是什么? public class A{ public virtual void Func(int  number=10) { Co ...

  5. Android菜鸟的成长笔记(4)——你真的理解了吗?

    原文:Android菜鸟的成长笔记(4)--你真的理解了吗? 在上一篇中我们查看了QQ的apk源文件中的布局结构,并仿照QQ完成了我们第一个应用的界面,详细请看<Android菜鸟的成长笔记&g ...

  6. table居中方法之一:设置width,然后为style设置margin:auto

    比如: <table width="800px" style="margin:auto;">

  7. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

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

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

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

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

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

随机推荐

  1. 计算机网络--TCP协议深入理解

    在近期学习计算机网络的过程中,由于知识点过于零散,琐碎,从而学习起来痛苦不堪,此贴只是总结了基于传输层的TCP协议相关的知识细节,并加入一点自己的理解,并无创新,若有理解不当之处,敬请提出,感谢! 首 ...

  2. docker 实践十一:docker 跨主机通讯

    在上一篇了解了关于 docker 的网络模型后,本篇就基于上一篇的基础来实现 docker 的跨主机通信. 注:环境为 CentOS7,docker 19.03. 本篇会尝试使用几种不同的方式来实现跨 ...

  3. Python开发【第二章】:模块和运算符

    一.模块初识: Python有大量的模块,从而使得开发Python程序非常简洁.类库有包括三中: Python内部提供的模块 业内开源的模块 程序员自己开发的模块 1.Python内部提供一个 sys ...

  4. Docker 学习笔记(四):问题日志

    一.Docker-Compose 容器组开机重启失败 Docker-Compose 的 depends_on 参数在 docker 中没有对应. 重启电脑后,容器的重启过程只由 docker 控制,而 ...

  5. Docker 学习笔记(一):基础命令

    仅为个人查阅使用,要学习 Docker 的话,推荐看这份文档:<Docker - 从入门到实践> P.S. 大多数的 docker container xxx/docker image x ...

  6. Vue $emit $event 传值(子to父)

    事件名 始终使用 kebab-case 的事件名. 通过事件向父组件发送信息 子组件中EnFontsize.vue中$emit <button @click="$emit('enlar ...

  7. jqgrid属性以及事件

    转载 1.属性 参数名称 类型 描述 默认值 是否可以被修改 ajaxGridOptions object 对ajax参数进行全局设置,可以覆盖ajax事件:error,complete 和 befo ...

  8. MySQL 体系结构及存储引擎

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  9. windowsAPI创建句柄失败的返回值

    创建句柄的api返回值 INVALID_HANDLE_VALUE CreateFile CreateNamedPipe CreateToolhelp32Snapshot FilterConnectCo ...

  10. [转]Entity Framework 异常: 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效

    https://blog.csdn.net/weixin_34321977/article/details/85850064 在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以 ...