margin重叠现象与margin auto自适应居中
上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值;而浮动的盒子边距是相加的;父子div也会发生重叠,并不是bug;
<style>
#test1{
width:1000px;
height:100px;
background:blue;
margin-bottom:50px;
}
#test2{
width:1000px;
height:100px;
background:green;
margin-top:20px;
}
</style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
</body>
自适应居中,不管屏幕有多大,它都会居中。
<style>
div{
width:300px;
height:300px;
background:gray;
margin:0px auto;
/*border:30px solid blue;
padding:30px;
margin:30px;*/
}
</style>
</head>
<body>
<div>
有一首诗最为动人,那就是青春;有一段人生最美丽
</div>
margin重叠现象与margin auto自适应居中的更多相关文章
- margin重叠现象
1.上下/左右相邻的普通元素margin,不是两者相加之和,而是取最大值,这个现象叫做margin重叠. 2. 普通元素才会发生margin重叠,如果是float元素,就不会发生.margin是两者相 ...
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...
- IE下div使用margin:0px auto不居中的原因
IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...
- margin的重叠现象
当两个相邻的普通元素设置margin时,则它们的间距并不是简单的外边距相加. <!DOCTYPE html> <html lang="en"> <he ...
- 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- IE8 margin:0 auto 不能居中显示的问题
ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
随机推荐
- mysql 常用语句
1,查看索引使用情况的语句: explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explai ...
- netfilter的钩子——数据包在内核态得捕获、修改和转发
转发:http://blog.csdn.net/stonesharp/article/details/27091391 数据包在内核态得捕获.修改和转发(基于 netfilter) 忙活了好几天 ...
- ubuntu wifi连接不上或经常断网,重启就好
问题1.知道wifi密码,驱动也有,可以点击连接,总是提示"连接断开,您现在处于离线状态". 1.打开终端"ctrl+alt+T" 2.输入: sudo vim ...
- 神经网络及其PID控制
一.人工神经元模型 1.突触权值(连接权) 每一个突触都由其权值作为特征表征,各个神经元之间的连接强度由突触权值来表示.与神经元相连的突触上,连接的输入信号通过权值的加权进入神经元的求和单元. 2.求 ...
- alias实现命令别名
需要经常进入/srv/www/app/account这个目录,每次都得重复的输入这一长串路径进入该目录,显得麻烦而费时,因此可以将"cd /srv/www/app/account" ...
- 分享Kali Linux 2016.2第50周镜像文件
分享Kali Linux 2016.2第50周镜像文件Kali Linux官方于12月11日发布Kali Linux 2016.2的第50周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...
- NOIP2009多项式输出(水)【A004】
[A004]潜伏者[难度A]—————————————————————————————————————————————————————————————————————————— [题目要求] 一元 n ...
- JS里面的两种运动函数
最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...
- BZOJ2527: [Poi2011]Meteors
补一发题解.. 整体二分这个东西,一开始感觉复杂度不是很靠谱的样子 问了po姐姐,说套主定理硬干.. #include<bits/stdc++.h> #define ll long lon ...
- Java实现验证码制作之一自己动手
以前弄验证码都是现找现用,下面是自己跟着敲代码弄好的,记录一下,分享给大家. 我这里用的是Servlet ,Servlet代码如下 import java.awt.Color;import java. ...