元素高度问题

date
Mar 27, 2023
slug
deepcss-box-height
status
Published
tags
深入解析CSS
summary
Element hight
type
Post

控制溢出行为

​ 当明确设置一个元素的高度时，内容可能会溢出容器。当内容在限定区域放不下，渲染到父 元素外面时，就会发生这种现象。
notion image
上图显示内容溢出容器的现象。使用overflow控制移除内容的行为
  • visible ——所有内容可见，即使溢出容器边缘。
  • hidden——溢出容器内边距边缘的内容被裁剪，无法看见。
  • scroll——容器出现滚动条，用户可以通过滚动查看剩余内容。
  • auto——只有内容溢出时容器才会出现滚动条。
我们以创建两个等高的div为例，其 class 分别为 main 和 sidebar

CSS表格布局

​ 用 CSS表格布局替代浮动布局。给容器设置 display: table，给每一列设置 display: table-cell。
​ 默认情况下，显示为 table 的元素宽度不会扩展到 100%，因此需要 明确指定宽度100%
​ 由于外边距不作用于 table-cell 元素,外边距(margin)不再生效。可以用表格元素的 border-spacing 属性来定义单元格的间距。该属性接受两个长度值： 水平间距和垂直间距。在表 格容器外面包一个元素，将其左右外边距设置为−1.5em，从而抵消表 格容器外侧 1.5em 的 border-spacing。
.wrapper {/*添加一个新的包裹元素，设置负外边距*/
        margin-left: -1.5em;
        margin-right: -1.5em;
    }

    .container {
        display: table;/*让容器布局像表格一样*/
        width: 100%;/*让表格填充容器的宽度*/
        border-spacing: 1.5em 0;/*单元格之间加上水平的border-spacing*/
    }

    .main {
        display: table-cell;/*让列布局像表格的单元格一样*/
        width: 70%;
        background-color: #fff;
        border-radius: .5em;
    }

    .sidebar {
        display: table-cell;
        width: 30%;
        /*margin-left: 1.5em;外边距不作用于 table-cell 元素,外边距不再生效*/
        padding: 1.5em;
        background-color: #fff;
        border-radius: .5em;
    }
​ 用 HTML 表格实现布局并非明智之举，表格布局用了无语义的 HTML 标签。

Flexbox

​ Flexbox 不需要一个额外 的 div 包裹元素，它默认会产生等高的元素。
​ 给容器设置 display: flex，它就变成了一个弹性容器（flex container），子元素默认等高。 你可以给子元素设置宽度和外边距，尽管加起来可能超过 100%，Flexbox 也能妥善处理。

使用min-height和max-height

​ 用这两个属性指 定最小或最大值，而不是明确定义高度，这样元素就可以在这些界限内自动决定高度。
min-height:指定一个最小高度,元素至少等于你指定的高度，如果内容太 多，浏览器就会允许元素自己扩展高度。
max-height:允许元素自然地增高到一个特定界限。如果到达这个界限，元素就不再 增高，内容会溢出。

负外边距

​ 如果设置左边或顶部的负 外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠，如果设置右边或者底 部的负外边距，并不会移动元素，而是将它后面的元素拉过来。给元素底部加上负外边距并不等 同于给它下面的元素顶部加上负外边距。
notion image

© shallrise 2025