【实习第七天】垂直布局以及外边距的折叠

最新推荐文章于 2024-07-03 16:58:30 发布

夜色已晚

最新推荐文章于 2024-07-03 16:58:30 发布

阅读量57

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_48000103/article/details/128025726

版权

这篇博客探讨了HTML中的垂直布局和外边距折叠现象。在垂直布局中，通常不设定高度，让元素根据内容自动撑开。示例展示了如何使用overflow属性处理元素溢出。关于外边距折叠，解释了在兄弟元素和父子元素间外边距如何重叠，并给出了实例演示。了解这些概念对于优化网页布局至关重要。

摘要由CSDN通过智能技术生成

1.垂直布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        使用overflow属性设置父元素如何处理溢出的元素
          可选值：
            visible 默认值  文本正常显示
            hidden  裁剪掉多余的内容
            scroll  生成双向的滚动条，可以通过滚动条查看多余的内容
            auto    根据实际的内容出现滚动条

        overflow-x  对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成
        overflow-y  对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成
     -->
     <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            overflow: scroll;
        }

        .p1{
            width: 200px;
        }
     </style>
     <!-- 块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开
        在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开
     -->
</head>
<body>
    <div class="box1">
        <p class="p1">
            极得梵无小别张百回哉呼主价，活找都落风不恼案回子谭程若属井便国专属，份召至匹她是命远丈
        </p>
    </div>
</body>
</html>

2.外边距的折叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        垂直外边距的重叠
          -兄弟元素
            如果两个值都是正值，谁大听谁的
            如果两个值是负值，谁小听谁的（绝对值谁大听谁的）
            如果是一正一负，那最终的值，两者相加
          -父子元素
            如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，导致父元素的位置发生变化，会影响到父元素下面的布局，所以这个问题必须解决
     -->
    <style>
        /* .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: -50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
          
            margin-top: -90px;
        } */

        .outer{
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 兄弟元素 -->
    <!-- <div class="box1"></div> -->
    <!-- <div class="box2"></div> -->
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>
</html>