CSS盒子模型及属性

大家好，今天来讲讲CSS盒子模型及属性。

目录

一、盒子模型是什么？

二、盒子模型介绍及相关属性

1.内容区/网页元素（content）

2.内边距（padding）

3.边框（border）

4.外边距（margin）

5.元素的宽度和高度

总结

---

一、盒子模型是什么？

        盒⼦模型 是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。

        网页中的每一个 元素都可以看做一个盒子模型

二、盒子模型介绍及相关属性

1.内容区/网页元素（content）

• 内容区是整个盒⼦模型的中⼼，其中存放了⽹⻚的主要元素，这些元素可以是 ⽂本 、 图像..

• 内容区有 width   height   overflow 三个属性，其中 width 和 height 属性⽤来指定盒⼦内容区域的宽度和⾼度。

代码示例：

<!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>
</head>
<style>
    div{
        background-color: aqua;
        width: 100px;
        height: 100px;
    }
   </style>
<body>
    <div>内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素</div>
</body>
</body>
</html>

                                                   

在普通盒子模型中，如果内容过多，超出部分会在盒子外显示。

        当内容信息过多，超出内容区设置的范围时，可以使⽤overflow 属性设置溢出内容的处理⽅式 overflow属性的四个可选值：

 

 下⾯示例使⽤overflow属性的hidden值隐藏了内容超出部分：

<!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>
</head>
<style>
    div{
        background-color: aqua;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
   </style>
<body>
    <div>内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素内容区和网页元素</div>
</body>
</body>
</html>

                                                   

2.内边距（padding）

        内边距 是内容区和边框之间的空间，我们可以通过 padding-top 、 padding-right 、 padding-bottom 、 padding-left 及它们的简写属性 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>
</head>
<style>
    #big{
        width: 100%;
        height: 200px;
        background-color: deeppink;
    }
    div{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        /* overflow: hidden; */
        padding: 20px;
    }
   </style>
<body>
    <div id="big">
        <div class="box">盒子模型</div>
    </div>
</body>
</body>
</html>

效果图： 

3.边框（border）

        边框 是环绕内容区和内边距的边界，我们可以使⽤ border-style 、 border-width  和  border-color 及它们的简写属性 border 来设置边框的样式。其中，border-style 属性是边框中最主要的属性，如果没有设置该属性的话，其他的边框属性也会被忽略。

 代码如下：

<!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>
</head>
<style>
    #big{
        width: 100%;
        height: 200px;
        background-color: deeppink;
        border: 10px solid blueviolet;
    }
    div{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        /* overflow: hidden; */
        padding: 20px;
        border: 20px dotted black;
    }
   </style>
<body>
    <div id="big">
        <div class="box">盒子模型</div>
    </div>
</body>
</body>
</html>

 效果图：                       

4.外边距（margin）

        外边距 位于盒⼦模型的最外围，是边框之外的空间。我们通常使⽤ margin-top 、 margin-bottom 、 margin-left 、 margin-right 及它们的简写属性 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>
</head>
<style>
    .box{
        background-color: palegreen;
        width: 100px;
        height: 100px;
        border: 20px dashed black;
        padding: 20px;
        margin: 15px;
    }
    .box2{
        background-color: rgb(255, 247, 0);
        width: 50px;
        height: 50px;
        border: 20px dotted rgb(255, 0, 0);
        padding: 20px;
        margin: 20px;
    }
   </style>
<body>
        <div class="box">盒子模型</div>
        <div class="box2"></div>
</body>
</body>
</html>

 运行结果：

                                                   

5.元素的宽度和高度

        当我们使⽤CSS中的 width 和 height 属性设置元素的宽度和⾼度时，实际上设置的只是元素内容区域的宽度和高度，元素的实际宽度和⾼度还取决于其他因素 

---

总结

● 总宽度： width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

● 总高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom