盒子模型+给子元素添加外边距父元素也会动的解决办法

最新推荐文章于 2022-12-01 23:42:22 发布

YiLin_Classics

最新推荐文章于 2022-12-01 23:42:22 发布

阅读量901

点赞数 2

分类专栏： web前端文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/YiLin_Classics/article/details/123628759

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

盒子模型

盒子模型的组成部分

  盒子模型的组成部分：
      内容区域：是css里面自己设置的宽度和高度
      内边距（padding）：是内容和边框之间的距离
      边框（border）：元素的一个边缘位置
      外边距（margin）：元素与元素之间的距离

内边距

       padding：内容和边距之间的距离

取值个数	内边距情况
V1	实现四个方向的内边距
V1 V2	V1上下内边距，V2左右内边距
V1 V2 V3	V1代表上内边距，V2代表左右边距 V3代表下内边距
V1 V2 V3 V4	V2代表上内边距，V2代表右内边距，V3代表下内边距，V4代表左内边距：顺时针记忆方向

能否设置一个方向的内边距：
可以，padding-top、padding-bottom、padding-left、padding-right

外边距

margin：元素与元素之间的距离

取值个数	外边距情况
V1	实现四个方向的外边距
V1 V2	V1上下外边距，V2左右外边距
V1 V2 V3	V1代表上外边距，V2代表左右边距 V3代表下外边距
V1 V2 V3 V4	V2代表上外边距，V2代表右外边距，V3代表下外边距，V4代表左外边距：顺时针记忆方向

能否设置某一个方向的外边距？
问：使用方法：margin-方向词

在实例中遇到的问题
问题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>
    <style>
        .div1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

产生一个问题：默认的子元素的外元素作用到父元素上面，父元素与上外边距产生距离，但是子元素不会与父元素产生上外边距
1）考虑点：本质原因，从概念角度出发：外边距是边框与边框之间的距离。
    给父元素添加一个上边框，颜色为透明
    border-top：1px   solid   transparent

<!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>
        .div1{
            width: 400px;
            height: 400px;
            background-color: red;
            border-top: 1px solid transparent;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

2）给父元素或者死子元素添加浮动=====触发BFC
float：left

<!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>
        .div1{
            width: 400px;
            height: 400px;
            background-color: red;
           float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 20px;
            box-sizing: border-box;
            /*float:left;*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

3)给父元素添加定位（绝对定位或者固定地位）
position：absolute;或者“position：fixed”
添加定位的元素，脱离了文档流，形成了独立的区域，触发BFC不会越界，也不会让外界干扰。

<!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>
        .div1{
            width: 400px;
            height: 400px;
            background-color: red;
            position: absolute;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

4）给父元素添加溢出隐藏
overflow：hidden;
触发了BFC独立区域，会让浮动的元素继续参与高度的计算。
5）转换角度思维考虑，给父元素添加添加内边距
padding-top：30px;
父元素会变大，降低父元素的高度。

盒子模型的实际高度计算

 只要添加内边距、边框，都会让盒子变大
 只要添加盒子模型中的任何一个内容都会让盒子变大
 实际的宽度=width+左右的padding+左右的border+左右的margin
 实际的高度=height+上下的padding+上下的border+上下的margin

YiLin_Classics

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
盒子模型+给子元素添加外边距父元素也会动的解决办法

盒子模型盒子模型的组成部分内边距外边距盒子模型的组成部分盒子模型的组成部分：内容区域：是css里面自己设置的宽度和高度内边距（padding）：是内容和边框之间的距离边框（border）：元素的一个边缘位置外边距（margin）：元素与元素之间的距离内边距 padding：内容和边距之间的距离取值个数内边距情况V1实现四个方向的内边距V1 V2V1上下内边距，V2左右内边距V1 V2
复制链接

扫一扫