html&CSS-----盒模型

目录

前言：

盒子

1.内容区域

2. 边框

3. 内边距区域

4. 外边距区域（margin）

怪异盒模型

---

前言：

        前面我们学习了CSS中的选择器的使用方法，那这一节我们就学习CSS中的盒模型，通过盒模型我们可以去更好的对界面进行排版处理。

盒子

CSS中我们可以将元素看出成一个个矩形盒子，对于页面的布局就是将不同盒子放在不同的位置。CSS中规定每个盒子分别由：内容区域、内边距区域、边框区域、外边距区域构成。实际上整一个网页我们都可以看做为一个盒子。

下面我就一一讲解盒子的这4个组成部分。 

1.内容区域

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

元素里面的所有子元素和文本内容都是在内容区域里面排列的，默认显示在左上角

• hidden：表示隐藏溢出的部分；

• visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；

• scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；

• auto：表示由浏览器决定如何处理溢出部分。

内容区域实际上就是标签体内容，前面我们看过了很多示例了，比如下面这个CSS示例：

div {
    width: 100px;
    height: 100px;
    background-color: red; /*添加背景色以便于观察*/
}

注意：这里设置的宽度和高度实际上是指内容区域的宽度和高度，并不是等同于盒子的宽度和高度！ 

2. 边框

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

边框的三要素：边框的粗细 边框的样式 边框的颜色

样式如下： 

值	描述
none	默认：无边框。
solid	定义实线
dotted	点状边框
dashed	虚线
double	双线

示例：

    
    
    
    
    


  

祝各位学弟学妹们高考加油！

效果：

 还有，边框分为4部分，上下左右，我们可以对这四个部分分别设置，如下所示：

/* 设置上边框线 */
border-top: 样式 粗细 颜色;
/* 设置下边框线 */
border-bottom: 样式 粗细 颜色;
/* 设置左边框线 */
border-left: 样式 粗细 颜色;
/* 设置右边框线 */
border-right: 样式 粗细 颜色;
/* 再细分 */
border-bottom-color: blue;
border-bottom-style: dotted;
border-bottom-width: 3px;
border-left-color: red;

下面看个例子：

    
    
    
    
    


  

祝各位学弟学妹们高考加油！

 效果：

3. 内边距区域

内边距是内容区和边框之间的空间，你可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。

 下面这个视频就可以看到内边距的动态变化，padding.

1686038277875

取值	示例	含义
一个值	padding: 10px	上下左右都设置为10px
两个值	padding: 10px 20px	上下设置为10px，左右设置为20px
三个值	padding: 10px 20px 30px	上设置为10px，左右设置为20px，下设置为30px
四个值	padding: 10px 20px 30px 40px	上设置为10px，右设置为20px，下设置为30px，左设置为40px

4. 外边距区域（margin）

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是CSS布局中的一种重要手段。我们可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。 外边距的话，我们可以理解为一个空气墙，也就是盒子与盒子之间的距离。

示例： 

    
    
    
    
    


  

祝各位学弟学妹们高考加油！

 效果如下：

图片上面橙黄色部分就是margin的范围了。

怪异盒模型

        与标准盒模型的不同的就是怪异盒模型，上面讲到的内容是标准盒模型的内容，而怪异盒模型不同的是盒子的计算方式。对于标准盒模型，当我们设置了宽度和高度的时候，这里的宽度和高度值的是内容区域的宽度和高度，如果我们去添加的padding或者border的时候内容区域的宽度和高度不会改变；而对于怪异盒模型的话，我们设置的宽度和高度是指定盒子的宽度和高度，当我们去添加的padding或者border的时候，内容区域的范围会被压缩。

 示例：

这个是标准盒模型的代码：

    
    
    
    
    


  

      长风破浪会有时，直挂云帆济沧海。
  

效果如下： 

这里我们可以看出长度和宽度都是248x248的，所以我内容区域设置的宽度和高度都是没有变化的 都是200x200。

下面是怪异盒模型的代码：

    
    
    
    
    


  
  
  
      长风破浪会有时，直挂云帆济沧海。
  

 效果如下：

 这里我们可以看出当我们添加了box-sizing: border-box 的时候意思是盒子的大小就是当前设置的宽度和高度。此时就是一个怪异盒模型，当我们放入了padding或者border的时候，就会压缩内容区域的大小。

好了，以上就是今天的全部内容了，thanks~

分享一张壁纸：