子元素设置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. [luogu2209][USACO13]燃油经济性Fuel Economy_贪心

    燃油经济性Fuel Economy 题目大意:FJ想要去旅行.他的车总容量为G,每行驶一个单位就消耗一个单位的油.FJ要行驶D个单位的距离.期间存在n个加油站,每个加油站有一个价格,表示在这个燃油站买 ...

  2. MFS搭建

    MooseFS是一个分布式存储的框架,其具有如下特性:     1.Free(GPL)     2.通用文件系统,不需要修改上层应用就可以使用     3.可以在线扩容,体系架构可伸缩性极强.     ...

  3. MyBatis 3实现时间段精确的查询（转）

    效果如下: 说明: 时间范围的查询会存在以下问题: 1.如果单纯采用年月日的形式会出现缺少最后一点的数据,比如要查询2015-09-16到2015-09-17,那么2015-09-17 01:00:0 ...

  4. N天学习一个linux命令之ping

    用途 检测主机是否可到达,也就是说,目标主机是否可以联网,还可以用于检测网速.通过发送ICMP ECHO_REQUEST数据包检测. 用法 ping [options] destination 常用选 ...

  5. 在centos7上安装DSPC

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  6. JavaScript的代码库

    JavaScript的代码库 本文主要是汇集了一些JavaScript中一些经常使用代码.方便以后查找和复用. javascript框架: <script language="java ...

  7. Struts2—Action

    二.命名空间namespace ·命名空间namespace须要放在相应的package下 ·Namespace必须以"/开头". ·Result的name是"succe ...

  8. $().attr()的使用方法 &amp;&amp; $().html()与$().text()的差别

    <1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...

  9. [LeetCode][Java] Minimum Depth of Binary Tree

    题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...

  10. BAPC2014 B&amp;&amp;HUNNU11582:Button Bashing(BFS)

    题意: 给出n,m,代表微波炉有n个button,要求达到总时间为m 然后给出n个数.代表n个button能添加的时间,问最少几步,可以使得按出的总时间大于等于要求的时间,而且相差最小 输出最小的步数 ...