CSS一些常见解决方案

1.margin塌陷问题 - 父元素随子元素移动

原因：根据规范一个元素没有border-top、padding-top，则该元素上边距与孩子上边距重合

<!--该结构当 inner的margin-top:20px时，父元素跟随子元素一同移动--> 
<div class="outer">
    <div class="inner"></div>
</div>

 

• 方法1：父元素设置边框border

.outer { border-top : 1px solid black; }

 

• 方法2：父元素设置内边距padding

.outer { padding-top: 1px;

 

• 方法3：父元素设置overflow：hidden/auto

.outer { overflow: hidden; }
.outer { overflow: auto; }

 

• 方法4：父/子元素设置为浮动 → 脱离文档流

.outer { float: left; }
<!--或者-->
.outer { height: 200px; width: 200px; }  <!--设置高度，防止因为子元素的浮动，而父元素高度塌陷-->
.inner { float: left; }

 

• 方法5：父元素设置为fixed/absolute → 脱离文档流

.outer { position: fixed; }
.outer { position: absolute; }

 

2.文字、图片居中

2.1单行文字

结构

<style>
    div{ width:200px;height:200px;border:1px solid black;}
</style>
<div class="outer">
    <span>一行文字</span>
</div>

 

• 方法：水平text-align:center   垂直：line-height: 盒子内容的高度

<!--正常的盒子即内容盒 - 盒子的内容高度=width-->
.outer {
    box-sizing: content-box;
    text-align:cetner;
    line-height: 200px;
}
<!--边框盒 → 盒子内容高度=width - 垂直padding - 垂直border-->
.outer {
    box-sizing: border-box;
    padding: 20px;
    line-height: 160px;   
}

 

2.2多行文字

结构

<style>
div { width: 200px; height: 200px;background:yellow;text-align:center;box-sizing: border-box; }
</style>
<div class="outer">
    <span>你还世界，时机放电上的人文色彩草泥马v开发建设的立法规划</span>
</div>

 

• 方法1：自己手动调整模式，通过F12控制台慢慢调整 → 一旦文字改变又要调整

<!--把文字盒子设为边框盒，根据
.outer {
    line-height: 20px;  
    padding: 60px 0;
}

 

• 方法2：通过js进行计算文字块的空间进行本机计算自动调整

<javascript>
    window.onload = function() {
         var span = document.getElementsTagName("span")[0];
         var div = document.getElementsClassName("outer")[0];
         var divHeight = div.offsetHeight;  <!--获取元素内容、内填充、边框的总高度-->
         var spanHeight = span.offsetHeight;
         var padding = (divHeight - spanHeight)/2;
         div.style.padding = pdding.toString() + "px 0";  <!--动态的调整div的内填充实内部文字垂直居中-->
    }
</javascript>

 

2.3图片

结构

<style>
    div { width: 300px; height: 300px; border: 1px solid black; }
    img { width: 100px;height:100px; }
</style>

<div class="outer">
    <img src="01.jpg" class="inner">
</div>

 

• 方法1：使用定位

.outer {
    position: relative;
    text-align: center;
}
.inner {
    position: absolute;
    left: 50%;                  <!--这里的百分比是父元素-->
    margin-left: 50px;      <!--左顶点在父元素宽度的中点，故需要在往左移 子元素的一半宽度-->
    top: 50%;
    margin-top: -50px;
}

 

• 方法2：子元素直接使用外边距进行计算移动

.outer { text-align: center; }
<javascript>
    var img = document.getElementsByClassName("inner")[0];
    var div = document.getElementsByClassName("outerr")[0];
    var imgHeight = img.offsetHeight;
    var divHeight = div.offsetHeight;
    var marginTop = ( divHeight - imgHeight )/2;    <!--父元素高度的50&减去子元素高度的50%-->
    img.style.marginTop = marginTop + "px";
</javascript>