margin上外边距溢出问题

问题:当为div 的第一个子元素设置margin-top时,会作用到父元素身上。
解决:
1:为父元素设置上边距。border-top:1px solid #ddd;(弊端:父元素高度变化。不提倡)
2:为父元素设置内边距取代外边距。(弊端:父元素高度改变。不提倡)
3:在子元素div前增加空的<table><table/>元素,(提倡)
4:通过伪类选择器动态创建table:

  <style>
    .farther{
      width:200px;
      height:200px;
      background: blue;
    }
    .child{
      width: 100px;
      height:100px;
      background: pink;
      margin-top:50px;
    }
    .farther::before{
    //在父元素的第一个子元素创建table.。
      content: "";
      display: table;
    }
  </style>

  <div class="farther">
    <div class="child"></div>
  </div>
发布了42 篇原创文章 · 获赞 7 · 访问量 3992
展开阅读全文

<div>宽度设置为100%,设置属性margin-left和margin-right时出现问题

03-02

在一个父容器内包含三个子容器,设置效果为左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化。 ``` <div id="A3"> <div id="DIV-A2"></div> <div id="DIV-C2"></div> <div id="DIV-B2"></div> </div> ``` ``` #A3{ margin-top:10px; } #DIV-A2{ width:50px; background-color:red; height:30px; float:left;/*设置浮也已经脱离文档流*/ } #DIV-C2{ width:50px; background-color:red; height:30px; float:right;/*设置浮也已经脱离文档流*/ } #DIV-B2{ background-color:blue; width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/ height:30px; } ``` ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447173_548044.png) 设置margin-left后变成这个样子,本想着把margin-right设置出来应该就会恢复原样。 ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447215_24263.png) 但发现这时候的margin-right的值无论多大都没有作用。 ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447249_259174.png) 注释掉left单独设置right,中间区域恢复原样,但是margin-right的值任然不起作用。 单独写了个demo发现在宽度设置为百分比的时候margin-right的值不会起作用, ``` <div id="A4"></div> #A4{ margin-top:10px; background-color:blue; width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/ height:30px; margin-right:200px; } ``` ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447288_941758.png) 由上图可见右边距没有发生任何变化,此时margin-right的值已经到200px了。这是为何? 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览