CSS基础(11)_垂直方向的布局(margin塌陷问题、margin合并问题)、overflow属性介绍

风之舞_yjf

已于 2024-11-10 20:32:53 修改

阅读量646

点赞数

分类专栏： CSS 文章标签： css

于 2021-09-20 01:10:49 首次发布

本文链接：https://blog.youkuaiyun.com/no15870678621/article/details/120386356

版权

CSS 专栏收录该内容

28 篇文章

订阅专栏

内容溢出(overflow)

定义：设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。
默认情况下父元素的高度被内容撑开。子元素是在父元素的内容区排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性来设置父元素来处理溢出的子元素：

内容溢出方向
overflow：auto 两个方向都处理
overflow-x：单独处理水平方向的
overflow-y：单独处理垂直方向的

overflow属性值：
visible：默认值子元素会从父元素中溢出，在父元素外部的位置显示。
hidden：溢出内容将会被裁减不会显示。
scroll：生成两个滚动条(不论内容是否溢出)，通过滚动条来查看完整的内容。
auto：自动显示滚动条，内容不溢出不显示。

注意事项
1、overflow-x、overflow-y不能一个是hidden，一个是visible，它们是实验性属性，不建议使用。
2、overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症(比如：margin坍塌问题)。

下面展示一些例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/vertical_layout.css">
    <title>盒子的垂直布局</title>
</head>
<body>
    <div class="box">
        <div class="inner">均衡饮食和适量运动对于人们十分重要。均衡饮食是指选择多种类和适当分量的食物，以便能提供各种营养素和恰当热量去维持身体组织的生长，增强抵抗力和达致适中的体重。在进食时，应该按照“饮食金字塔”的分量比例进食及每天喝充足水分，以促进健康。均衡饮食使身体正常运作，有助于抵抗疾病，让人时刻感到精力充沛并维持理想体重。如要达致理想体重，最有效及可持续的方法便是保持健康饮食并进行适量运动。多吃煎炸和太甜或太咸的食物可能会引致肥胖，高血压，高胆固醇等，有损人们的健康。</div>
    </div>
</body>
</html>

.box{
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    overflow:auto;
}
.inner{
    width: 200px;
    height: 300px;
    background-color: burlywood;   
}

在这里插入图片描述

垂直方向的布局

1、margin塌陷问题
什么是margin塌陷？第一个子元素上的margin会作用在父元素上，最后一个子元素的margin会作用在父元素上。

父子元素
父子元素间相邻外边距，子元素的会传递给父元素 (指上外边距)。
父子外边距的重叠会影响到页面的布局，必须要进行处理。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../browser_default_style/reset.css">
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            overflow: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 30px;
        }
    </style>
    <title>margin塌陷问题</title>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
如何解决margin塌陷？
方案一：给父元素设置不为0的padding。
方案二：给父元素设置宽度不为0的border
方案三：给父元素设置css样式：overflow: hidden;

    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            overflow: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 30px;
        }
    </style>

在这里插入图片描述

margin合并问题

相邻的垂直方向外边距会发生重叠现象(上面兄弟的下外边距和下面兄弟的上外边距会合并)，分以下两者情况：

兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)

特殊情况：
1、如果相邻的外边距一正一负，则取两者的和。
2、如果相邻的外边距都是负值，则取绝对值较大的。

如何解决margin合并坍塌问题？
无需解决，布局的时候上下兄弟元素，只给一个设置上下外边距就可以了。

下面展示一些例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/margin_overlap_01.css">
    <title>外边距重叠(一)</title>
</head>
<body>       
     <!-- 兄弟元素 -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

/* 此时的外边距重叠 */
.box1{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
/* box1和box2的margin属性如果都是正值取较大值，一正一负取两者之和，两负取绝对值较大值 */
    margin-bottom: 5px;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    margin-top: 25px;
}