子元素设置margin-top，父元素也受影响

解决办法：给父元素加个padding或border或overflow:hidden或父元素加前置内容生成

CSS中盒模型的理解

子元素设置margin-top作用到了父元素的更多相关文章

  1. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  3. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  4. css 给inline和inline-block元素设置margin和padding

    经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...

  5. 关于IE处理margin和padding值超出父元素高度的问题

    两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...

  6. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  7. 元素设置float属性后，其后面的元素的位置问题

    分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00 ...

  8. jQuery获取元素上一个、下一个、父元素、子元素

    jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  9. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

随机推荐

  1. MySQL5.7出现无法启动服务等问题

    MySQL5.7版本后有点不同,就是没有DATA文件夹.总是莫名其妙出现一些错误.比如连不上数据库了,出现错误 can't connect mysql on localhost,键入 net star ...

  2. [vagrant]第一次安装添加box出现问题汇总

    1.本地文件要加全文件名和协议file:/// 2.The box failed to unpackage properly. Please verify that the box file you' ...

  3. Clojure：通过ZeroMQ推送消息

    通过ZeroMQ的pub/sub模式,我们可以实现发送推送消息的功能.以下为示例代码(入门可参考此文:http://www.cnblogs.com/ilovewindy/p/3984269.html) ...

  4. Clojure：将两个list合并成一个map

    假设我们有两个list,分别是: (def a [“one” “two” “three”]) (def b [1 2 3]) 我们要把它们合为一个键值对应的map,做法很简单: 1. 先将a和b合为一 ...

  5. oracle 学习笔记之触发器

    说明 数据库触发器是一个与表相关联的.存储的PL/SQL程序. 每当一个特定的数据操作语句(Insert,update,delete)在指定的表上发出时,Oracle自己主动地运行触发器中定义的语句序 ...

  6. 初识ASP.NET---一般处理程序

    问题来源: 今天在敲一个小的demo,利用Jquery实现级联下拉框,敲的过程中发现不管怎么和源代码对比都无法显示想要的功能. 这才想着原来是没有写后台代码,询问一清同学的时候,他告诉我能够利用ASP ...

  7. ExtJs4.1布局具体解释

    Border布局: Ext.onReady(function(){     Ext.QuickTips.init();     Ext.create('Ext.container.Viewport', ...

  8. 571B. Minimization(Codeforces Round #317)

    B. Minimization time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. luogu2149 [SDOI2009] Dlaxia的路线

    题目大意 在一个无向图中,定义两个点s,t的最短路径子图为一个极大边集,对于该边集内的所有有向边e,总存在一条起点为s,终点为t且经过边e的路径,使得该路径长度为s到t的最短路径长度.现给出一个无向图 ...

  10. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...