怎样能使父元素随子元素的高度变化而变化（css样式

Posted 2023-05-04

参考技术A 没有办法，给父级加了透明度，那他里面的内容都是按照这个透明度显示的，再给子集单独设置opacity:1这样是在原来的透明度的基础上在执行的，也就是如果父级的是opacity:0.5，那再给子集添加opacity:1，她是在0.5透明度的基础上的不透明显示，那还属于有0.5的透明度，这个你可以添加一个单独的层，定位到某个位置，然后设定透明度，不要给父级添加透明度。

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

HTML，CSS：

<div class="box1">
    <div class="box2">
        <div class="content">
            <div class="margin">123</div>
        </div>
    </div>
</div>

*{padding:0; margin:0;}
.box1{ width:600px; height:1042px; margin:0 auto; background:#ccc; overflow:hidden;}
.box2{ width:600px; height:1042px; background:#000; overflow:hidden;}
.content{ width:600px; height:1042px;  overflow:hidden;}
.margin{ width:400px; height:30px; line-height:30px; text-align:center; margin:20px; background:#f00;  overflow:hidden;}

解决方法：

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位