子元素设置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. nyoj_42_一笔画问题_201403181935

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...

  2. hdu_1040_As Easy As A+B_201308191751

    As Easy As A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  3. [poj2417]Discrete Logging_BSGS

    Discrete Logging poj-2417 题目大意:求$a^x\equiv b(mod\qquad c)$ 注释:O(分块可过) 想法:介绍一种算法BSGS(Baby-Step Giant- ...

  4. html实现 省——市——区三级联动

    html实现  省——市——区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来, ...

  5. linux UID,GID,EUID,EGID,SUID,SGID

    SUID, SGID, sticky位可以参考: http://onlyzq.blog.51cto.com/1228/527247/ SUID属性只能运用在可执行文件上,当用户执行该执行文件时,会临时 ...

  6. 逆波兰法求解数学表达示（C++）

    主要是栈的应用,里面有两个函数deleteSpace(),stringToDouble()在我还有一篇博客其中:对string的一些扩展函数. 本程序仅仅是主要的功能实现,没有差错控制. #inclu ...

  7. jQuery Validation让验证变得如此easy(三)

    下面代码进行对jQuery Validation的简单演示包含必填项.字符长度,格式验证 一.引入文件 <script src="js/jquery-1.8.0.min.js" ...

  8. Python字符串转为字典方法大全

    方法一: 通过内置函数eval str_info = '{"name": "test", "age": 18}' dict_info = e ...

  9. luogu2828 [HEOI2016/TJOI2016]排序

    题目大意 给出一个1到n的全排列,现在对这个全排列序列进行m次局部排序,排序分为两种:(0,l,r)表示将区间[l,r]的数字升序排序:(1,l,r)表示将区间[l,r]的数字降序排序.最后询问第q位 ...

  10. 弹出框中选项卡的运用（easyUI）

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...