css margin边界叠加问题详谈
问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值
一、代码展示
HTML
<body>
<div class="box">
<div class="content" id="content"></div>
</div>
</body>
CSS
div,body{
padding:;
margin:;
}
body{
background-color: darkgrey;
}
.box{
width: 400px;
height: 400px;
margin: 30px auto;
background-color: palegreen;
}
.content {
width: 50%;
height: 50%;
margin-top: 70px;
background-color: tomato;
}
展示图
理想中
实际上
原因
1、当一个元素包含在另一个元素中时(如果没有填充或者边框将边界隔开),他们的顶边界或者底边界会发生叠加
详细相关知识请看 http://blog.csdn.net/weisuochengxuyuan/article/details/17379517
这时或者有的小伙伴会问:那个父元素的30px的margin-top值呢加起来应该是100px?
其实呢,父元素盒子元素的margin-top值是重叠了的,就是谁高谁顶着(有一种天塌下来高个儿顶着的感觉~)
解决方法:只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。
1、给父元素设置padding-top:1px;(使边界不叠加);
2、给父元素一个边框border值;
3、为父元素添加over-flow:hidden;
4、使父元素或子元素浮动float:left;
5、为父元素添加position:absolute
6、为父元素或子元素添加display:inline-block;
以上可灵活处理,亲测有效哦~
css margin边界叠加问题详谈的更多相关文章
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- css margin
css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- CSS控制边界、边框与外轮廓
一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...
- CSS外边距叠加问题
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- CSS——margin
CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...
随机推荐
- webpack4.0入门以及使用
1. 安装webpack 先新建一个文件夹(demos),然后 npm init -y 新建一个package.json然后在当前目录执行webpack命令 webpack 模块未发现或者未找到src ...
- 安卓自己定义View进阶-Canvas之绘制基本形状
Canvas之绘制基本形状 作者微博: @GcsSloop [本系列相关文章] 在上一篇自己定义View分类与流程中我们了解自己定义View相关的基本知识,只是,这些东西依然还是理论,并不能拿来(zh ...
- flex中dispatchEvent的用法(自定义事件) .
Evevt和EventDispatcher类在as3的事件机制中是很重要的角色,dispatchEvent()是EventDispatcher类的一个事件发送方法,它可以发送出Event类或其子类的实 ...
- MongoDB与MySQL的插入性能测试【转】
1.1 MongoDB的简单介绍 在当今的数据库市场上,MySQL无疑是占有一席之地的.作为一个开源的关系型数据库,MySQL被大量应用在各大网站后台中,承担着信息存储的重要作用.2009年,甲骨文 ...
- Python爬取韩寒所有新浪博客
接上一篇,我们依据第一页的链接爬取了第一页的博客,我们不难发现,每一页的链接就仅仅有一处不同(页码序号),我们仅仅要在上一篇的代码外面加一个循环,这样就能够爬取全部博客分页的博文.也就是全部博文了. ...
- HashTable源代码剖析
<span style="font-size:14px;font-weight: normal;">public class Hashtable<K,V> ...
- [Python-MATLAB] 在Python中调用MATLAB的API
可以参考官方的说明文档: http://cn.mathworks.com/help/matlab/matlab_external/get-started-with-matlab-engine-for- ...
- v-on指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PostgreSQL源码解读 基础结构 node
一.node节点的定义 源代码路径postgresql-9.2.3/src/include/nodes/nodes.h 在查询解析SQL的查询部分,要用到大量的结构体,许多函数处理的逻辑类似,就是传入 ...
- Liunx之Lamp搭建笔记
1:LAMP源代码搭建用户关系 a. apache服务以daemon用户的处理请求.以root身份作为主进程. b. php源代码安装,会在httpd.conf文件里自己主动增加调用模块.可是在该文 ...