[分享]css两个盒子上下显示不全

在使用CSS进行布局设计的时候，有时候可能会出现两个盒子上下显示不全的问题，这时候我们需要对其进行调整。第一种情况是父元素设置了固定高度，而子元素的高度超出了父元素的高度，导致子元素被截断。这时候，我...

在使用CSS进行布局设计的时候，有时候可能会出现两个盒子上下显示不全的问题，这时候我们需要对其进行调整。

第一种情况是父元素设置了固定高度，而子元素的高度超出了父元素的高度，导致子元素被截断。这时候，我们需要将父元素的高度设置为auto或者大于等于子元素的高度，以确保子元素完整显示。

.parent{
  height: auto; /*或者设置大于等于子元素高度的值*/
}
.child{
  height: 200px; /*假设子元素高度为200px*/
} 

第二种情况是子元素设置了绝对定位，而没有设置相对定位的父元素。这时候，子元素会根据文档流进行定位，超出父元素的部分被隐藏。这时候，我们需要将父元素设置为相对定位。

.parent{
  position: relative; /*设置父元素为相对定位*/
}
.child{
  position: absolute; /*设置子元素为绝对定位*/
  top: 10px; /*假设子元素距离父元素顶部为10px*/
} 

总之，我们需要了解CSS盒模型的基本原理，同时对盒子的大小、定位等属性进行适当的调整，才能达到完美的布局效果。