html - 盒子模型

什么是盒子模型

1. CSS 中 HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着

盒子模型的组成部分

• 内容区（content）：用来在 HTML 页面显示内容的区域，可以是文本内容、图片、视频或者其他后代元素等。

• 内边距（padding）：指的是内容区至边框之间的空白区域。

• 边框（border）：包含内容区和内边距的边界。

• 外边距（margin）：指的是当前盒子模型的边框至其他盒子模型的边框之间的区域。

  • width 属性和 height 属性设置盒子模型的内容区在页面中所占区域。
  • border 属性、padding 属性和 margin 属性分别设置盒子的边框、内边距和外边距。

设置盒子模型的大小

1. 在默认情况下，一个元素的盒子模型的大小是刚好可以容纳其内容的（文本、图片或视频等），并且会根据其内容变化而变化。
2. 通过 CSS 的 width 属性和 height 属性设置盒子模型最终显示的宽度和高度，从而改变盒子模型的大小。
   1. min-width 属性：用来为 HTML 元素设置最小宽度。浏览器显示其元素时，元素的宽度最小不能小于该值。
   2. max-width 属性：用来为 HTML 元素设置最大宽度。浏览器显示其元素时，元素的宽度最大不能大于该值。
   3. min-height 属性：用来为 HTML 元素设置最小高度。浏览器显示其元素时，元素的高度最小不能小于该值。
   4. max-height 属性：用来为 HTML 元素设置最大高度。浏览器显示其元素时，元素的高度最大不能大于该值。

盒子的阴影

1. box-shadow为 HTML 元素的盒子模型的边框设置阴影效果
2. box-shadow: 5px 5px 5px lightcoral;
3. 第一个参数为向右偏移（当然如果第一个参数为负数就是向左偏移）
4. 第二个参数为向下偏移（当然如果第二个参数为负数就是向上偏移）
5. 第三个参数为设置盒子边框的阴影模糊半径
6. 第四个参数为设置边框的颜色

盒子模型的边框

1. border 属性用来设置盒子模型的边框，该属性的值具有 3 个，分别为宽度（默认值：1px）、样式和颜色（默认值：black）

2. border: [border-width || border-style || border-color] ;
   

   直接设置border默认为设置四边的边框

3. border 属性还可以划分为如下所示的 4 个方向的属性：

   • border-top 属性：表示顶部的边框
   • border-right 属性：表示右边的边框
   • border-bottom 属性：表示底部的边框
   • border-left 属性：表示左边的边框
     • 例: border-left: 2px solid lightcoral;

边框宽度

1. border-width 属性单独设置边框的宽度(一并设置4个方向的边框)
2. border-width也可以分别设置4边各自边框的宽度
   1. border-top-width 属性：表示顶部的边框宽度
   2. border-right-width 属性：表示右边的边框宽度
   3. border-bottom-width 属性：表示底部的边框宽度
   4. border-left-width 属性：表示左边的边框宽度
3. 置 border-width 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框宽度
   1. 如果为 border-width 属性设置一个值，则同时设置边框的四个方向的宽度。
   2. 如果为 border-width 属性设置两个值，则第一个值表示上下方向的宽度，第二个值表示左右方向的宽度。
   3. 如果为 border-width 属性设置三个值，则第一个值表示上边宽度，第二个值表示左右方向宽度，第三个值表示下边宽度。
   4. 如果为 border-width 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框宽度。

边框颜色

1. border-color 属性来单独设置边框的颜色（一并设置上、右、下和左 4 个方向的边框）
2. border-color 属性还可以划分为如下所示的 4 个方向的属性：
   1. border-top-color 属性：表示顶部的边框颜色
   2. border-right-color 属性：表示右边的边框颜色
   3. border-bottom-color 属性：表示底部的边框颜色
   4. border-left-color 属性：表示左边的边框颜色
3. border-color 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框颜色
4. 如果为 border-color 属性设置一个值，则同时设置边框的四个方向的颜色。
5. 如果为 border-color 属性设置两个值，则第一个值表示上下方向的颜色，第二个值表示左右方向的颜色。
6. 如果为 border-color 属性设置三个值，则第一个值表示上边颜色，第二个值表示左右方向颜色，第三个值表示下边颜色。
7. 如果为 border-color 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框颜色。

边框样式

1. border-style 属性来单独设置边框的样式（一并设置上、右、下和左 4 个方向的边框）

2. 关键字	描述
   none	不显示边框，优先级别最低
   hidden	不显示边框，优先级别最高
   dotted	显示为一系列圆点
   dashed	显示为一系列短的方形虚线
   solid	显示为一条实线
   double	显示为一条双实线
   groove	显示为有雕刻效果的边框，样式与 ridge 相反
   ridge	显示为有浮雕效果的边框，样式与 groove 相反
   inset	显示为有陷入效果的边框，样式与 outset 相反
   outset	显示为有突出效果的边框，样式与 inset 相反

3. border-style 属性还可以划分为如下所示的 4 个方向的属性：

   1. border-top-style 属性：表示顶部的边框样式
   2. border-right-style 属性：表示右边的边框样式
   3. border-bottom-style 属性：表示底部的边框样式
   4. border-left-style 属性：表示左边的边框样式

4. border-style 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框样式

   1. 如果为 border-style 属性设置一个值，则同时设置边框的四个方向的样式。
   2. 如果为 border-style 属性设置两个值，则第一个值表示上下方向的样式，第二个值表示左右方向的样式。
   3. 如果为 border-style 属性设置三个值，则第一个值表示上边样式，第二个值表示左右方向样式，第三个值表示下边样式。
   4. 如果为 border-style 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框样式。

边框圆角

1. border-radius 属性用来设置边框的圆角（同时设置 4 个角为圆角）
2. 使用一个半径的话确定的是圆形，如果使用两个半径的话确定的是椭圆形
   1. border-radius: 10px;
      border-radius: 10px / 20px;
      1. radius：表示圆形的半径。
      2. horizontal-radius / vertical-radius：表示椭圆形的长半径和短半径，其中 horizontal-radius 表示椭圆形的水平方向的半径，vertical-radius 表示椭圆形的垂直方向的半径。
3. 分别设置这 4 个角为圆角效果的方式
   1. border-top-left-radius 属性：设置边框左上角的圆角效果。
   2. border-top-right-radius 属性：设置边框右上角的圆角效果。
   3. border-bottom-right-radius 属性：设置边框右下角的圆角效果。
   4. border-bottom-left-radius 属性：设置边框左下角的圆角效果。
4. 还可以通过设置 border-radius 属性的 1 到 4 个值来分别设置 4 个角的边框圆角效果
   1. 如果为 border-radius 属性设置一个值，则同时设置边框的四个圆角。
   2. 如果为 border-radius 属性设置两个值，则第一个值表示左上和右下圆角，第二个值表示右上和左下圆角。
   3. 如果为 border-radius 属性设置三个值，则第一个值表示左上圆角，第二个值表示右上和左下圆角，第三个值表示右下圆角。
   4. 如果为 border-radius 属性设置四个值，则分别表示设置左上、右上、右下和左下圆角。

边框图像

1. border-image 属性允许使用图像来设置边框

 <style>
    .example-element {
      width: 200px;
      height: 30px;
      border: 30px solid transparent;                    <-先设置边框
    }

    .box {
      border-image: url('./files/border.png') 30;         <-在边框中插入图片 设置图片的宽度
    }
 </style>

{
border-image: url(’./files/border.png’) 30; <-在边框中插入图片 设置图片的宽度
}

[外链图片转存中...(img-gcS8tb1b-1580972182347)]





2. border-image：默认为图片的拉伸