11月24日：盒子模型补充

最新推荐文章于 2024-08-19 17:35:32 发布

瑞妖儿

最新推荐文章于 2024-08-19 17:35:32 发布

阅读量47

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_46111433/article/details/128026984

版权

这篇博客探讨了HTML中的垂直布局和外边距折叠现象。在垂直布局中，通常不设定高度，让元素由内容撑开。外边距折叠涉及到兄弟元素和父子元素之间的外边距处理，当存在相邻外边距时，会有特定的合并规则。对于父子元素，外边距的重叠可能会影响布局，需要解决这一问题以保持稳定性。

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

一、垂直布局

<!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  裁剪掉多余的内容
                scoll  生成双向的滚动条，可以通过滚动条查看完整的内容
                auto   根据实际内容生成滚动条

            overflow-x  对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成
            overflow-y  对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成
     -->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* overflow: scroll; */
            /* overflow-x: hidden; */
        }
        p{
            width: 300px;
        }
    </style>
    <!-- 块元素默认情况下，宽度是父元素的100%，高度是被内容撑开
        在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开
     -->
</head>
<body>
    <p></p>
    <div class="box1">
        李下君快国气者哉，死评罪生要是，对颜服倒卞王起
    </div>
</body>
</html>

二、外边距的折叠

<!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>
    <!-- 
        垂直外边距的重叠
            -兄弟元素
                如果两个值都是正值，谁大听谁
                如果两个值都是负值，谁小听谁（绝对值谁大听谁的）
                如果是一正一负，那最终的值是两者相加
            -父子元素
                如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,导致父元素的位置发生变化,会影响到父元素下面的布局,
                    所以这个问题必须要解决
     -->
     <!-- 面试题:如何解决父子外边距重叠的问题? -->
     <!-- 如何设置圆形?  border-radius -->
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 80px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            /* margin-top: 150px; */
        }
        .outer{
            width: 200px;
            height: 200px;
            background-color: yellow;

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