overflow的默认值visible

最新推荐文章于 2025-04-21 19:30:20 发布

原创最新推荐文章于 2025-04-21 19:30:20 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

文章探讨了在HTML中添加内容导致溢出时，CSS的overflow属性如何作用于具有固定高度的块元素。当去除高度设置，overflow属性变得无效，内容会扩展其容器，不影响其他元素的位置。

在这里插入图片描述

1.修改前的代码

html代码：

<div class="main">
    <div class="test">
      111111
    </div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
  </div>

css代码：

.main {
  /* height: 500px; */
  width: 200px;
  background-color: bisque;
}

.test {
  height: 20px;
  width: 200px;
  background-color: aquamarine;
  margin-top: 10px;
}

显示如下：
在这里插入图片描述

2.修改后的代码

修改html代码：

  <div class="main">
    <div class="test">
      111111
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur quia temporibus magnam, perferendis atque
        adipisci dolorum qui esse quisquam neque dolorem corrupti quasi nihil accusantium inventore laborum, soluta
        itaque animi ab voluptatem iure eos repudiandae, eaque maiores? Rerum consectetur aliquam ipsum amet, accusamus
        minus praesentium maxime, perferendis, tenetur assumenda quis.
      </div>
    </div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
    <div class="test">111111111</div>
  </div>

css代码不变：

.main {
  /* height: 500px; */
  width: 200px;
  background-color: bisque;
}

.test {
  height: 20px;
  width: 200px;
  background-color: aquamarine;
  margin-top: 10px;
}