CSS盒子模型

最新推荐文章于 2024-05-21 21:13:29 发布

勇敢歪歪

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量290

点赞数 1

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

本文链接：https://blog.csdn.net/m0_68276272/article/details/128043995

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型

1、组成
2、margin叠加问题
3、margin传递问题
4、自适应
5、盒子模型小练习

1、组成

组成：content（物品）->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的间距）
content:内容区域，由宽和高组成
padding:内边距（内填充）内容与边框之间的距离
只写一个值（上下左右）
写两个值（上下、左右）
写四个值（上、右、下、左）
padding-left
padding-right
padding-top
padding-bottom
margin:外边距（外填充）盒子与盒子之间的间距
注：
1、背景色填充到margin以内的区域（不包括margin区域）
2、文字会在content区域
3、padding不能为负数，margin可以为负数（margin为负数，盒子会出去浏览器界面，其他盒子会和该盒子重叠）
例：

这里创建了两个盒子，设置了第一个盒子的border（边框），左外边距，内边距。

<!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>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            border: 10px solid blue;
            padding-left: 30px;
            margin: 10px;
        }
        #box2{
            width: 200px;
            height:200px;
            background: black;
            color: white;
        }
            </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">这又是一个盒子</div>
</body>
</html>

显示结果：
在这里插入图片描述
box-sizing:（盒尺寸，可以改变盒子模型的展示形态）
默认值：content-box: width、height：->content
border-box: width、height：->content padding border(使用场景：不用再去计算一些值，解决一些百分比的问题)
当width和height属性设置为同一个值时，content-box的内容区域大小等于border-box整个盒子的大小。content-box额外多出来border和padding区域的大小。
content-box的width，height与padding，border的大小无关。border-box的width，height与padding，border的大小有关。

这里设置了一个盒子和一个输入框，如果要给输入框设置外边距，不设置box-sizing的值为border-box的话，输入框就会超出浏览器页面，但是如果设置的话就不会。

<!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>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            border: 10px solid blue;
            padding: 30px 50px;
            box-sizing: border-box;
        }
        input{
            width:100%;
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <input type="text">
</body>
</html>

结果：
在这里插入图片描述

2、margin叠加问题

当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，会取上下中值较大的作为叠加的值，这个问题只在上下有，左右是没有这个叠加问题的。

比如：设置两个盒子，设置上面盒子的下边距为30，下面盒子的上边距为30，显示的结果是只会显示两个盒子的中间间距为30，而不是60.

但是如果实在想解决这个问题，有两种方法：
1、BFC规范
2、想办法只给一个元素添加间距

3、margin传递问题

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。

创建一个嵌套结构，大盒子和小盒子，显示结果为：

但是在小盒子里面加上margin-top属性，属性值为100px，此时蓝色盒子按理说应该位于红色盒子底部，但是结果却并不是这样，而是两个盒子一起向下移动了100px：

<!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: 200px;height: 200px;background: red;
        }
        #box2{width:100px;height:100px;background: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding

第三种解决方法就不是给子元素加padding了，是给父元素，同时父元素的尺寸也要发生变化。

<!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: 200px;height: 100px;background: red;padding-top: 100px;
        }
        #box2{width:100px;height:100px;background: blue;} 
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

结果：
在这里插入图片描述

4、自适应

创建一个盒子模型，当设置左边自适应时盒子靠浏览器右边，设置右边自适应时会考浏览器左边，如果同时设置左右适应，那么盒子就会居中显示，不论怎么调节浏览器窗口的大小，盒子都会居中显示。但是，margin左右自适应是可以的，上下自适应是不行的。

<!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>
        #box{width:400px;height:100px;background: red;
        /* margin-left: auto;margin-right: auto; */
        margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

结果：
在这里插入图片描述

5、盒子模型小练习

在这里插入图片描述

<!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:350px;height:350px;border: 1px dashed black;padding: 27px;}
        #box2{ border: 5px solid #d7effe;padding: 20px;}
        #box3{ background: #ffa0df;padding: 41px;}
        #box4{ border: 1px dashed white;}
        #box5{border: 1px dashed white;padding: 49px;}
        #box6{width:100px;height:100px;background: #96ff38;border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

勇敢歪歪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

创建一个盒子模型，当设置左边自适应时盒子靠浏览器右边，设置右边自适应时会考浏览器左边，如果同时设置左右适应，那么盒子就会居中显示，不论怎么调节浏览器窗口的大小，盒子都会居中显示。但是，margin左右自适应是可以的，上下自适应是不行的。当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，会取上下中值较大的作为叠加的值，这个问题只在上下有，左右是没有这个叠加问题的。比如：设置两个盒子，设置上面盒子的下边距为30，下面盒子的上边距为30，显示的结果是只会显示两个盒子的中间间距为30，而不是60.
复制链接

扫一扫