当前位置：首页 > news >正文

网站建设有钱赚吗英国做电商网站

news 2025/9/17 1:36:29

网站建设有钱赚吗,英国做电商网站,有哪些做包装盒的网站,保安做网站问题背景在移动应用页面开发中，父元素和子元素外边距合并，导致布局效果和预期不一致。 <template><view class"container"><view class"card"><p>TEST</p></view></view> </templa…

问题背景

在移动应用页面开发中，父元素和子元素外边距合并，导致布局效果和预期不一致。

<template><view class="container"><view class="card"><p>TEST</p></view></view>
</template><style lang="scss">
.container {background-color: #cccc;height: 100vh;.card {background-color: red;margin: 50rpx auto;width: 95%;border-radius: 5px;}}</style>

什么是外边距塌陷

当两个垂直方向上的块元素外面边距相遇时，会形成一个外边距。这个外边距等于两个外边距的最大时，而不是两个外边距的相加。

外边距塌陷的情况

相邻的块级元素：当两个相邻的块级元素的上下外边距相遇时，会发生塌陷。

      .box1 {height: 300px;width: 300px;background-color: aqua;margin-bottom: 20px;}.box2 {height: 300px;width: 300px;background-color: red;margin-top: 30px;}

此时两个盒子上下两外边距是30px，不是50px

父元素与子元素：如果子元素是第一个或最后一个块级元素，并且没有边框、内边距或高度，父元素的外边距可能会塌陷。

      .parent {height: 300px;width: 300px;background-color: aqua;margin: 20px;}.child {height: 300px;width: 300px;background-color: red;margin: 30px;}

在这里，父元素的下外边距和子元素的下外边距相遇，最终父元素的外边距为30px。