盒子模型_div规定一个盒子模型的高度之后,宽度没有规定会-CSDN博客

本文链接：https://blog.csdn.net/back_glim/article/details/104443508

盒子模型

一.盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。从盒子的外围到盒子的内部：
外边距（margin）
盒子本身（border）
内填充（补白）(padding)
内容（图片、文本、视频、小盒子…）

二.盒模型具体的css属性：

    外边距：margin属性
    盒子边框线：border属性
    内填充：padding属性

在这里插入图片描述

三.外边距：margin属性

①：margin 是长在盒子外围的。
②：margin 控制当前元素与其他**同级元素**的位置关系。
③：margin不会改变盒子内部的大小。
④：给元素的单一一个方向设置margin值

		margin-right:
        margin-left:
        margin-top:
        margin-bottom:

⑤：margin设置方法：

设置不同数值的用法

margin:一个值   四周
margin:两个值   上下   左右
margin:三个值   上  左右  下
margin:四个值   上右下左

⑥：margin是可以设置负值的！

⑦：在margin常出现的BUG:
A: 同级元素上下之间的margin的margin值，不会叠加，会重合，按照最大值设置。
B: 当父元素和第一个子元素都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

关于margin在盒子中的设置：
单独设置一边的边距由right（右）、left（左）、top（上）、bottom（下）所控制

>    		  margin-right:   
>             margin-left:
>             margin-top:
>             margin-bottom:

设置的外边距案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距的设置</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
           
            margin-right: 50px;         /* 设置右边的外边距 */
            margin-left: 40px;           /* 设置左边的外边距 */
            margin-top: 30px;            /* 设置上边的外边距 */
            margin-bottom: 20px;         /* 设置下边的外边距 */
        }
    </style>
</head>
<body>
    <div class="box">
        content
    </div>
</body>
</html>

效果图如下：
在这里插入图片描述

注：由于外边距无法用单个盒子进行观察，建议看结构图；

四.边框属性（border）

1.border:边框宽度边框风格边框颜色; 例如：border:5px solid #ff0000
边框：border,网页中很多修饰性线条都是由边框来实现的。

边框宽度：border-width:  边框颜色：border-color:

2.边框样式：

border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

3.可单独设置一方向边框，可单独设置一方向边框，

border-bottom:边框宽度 边框风格 边框颜色;底边框  
border-left:边框宽度 边框风格 边框颜色;左边框 
 border-right:边框宽度 边框风格 边框颜色;右边框  
 border-top:边框宽度 边框风格 边框颜色;上边框

4.边框线的复合属性
边框线大小、颜色、类型（可不按顺序中间由空格隔开）

border-width/color/style :

5.边框线的多个属性

            属性值：
                1个值： 四周都添加边框
                2个值： 上下    左右
                3个值：  上    左右    下
                4个值：  上 右 下 左

拓展

用边框画三角形：
transparent 透明（边框线在盒子的外面）不要用边框线做结构

设置边框线案例如下图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框线属性</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .box{
            margin: 30px auto;
            width: 100px;
            height: 100px;
            background: green;
             border-style: solid;               /*边框线样式的设置 */
            border-color: greenyellow;          /*边框线颜色的设置 */
            border-width: 8px;                  /*边框线大小设置 */
        }
    </style>
</head>
<body>
    <div class="box">

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

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

五.内填充：padding属性

①：padding是在盒子里面，在盒子与内容之间。

②：padding的作用：控制子元素在父元素里面的位置关系.主要控制盒子内部关系

③：padding会把盒子撑大。

④：如果想让盒子保持原有的大小：在宽高基础上减掉。（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）

⑤：单一方向上设置padding值：

 		padding-left:
        padding-right:
        padding-top:
        padding-bottom:

⑥:padding的设置特点：

padding:30px;    四周
padding:10px 30px;     上下     左右
padding:10px 30px 50px    上   左右    下
padding:10px 30px 50px 100px     上右下左

⑦:padding不会对背景图的位置造成影响。

⑧;padding不能为负值。

设置内填充的案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内填充</title>
    <style>
      
        .box{
            width: 100px;
            height: 100px;
            background: red;
            padding-right: 50px;          /* 设置右边的内填充 */
            padding-left: 40px;           /* 设置左边的内填充 */
            padding-top: 30px;            /* 设置上边的内填充 */
            padding-bottom: 20px;         /* 设置下边的内填充 */
        }
        .box2{background: green;
        width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div>
        <div class="box">
            <div class="box2">content</div>
        </div>
    </div>
</body>
</html>

效果图如下
在这里插入图片描述

六.元素的宽高

元素的总宽度：=（maegin-left）+（border-left）+（padding-left）+width+（maegin-right）+（border-right）+（padding-right）
在这里插入图片描述
元素的总高度：=（margin-top）+（border-top）+（padding-top）+width+（maegin-bottom）+（border-bottom）+（padding-bottom）