未知宽高元素绝对定位居中产生的一系列问题和思考

柔光的暖阳◎ 2021-09-16 07:12 184阅读 0赞

在使用绝对定位实现未知宽高元素的时候产生了一些问题，具体问题是什么，把下面的代码拷到本地一起来玩吧。

<div class="father">
        <div class="son clearfix">
        	
            <i></i>
            
            <span>这是一段描述</span> 
        </div>
    </div>
    <script type="text/javascript">
    	
    </script>
    
    <style type="text/css">
    	.father{
    		position: relative;
    		width: 400px;
    		height: 300px;
    		margin: 0;
    		padding: 0;
    		background: yellowgreen;
    	}
         
    	.son{
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%,-50%);
    		background: red;
    	}
    	.son i{
    		float: left;
    		width: 50px;
    		height: 50px;
    		background: yellow;
    	}
    	.son span{
    		float: right;
    		height: 50px;
    		line-height: 50px;
    		background: blue;
    		color: white;
    	}
    	.clearfix::after{
    		content: '';
    		display: block;
    		width: 0;
    		height: 0;
    		clear:both;
    	}
    </style>

复制粘贴在浏览器中打开后，结果如下所示

![70][]

好的，这个没有设置宽度的son元素已经凭内容自动撑开了，而且还在father里居中了，效果相当棒~

下一步，我们来搞一点小动作，我们让son的宽度撑的再开一些，最简单的做法就是在描述信息里多加几个字

<-- css没变，就不复制粘贴了 -->
    <div class="father">
        <div class="son clearfix">
        	
            <i></i>
            
            <span>这是一段描述这是一段描述这是一段描述</span> 
        </div>
    </div>

来看结果

![70 1][]

son容器不是自适应宽度吗？为什么才撑开到50%（200/400=0.5）就不行了呢？

ok，理由如下。

absolute定位的元素有一个包含块，包含块是最近的带定位的元素，在这里就是father。

包含块的自适应最大宽度 = father.width - son.left - son.right 这里不考虑padding，margin

ok，原因找到了，有一种比较变态的解决方案，我就说个思路，就是给son的外层再包一个容器，他的宽度是father的200%，那么son作为这个新增容器的儿子，他的最大自适应宽度就是200%\*（100%-left50%）= 100%。这样解决看起来很好，其实是会有问题的，尤其是你要给father容器添加事件，他的捕获区域会增加一倍（MDZZ)

请忽略上面的解决方案，我们继续来玩这个东西

有人跟我讲，给son加个display：inline-table，强制其子元素不换行试试，我加了之后。

![70 2][]

竟然可以了~震惊！

再加几句描述信息试试。

![70 3][]

发现，这种方案宽度最多适应到100%。

联想到强制不换行这个特性，强制文字不换行我经常用，于是做了个实验。用white-space：nowrap玩一下，结果如下

![70 4][]

有哪位大神知道这是为什么的在下面畅所欲言。膜拜

[70]: /images/20210813/a1f8f444cca24ae8b584412546f418bf.png
[70 1]: /images/20210813/257926f4c821433494cfc14d37665602.png
[70 2]: /images/20210813/5065bcd0180a42aaa067f829ea3a28dd.png
[70 3]: /images/20210813/bcd8b5c6529c48e9b51900d42171d14c.png
[70 4]: /images/20210813/a72e41c9ce674a87b55a0d6d457ea25b.png