css margin

时间:2022-08-20 06:56:18

css中margin边界叠加问题:

  看个同方向和异方向margin重叠现象:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { background-color:#CFC}
.outer{ margin: 30px; width: 300px; background-color:#669; }
.inner1{ margin: 30px; padding: 8px; background-color:#3CF; color: white;}
.inner2{ margin: 30px; padding: 8px; background-color:#96F; color: white; }
</style>
</head> <body>
<div class="outer">
<div class="inner1">margin1</div>
<div class="inner2">margin2</div>
</div>
</body>
</html>

效果为:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACqCAYAAACwPsT/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAmeSURBVHhe7dyNkds2FEXh7Sk9bU9uwWlle2ApymhjTTgMfwCTAnDpLxnNOGtKRM577+AKkv0xTdPDAwM9oAf0QG4PfChebvHUTu30gB549gCRe0fiHZke0APhPUDk4QWUyCQyPaAHvkX+8+ffHhjoAT2gB0J74FvkX/5FAAEEEIglQOSxpbP9IoAAAv8SIHIiRwABBMIJEHl4ASUSBBBAgMiJHAEEEAgnQOThBZRFEEAAASIncgQQQCCcAJGHF1AWQQABBIicyBFAAIFwAkQeXkBZBAEEECByIkcAAQTCCRB5eAFlEQQQQIDIiRwBBBAIJ0Dk4QWURRBAAAEiJ3IEEEAgnACRhxdQFkEAAQSInMgRQACBcAJEHl5AWQQBBBAgciJHAAEEwgkQeXgBZREEEECAyIkcAQQQCCdA5OEFlEUQQAABIidyBBBAIJwAkYcXUBZBAAEEiJzIEUAAgXACRB5eQFkEAQQQIHIiRwABBMIJEHl4AWURBBBAgMiJHAEEEAgnQOThBZRFEEAAgaFF/vn549Hj8dfX4+GBgR7I7IEeznjes+d2QuQrm4UBzhxgdVO3Zw8Qedc95f/7Wa+CEAIh6IHcHujlDYl8YwPpVRBDnDvEaqd2vbxB5ETuTN7nEnrgoh4gckcr3+drUp1Upwdye4DIiZzIL0pFRJgrwvTaETmREzmRe0cW3gNETuREHj7E6WnS+s+/kyFyIidyIpfIw3uAyImcyMOHWKI9n2jTGRI5kRM5kUvk4T1A5EQeJfLHr3/OJKjnS5x5vufiN1oPEDmR/zEif20CRE7Eo4n47HqInMijRH624Z/PJ3Iiv6KPRnoNIidyIg8/Hx1JKNbSZ5MkciIvEvn8WGL56/nwbv3e8lhj65hj7T6v1987GpmfnR8doUjkfWRD8u/jTuREXiTy5ZHEXIavX68Jcvmz5YeVa68zF/fa8G+JeO2D0JI1Ecz7BINtG7ZETuSXiXwtOa+JfGu4S6/dE/nytYm8jUgIuy9nIifyS0V+JOOjY42jY5G9DytLpX20BlLqKyX86/kTOZFfJvISke5JtFSwEnn9oJPjvZkROZEPI/JX2j5K5UR+bynZdOrrS+REXiTyrW+drH0IuvbNk71vo+x9uLn8MHT5OnvfaNla89FGQST1IsGsLzMiJ/IikbcY1JKjmRbrcI++UsK/nj+RE/kwIi89WjHo9YOO2b2ZETmRDyVywrm3cNT3PfUlciIncn9E398GGd4DRE7kRB4+xFLue1JuElciJ3IiJ3KJPLwHiJzIiTx8iJOSo7W+590DkRM5kRO5RB7eA0RO5EQePsRS7ntSbhJXIidyIidyiTy8B4icyIk8fIiTkqO1vufdA5ET+bfIPTDQA3qgtge+OvrzY5qmjrff/1+vBel6w6cH9ECvHiDyja2kV0Hclwz0gB6o7QEiJ3LHOY609EB4DxA5kRvi8CGuTW+uv1/iJ3IiJ3Ii1wPhPUDkRG6Iw4dYwr5fwq6tKZETOZETuR4I7wEiJ3JDHD7EtenN9fdL8ERO5ERO5HogvAeInMgNcfgQS9j3S9i1NSVyIidyItcD4T1A5ERui*Da9uf5+CZ7IiZzIiVwPhPcAkRO5IQ4fYgn7fgm7tqZETuRETuR6ILwHiJzIDXH4ENemN9ffL8ETOZETOZHrgfAeIHIiN8ThQyxh3y9h19aUyImcyIlcD4T3AJETuSEOH+La9Ob6+yV4IidyIidyPRDeA0RO5IY4fIgl7Psl7NqaEjmREzmR64HwHiByIjfE4UNcm95cf78ET+RETuRErgfCe4DIidwQhw+xhH2/hF1bUyInciIncj0Q3gNETuSGOHyIa9Ob6++X4ImcyImcyPVAeA8Q+WAi//H5eHhgoAcye6DXux0iJ3Ibh81TD1zUA0S+IdReO02vgkhimUlM3dTt2QO9vNHLk8/7fkzTNJi+/8PRqyCEQAh6ILcHenmDyB2teFt90dtqAs4V8FW1I/LBsnmvglzVUF6HVPRA+x7o5Q2JXCKXyCVyPXBRDxC5RP79QYkU1T5FYY75VT1A5ERO5BeloquG0usQfG0PEDmREzmRe0cW3gNETuREHj7EtenN9fdL/ERO5ERO5BJ5eA8QOZFHifzx65/fTZWv5599nd+9v+fdLw2PUFMiJ/I/RuRPeS+Hbu1nIwymNRB+TQ8QOZFHibymuUukTeSEeaanRnkukRM5kYefj44iE+votykSOZEXiXx5tjz/7/kAb51BL68vff48MW8953n/+Zn33nXLtZJPP/lgfx17IifyIpG/ZPkavqVgl7+/dt1SuHuvufV6Rz9fHpXsHZ04VrlOJKTclyWRE/llIp/Ley9xbw19qYS3BFzzYSaJ9xUP8V/Ln8iJ/FKRH8n4SKAlxyJnRX60BpK5VjJ4vp8nkRP5ZSIvScRXHHWcETmJv18qxN2eMZET+TAin5+hzz+8LPkaYckZfclGQ0LtJYT5eeZETuRFIt/61snaB5Z733A5+ubJnrTXXnftXH7rZ1vrIpLzIsGwL0MiJ/IikbcYVIm5rwxa1Ng93lNjIifyYUReerRCBu+RAa65XImcyIcSOZnkykTt+tWOyImcyP0RfX+NbXgPEDmRE3n4EEvC/ZLwKOyJnMiJnMgl8vAeIHIiJ/LwIR4lFVpHv3cGRE7kRE7kEnl4DxA5kRN5+BBLwv2S8CjsiZzIiZzIJfLwHiByIify8CEeJRVaR793BkQ+mMi/rAcBBBBA4JDAxzRNhxcRKgIIIIDAuASI3DaGAAIIhBMg8vACjpsRrAwBBFoRIHIiRwABBMIJEHl4AVvt+O6DAALjEiByIkcAAQTCCRB5eAHHzQhWhgACrQgQOZEjgAAC4QSIPLyArXZ890EAgXEJEDmRI4AAAuEEiDy8gONmBCtDAIFWBIicyBFAAIFwAkQeXsBWO777IIDAuASInMgRQACBcAJEHl7AcTOClSGAQCsCRE7kCCCAQDgBIg8vYKsd330QQGBcAkRO5AgggEA4ASIPL+C4GcHKEECgFQEiJ3IEEEAgnACRhxew1Y7vPgggMC4BIidyBBBAIJwAkYcXcNyMYGUIINCKAJETOQIIIBBOgMjDC9hqx3cfBBAYlwCREzkCCCAQToDIwws4bkawMgQQaEWAyIkcAQQQCCdA5OEFbLXjuw8CCIxLgMiJHAEEEAgnQOThBRw3I1gZAgi0IkDkRI4AAgiEEyDy8AK22vHdBwEExiVA5ESOAAIIhBMg8vACjpsRrAwBBFoRIHIiRwABBMIJ/AOstI8npZgQ+QAAAABJRU5ErkJggg==" alt="" />

            图1

这里inner1与outer的上边距重叠了,inner1的下边界与inner2的上边界重叠了,inner2的下边距与outer的下边距重叠了

参考这里的解决办法:margin边界重叠问题

只知道如何解决同方向margin重叠问题:

①给外部的div添加清除浮动相同的样式即可。常用的样式代码为:overflow:hidden; zoom:1;

 .outer{ margin: 30px;  width: 300px; background-color:#669;overflow:hidden; zoom:1}

效果将如下:

aaarticlea/png;base64,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" alt="" />

           图2

②增加些边缘属性。例如padding值,padding:1px;或是border属性,border:1px solid #cacbcc。

.outer{ margin: 30px;  width: 300px; background-color:#669;padding:1px;}

效果将如图2。

然后再认真滴看下这篇博客:CSS中margin边界叠加问题及解决方案

没看懂了.....

后续:在群里看到一个这样的问题

1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
#box{
width:300px;
height:300px;
background-color:#F00;
}
#box .center{
display:block;
width:50px;
height:50px;
margin:20px;
background-color:#3F6;
}
</style>
</head> <body>
<div id="box">
<div class="center"></div>
</div>
</body>
</html>

aaarticlea/png;base64,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" alt="" />

图5.1

效果如图5.1所示。

再看下改下这个#box .center{ display:inline-block; width:50px; height:50px; margin:20px; background-color:#3F6; }

效果将是如下:aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAAEyCAYAAACbGke8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABWGSURBVHhe7Z3nd1VVFsDzb6iz5sMsnbIGpIMiIk2K1NBCaAkJCT0JCb0ETEhPCKQnBBARVCxLpTcRpJcBC469juOoozNf59Oe+5wPs2Yt2Y8b35379rm/rJVPuTzO2ft3fnufc+97L2Vu4+syZFGdfPTdv/glBjAAA+YZSJnT8Lo8trBWDpy6yS8xgAEYMM9AymxPaoMX1omkpPBLDGAABmwwIHf+SZm5PSa1WhsTATjyBAMwEGNAk1r6ttMyaAFSo1OlU4cBQwyoUquPSa0G+9MBwAAM2GFAk9qMn6RGp0aVNlSlkY8d+QSVK01qaZ7UHsmlU0NqSA0GDDGgSW3a1lMyEKlR+YKqqLwubAXBgCa1qXWn5OEcOjWqtKEqHcQi4TVtyVeVmtepPYTUbCWUBUi+os6AJrXJXqeG1OhS6FRhwBQDmtRSa0/KADo1Kn/UKz/zt7UGNKlNqjkp/edX25oQAJIvGIg2A5rUJlSfkH7ZSM1U682CjvaCJv/626Qm1HhSo1NjkbBQYMASA1qnNt7r1PpmV5FQSwllrPAadQY0qY2rOo7Uog4I80eS1hjQpUanxnkajzPAgDEGNKmNrTwufbLYfgK1MaitdRaMN7HdsCa1MZ7UeiO1xAYcgIknDATLAFKjC6EThQGnGNCkNrriuPQKoFPrI7niwq9TINA9BNs9EN//X3w1qY2KSW1e4s/UXBBabA5IjQ4HBpKQAVVq5celJ1K7Y1cJ0EkINB0RxVaT2sjyY0hN2SojNaQGA0nIAFLr+vkeQCch0HRqdGqa1B73OrUe8yoTHiTO1JABBQEGAmNAk9qIspjUuFFwJwkHlhS6jYQXUnIVIYlqUhsek1omUkNqEVoQFBT7BSWe1B6kU+PuJwvd/kKPUg41qQ3zOjWkducbCWxp6OBgIAkZiNupZXKjgO1nEoIbpc6DufrrlNVObYvXqXGmxvaTReVvURGvcOMVb/vZHakhNRZpuIuU+PuLvya1oV6nhtQ4U+PciO23KQaQGu8oMAUsXYu/riWK8dKkNuSnTo0bBdwooFNB/IYYiCe1bhk8fIvUDAEdxc6EOf9v96pJ7bHSY4LUOFOjS0HqphhAapypmQKWroQztXgMcKMAqSE1OjGnGNAfvj3OIx18SCSdQbzOgL8nFyNqp+a997M7b2jn4VsWbXItWvKh50O9++l9SCRS40aBU1sThOC+oHWpedtPOjU6NUTgvghcyrEqtTKkpn30OB0MB+wwkIQMxJNaNzo1OjWXqjhzcb/rVJ9TKzvK9pO7n+4vAkTnVo6RGs+psYVKwi0Uou26aLn7idSQGlJzigH9TO2ocKbGIx1OAU8H1PUOyErsNKkN9h6+RWpIDanRyZliQO/UePiWRzpY0KYWtJVuKshxcqOAMzUWLeJ2igFValt4pINOjQXv1IIPskNKltdWz9Q8qXGmxpkaixqxm2JAl9oRT2p8RwEf582iNrWok6VjCmscqtRKj/DFK7yjwP1HAMJafPy/wbBFp8aNAroQOlGnGIgnte5sP3lDOx1FMB0FcQ0mrvr28zDbT7afwYDHgiauQTGgS+2QJ7WKhAdfe0zC0t+catmDAozXTfj6gbs4xwWa1B4tOSTdkBrbT8SEmCwxoHZqJYeRGttPFrSlBc1YFaV5KD9aSqfGOwq4M8h2zxgD+vbzoHTL4EyNh2+NQU23Eu3uGqnxnBqdCNJ2igH9TM3r1DLLE259S3c42X6y4J1a8FHoYvVHOpAaUkNqSM0YA+pHD3mPdHSnU+ORjihUd+aY8B1ZaMVAl1rsRgHbT24UGKvUCModQXUll/qHRB70vvcz8VILzeBdCRD/JtoLhPzby78qtdLXAtl+IjU6HxiAgcAYUL94ZYvXqQVwphbYZKiq9qoqOSNniWZA/zYp70YB20+gSzR0vB5MBcmAJrWh5YfkQaQGgEECyGvDV6IZ0KQ2rPywJ7XEv02K7SfnKTAAA4ExoElthNep9UBqVNJEV1JeD6aCZECT2uMVh6VnFp1aYBUlyMTy2ogjqgxoUhtZeVh6ZSM1pMZWCQYMMaBKreoIUotqtWPedHpWGdCkNgqpAbZVsBl3dNnVpDa6+qj0np/4b2inlTfUyiOH6MrBau41qY2pOSp9cpAaEkbCMGCIAU1qY2uPSd+cKiqV1YrFuGE3igwgNUMVKIqAMmfE7JcBTWrj645Lv1w6NbYeiB8GDDGgSW3C1hPSP7eaSuG3UnA9zMBAeAxoUptY70ltAVKjShuq0sgkPJkkS+w1qU3adlIGLKwhSMmSLMYBizAQnwFNaqnbT8pDSC1+EAGNGMFA8jCgSW1Kwyl5eBGdGttPtp8wYIgBTWrTGk/LwMW1yWNgqiG5gAEYiMeAJrXpTaflEaQGRPEg4u8wkkwMaFJLaz4jg5bUkbBkShhjgUcY0BnQpDajxZPaUqTGeYqh8xQWPNLXpJbe8oY8itSABFHAgCUGNKnNbD0rg5fWk1BLCWWs8Bp1BjSpzW4/K4/lITW2n2w/YcAQA5rU5rSfkyFIjcof9crP/G2tAU1qGR3nZChSs5VQFiD5ijoDmtQyd7wpQ/O3AUnUIWH+rAFLDGhSy9p5XoYXbCehlhLKWOE16gxoUsve5UltOVLjkNjQIXHUFzTzV5Tm1bucXRdkBFKj8rNQYMASA1qntmD3RRlZ2EBCLSWUscJr1BnQpLbwqYsyCqmxSKK+SJi/rTWgSW3R05dkVFGjrQkBIPmCgWgzoEltyTOXZcwKpMaNAm4UwIAhBjSpLd3nSW0lUgNoQ0DTpUW7S4vlX5Na/r4rMnZlE0FiocAADNhhQJNawf6rMm5Vs53JAB65ggEY0KS2/LlrMn41UmP7yfYTBgwxoEmt8PnrMn5NC+an+sMADNhhQJPaigPXZcJapEaVNlSlkY8d+QSVK01qKw/ckIlrWwlSUMHndWELBhLPgCa11S/ckElILfFBB2RiCgPBMaBJbe1LNyV1PZ0a20+2nzBgiAFNautevimT17cFZ1SqFbGFARhINAOa1NZ7UpuC1IAu0dDxejAVJAOa1Da8ckumbqBTY+thaOsR5GLhtW3IWJNa8au3ZNpGpIbUkBoMGGJAk9rmV9+S6RvbbdiZKkqeYAAG4r2hveTg2zJjUweBYrHAAAzYYUDr1LYcekfSkZqdZLLwyBUM6B89VH74XZm5mU6N8xRD5yksasSudWoVR27LrM07CBILBQZgwA4DmtSqjt6W2U922pkM4JErGIABTWo1x96TuSVIje0n208YMMSAJrW6E3+WzNKdmJ/qDwMwYIcBTWrbTr0v87bssjMZwCNXMAADmtQaTn8gWWVIja2Hoa0HUkNqmtSaznwg2eVIDakhNRgwxIAmtZY3PpScit2Yn+oPAzBghwFNam3nPpLcyqfsTAbwyBUMwIAmtY43P5YFVUiNrYehrQdSQ2qa1HZ4UluI1IAEUcCAJQY0qXWe/1gWVdOp0anRqcGAIQY0qe268Iksrt5DlbJUpRgrvEadAU1qey59KktrngaSqEPC/FkDlhjQpLb38meyrBapsfUwtPWwtPgYazDFQpPaviufSR5SCybwAE1cYSAYBjSp7b/6ueTX7Q3mPyahxBUGYCAIBjSpPXftCynYitTYfrL9hAFDDGhSO3D9Cymsf4ZqEkQ14TXhCgaCYUCT2os3vpSibUiNKm2oSiOKYERhKa6a1F6++ZWs2L6PIFlKKGOF16gzoEntlVtfySqkxiKJ+iJh/rbWgCa1V9/6C1IDaFtAky/ypUnttbe+ltUN+wkSCwUGYMAOA5rUDr3ztaxpRGrcKOBGAQwYYkCT2pF3/yprm561Y2iqKbmCARjQpHbs9jeyvhmpUaUNVWmkhtQ0qZ147xvZgNSABFHAgCUGdKn9zZPacyTUUkIZK7xGnQFNaqfe/1Y2tj4PJFGHhPmzBiwxoEnt9Q++lU1IDaAtAc1Y4VWT2hmkBiBIAgasMaBJ7Y0Pv5PNbWw/ufvJ3U8YMMSAJrWzH30nT7YjNYA2BLS1roLxJr4T1qT25sffS0n7gcT/pySSmMIADATFAFKjC6EThQGnGNCkduGT76W0g07NqYQHVR15XTqvZGFAk9qlT/8uZTteIFnJkizGAYswEJ8BTWqXP/sBqQFRfIiIETFKJgaQGucpbK9hwCkGNKld+fwHKWf7SRVOpirMWOAxHgOa1K5+/qNUdHKm5lQViwcEf0ca1hnQpHbtC09qO18kydaTzPhhOEoMaFK77kmtEqmxIKK0IJirfd51qf1Dqna+ZH+SgEoOYSA6DGhSu/ElUuM8jTuDMGCMAU1qN7/6p1TvolMDamNQ05VFpyv7uVzTqbFgkTYMOMWA/pzaj1Leyd1PpxJOFxPtLiYK+dekdtr7kMhiPiSSRRCFhcAc3eFck9rq125LanGnO5MFXHIJA+4zoEltRNMF6bmkwf0gADo5hgF3GNCkNqTxvHRftN2dyQIuuYQB9xnQpXZBui9Gatwo4O4gDBhiAKkZShZdhvtdBjn+5TlGakiNLgQGnGJAk9pQ70YB20+Adwp4OqFf3gklewx1qV1EasmeQMbn/iIlx/5yrEltWPNFeZAbBf4CCoDECwbCZUCT2vCY1JZw95PtF1twGDDEgCq1lsvSg4dvw606VH3iDwP+GIgrtaWN/l6QBBAvGICBMBlAaoba6jBB4f9GVFYYUN/72XpFetCpAbMVmBknrMYYUKXWFpNaE4FiscAADNhhQJPa4zGpLUNq3Pliiw4DhhjQpDay/ar0RGp2KhTdBLmCAX37ObLjmvTKawYUQIEBGLDDgNqpdVxHasBsB2ZyRa7i3SgYhdSABFHAgDUGtE7tP1JrIanWksp4YTbKDCA1Q3d1ogwqc0fUd8sAUkNqPK4AA04xgNQA2img77aac527nR9SQ2pIDQacYkCV2g5uFDiVbLoTd7sTcvvf3OpSuyG98rn7idjoZGDAEANIzVCyqMZ0WjAQnwFVap10alRopA8DxhjQpDY6JrWC1vhmpHoQIxiAgWRhAKkZq0LJAg7jQGLJykA8qfWmUwPeZIWXccHmzzGgS+1PgtTo5DhTggFTDCA1gDUFLN0Z3Vk8BlSp7aRTY8EjfRgwxgBSM5aweFWKv9PJRJ0Btp9IjU4EBpxiAKkBtFNAR71LYf76F6+M7uRMjQWP9GHAGAN0asYSRiXmzAwGdAaQGlKjE4EBpxjQpDaG7SddAV0BDFhjIJ7U+vA2KaC2BjXjjTazSI2th1NbD4QWbaHF8o/UkBpSgwGnGEBqAO0U0HRqdGpIDakhNRhwigFNak94b2jnRgHAOwU8nZz7nZzaqSE19wFgkZNj1xjQt583pC+PdAC9a9AzH7eZVref3hev9Cngez/ZfrEFhwFDDMSTWt+CZretTtUmvzDgFgOa1MZ2Xpe++UiNKm2oSiMotwTVlXxqUhvXeU365TcRpK4Eln8DNzAQDgOa1MbvuCr98xrDGRhAEHcYgIGuMKBL7QpS60pQ+TcsRhgIjwFNahM6LsuAvO3hDQ4wiD0MwIBfBjSpTey4JA8t20ZQ/QaV62EGBsJjQJNaavsFGbi0PrzBAQaxhwEY8MuAKrW2857U6giq36ByPczAQHgMaFKb3HpOHllSE97gAIPYwwAM+GVAk9rUljMyaHE1QfUbVK6HGRgIjwFNatObT8vgRVXhDQ4wiD0MwIBfBjSppTWdlCELKwiq36ByPczAQHgMaFJLbzwmQxeUhTc4wCD2MAADfhnQpDar4YgMyy0hqH6DyvUwAwPhMaBJbc62gzIiZ3N4gwMMYg8DMOCXAU1qmfWvyMjsYoLqN6hcDzMwEB4DmtSy6l6S0VnrwhscYBB7GIABvwxoUptfc0CemLeWoPoNKtfDDAyEx4Amtdzq/TIuY1V4gwMMYg8DMOCXAU1qiyr3yvi5RQTVb1C5HmZgIDwGNKktKd8tE+csD29wgEHsYQAG/DKgSS2vrFNSZ+URVL9B5XqYgYHwGNCktry0XSbPXBre4ACD2MMADPhlQJNaUUmzTE1fTFD9BpXrYQYGwmNAk9qqTQ2Slr4wvMEBBrGHARjwy4AmtbXF9TIjLZeg+g0q18MMDITHgCa19RtrZWba/PAGBxjEHgZgwC8DmtQ2bqiR2WlZBNVvULkeZmAgPAY0qT25vlLmTM8Mb3CAQexhAAb8MqBJrXRdmcydlkFQ/QaV62EGBsJjQJNa2dpSyZg2N7zBAQaxhwEY8MuAJrWK1Zskc+psguo3qFwPMzAQHgOa1KpWbZB5U2eFNzjAIPYwAAN+GdCkVrNynWRNmUlQ/QaV62EGBsJjQJNabdEayZ6cHt7gAIPYwwAM+GVAk1pd4UpPajMIqt+gcj3MwEB4DGhS27p8hWSnpoU3OMAg9jAAA34Z0KRWn18o2ZOQmvgNKtezEGEgPAZ0qRV5UmP7idRSwgMUORB7vwyoZ2r5K2ReKnc/kRpSgwFDDGhSq16+RuZO4R0FAG0IaL9Vnevd6wTVt0mt2CSzpmW7N2lAJqcw4C4DmtSK11TKND7O293ks7DJrYsMqB/nXdzofUVeIYl3MfHMCa5dZUCT2rKyp2RM1nqS72rymRdsu8iAJrWc2hdleO4WEu9i4pkTXLvKgCa1OY3HZPDiGpLvavKZF2y7yIAmteltZ2Vg3nYS72LimRNcu8qAJrXJnZdlQEEzyXc1+cwLtl1kQJPahN03pF9hK4l3MfHMCa5dZUCT2rg9t6RvUTvJdzX5zAu2XWRAk9rYp9/2pNZB4l1MPHOCa1cZ0KX2DlJzNfHMC6m5ygBS483avGEfBpxiAKkBtFNAu9p9MK+776yRGlJDajDgFAOq1PZypuZUsqn2d1/tiZXdWNGpUaURNww4xUA8qfXhkQ67FYtug9xFkQFVanvelj6FPHzrVBWLIuTMOVpy16T2xK5b0rugLVoBYQGQbxiwzYAmtVGd16VXHm9op1PjzAkGDDGgSW1Ey2XpsbjBtrWpuuQPBqLFgCa1IfXn5I85ddEKCAuAfMOAbQY0qQ0qPym/z6i0PUEAJX8wEC0GNKn1Lz4oD6TzHQWcpxg6T0Fg0RLYz+Vbk1rvlS/Ib6YWEyQWCgzAgB0GNKl1W/aM/HriOjuTATxyBQMwoEntDwt2y6/GriZILBQYgAE7DGhS+132DrlvzEo7kwE8cgUDMKBJ7YHMdrl39AqCxEKBARiww4Amtfsz2uSeUUV2JgN45AoGYECXWqvcMxqp8UgHj3TAgCEG4nZqse0nP0SACBABByKQcv9PZ2rejQJ+iAARIAIORCDl/nkdcu+YVQ5MhSkQASJABLzjxt9md8p9sefU+CECRIAIOBCBfwOiXnLX3Nz37AAAAABJRU5ErkJggg==" alt="" />

为什么会出现这种现象:

看下这个资料