zoukankan      html  css  js  c++  java
  • 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响。

    这是个常见问题,而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题,IE下反而表现良好。

    例如:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style type="text/css">
             body,html{
               background:green;
             }
    7 #box{ 8 width: 400px; 9 height: 400px; 10 background: red; 11 } 12 #main{ 13 width: 100px; 14 height: 100px; 15 background: yellow; 16 margin: 50px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="box"> 22 <div id="main"> 23 24 </div> 25 </div> 26 </body> 27 </html>

    为了清楚,我这里将body背景色改为绿色,我们会发现,父元素被改变了,虽然并没有在数值上做出改变,但是样式确实是发生了变化,那么我们进行如下操作进行消除子元素对于父元素的影响。

    对父元素增加CSS代码:

    overflow:hidden;

    怎么会出现这个问题呢?我也是在网上看了好多,挑选了一个我觉得说的而比较靠谱的原因。

    “这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。”

    说的白话一点就是,如果你什么都没有进行操作的话,子元素文本节点会对上级“找麻烦”;所以,对父元素增加代码overflow:hidden。

    文章部分来自http://blog.csdn.net/u012011360/article/details/41823125

  • 相关阅读:
    python 统计gitlab代码量
    whistle 模拟用户网络超时
    Node.js 快速转换 url 链接
    实用的 Git 命令
    前端常用 prettier 配置 + vetur 配置
    vue 项目 eslint + prettier 配置
    lodash 方法 debounce 防连点 防抖按钮点击
    npm 包实现自动登录 CICD 流程
    git push --follow-tags 命令
    小程序 iOS webview 中网页使用 iframe 无法滚动问题
  • 原文地址:https://www.cnblogs.com/lucio110/p/7368084.html
Copyright © 2011-2022 走看看