margin:auto你真的理解么
含义
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你真的理解么的更多相关文章
- margin:auto你真的理解么?
含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...
- 您真的理解了SQLSERVER的日志链了吗?
您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...
- 【转】你真的理解Python中MRO算法吗?
你真的理解Python中MRO算法吗? MRO(Method Resolution Order):方法解析顺序. Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多 ...
- 对于C#中的一些点滴你真的理解了吗?
废话不多说看题目,看看我们自己真的理解了吗? 1.如下代码输出的结果是什么? public class A{ public virtual void Func(int number=10) { Co ...
- Android菜鸟的成长笔记(4)——你真的理解了吗?
原文:Android菜鸟的成长笔记(4)--你真的理解了吗? 在上一篇中我们查看了QQ的apk源文件中的布局结构,并仿照QQ完成了我们第一个应用的界面,详细请看<Android菜鸟的成长笔记&g ...
- table居中方法之一:设置width,然后为style设置margin:auto
比如: <table width="800px" style="margin:auto;">
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...
- 小tip: margin:auto实现绝对定位元素的水平垂直居中
转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...
随机推荐
- linux终端提示符修改
Linux主机名莫名其妙的由@myhostname变成了@bogon了之后 1.在linux下添加一个127.0.0.2名叫bogon的主机此方法使用后,bogon主机名得以解析,使用的主机名仍为bo ...
- 【并发】9、借助redis 实现生产消费,消息订阅发布模式队列
这个就是一个消息可以被多次消费的范例了 其实这个实现的方式可以参考我之前的设计模式,观察者模式 https://www.cnblogs.com/cutter-point/p/5249780.html ...
- idea 控制台 彩色打印日志
IDEA右上角:Edit Configurations,点击,找到VM options,填入-Dspring.output.ansi.enabled=ALWAYS. 重新启动应用,就会发现控制台日志变 ...
- Spring Cloud Alibaba学习笔记(10) - Spring消息编程模型下,使用RocketMQ收发消息
编写生产者 集成 添加依赖 <dependency> <groupId>org.apache.rocketmq</groupId> <artifactId&g ...
- axios 发 post 请求,后端接收不到参数的解决方案(转载)
原文地址:https://www.cnblogs.com/yiyi17/p/9409249.html 问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: ...
- VBA for循环
for循环是一种重复控制结构,它允许开发人员有效地编写需要执行特定次数的循环. 语法 以下是VBA中for循环的语法. For counter = start To end [Step stepcou ...
- 预编译And作用域链
首先要理解什么是预编译: 预编译就是在JS执行前的一瞬间创建一个AO对象,这个创建AO的过程叫做预编译. console.log(a) var a = 1; function c(b){ b = 10 ...
- linux管道和重定向
管道 管道应该是等左边的程序执行完,才使用左边的程序的输出执行右边的程序. 但是在测试的时候,如果左边的程序无限循环且不等待的输出,那么左边的程序执行时右边的程序也会执行,个人感觉这是linux的机制 ...
- linux USB 编程
Linux USB架构 可以看出一个USB体系需要4个驱动:USB设备驱动(主要编写这部分),USB主控制器驱动,Gadget驱动,UDC驱动. USB主要有4个功能: MassStorage:大容量 ...
- array_map 去除数组参数里面左右两端空格
<?php class Test{ public function trimArray($params){ if (!is_array($params)) return trim($params ...