CSS 中的盒子模型

莫笑沉吟
461 阅读9分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

CSS 中的盒子模型

根据盒子模型的概念以及组成部分，对应的 CSS 属性具有如下几种：

  • width 属性和 height 属性设置盒子模型的内容区在页面中所占区域。

  • border 属性、padding 属性和 margin 属性分别设置盒子的边框、内边距和外边距。

设置盒子模型的大小

在默认情况下，一个元素的盒子模型的大小是刚好可以容纳其内容的（文本、图片或视频等），并且会根据其内容变化而变化。当然，也可以通过 CSS 的 width 属性和 height 属性设置盒子模型最终显示的宽度和高度，从而改变盒子模型的大小。

实际上盒子模型的宽高属性值不止一个。

  • min-width 属性：用来为 HTML 元素设置最小宽度。浏览器显示其元素时，元素的宽度最小不能小于该值。

  • max-width 属性：用来为 HTML 元素设置最大宽度。浏览器显示其元素时，元素的宽度最大不能大于该值。

  • min-height 属性：用来为 HTML 元素设置最小高度。浏览器显示其元素时，元素的高度最小不能小于该值。

  • max-height 属性：用来为 HTML 元素设置最大高度。浏览器显示其元素时，元素的高度最大不能大于该值。

盒子阴影

CSS box-shadow 属性是用来为 HTML 元素的盒子模型的边框设置阴影效果，该属性的工作原理与 text-shadow 属性类似。。box-shadow 属性的语法结构如下所示：

selector {
	box-shadow: color offset-x offet-y blur-raduis spread-radius;
}

上述语法结构中的具体值的含义如下：

  • color：可选项，设置盒子边框的阴影颜色。

  • offset-x：必选项，设置盒子边框的阴影在水平方向的偏移量。

  • 如果值小于 0 的话，则表示向左偏移。

  • 如果值等于 0 的话，则表示水平方向不发生任何偏移。

  • 如果值大于 0 的话，则表示向右偏移。

  • offset-y：必选项，设置盒子边框的阴影在垂直方向的偏移量。

  • 如果值小于 0 的话，则表示向上偏移。

  • 如果值等于 0 的话，则表示垂直方向不发生任何偏移。

  • 如果值大于 0 的话，则表示向下偏移。

  • blur-raduis：可选项，设置盒子边框的阴影模糊半径。

    如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡。

  • spread-radius：可选项，设置盒子边框的阴影扩散半径。

    如果没有指定，则默认为 0，此时的阴影与元素是同大小的。值越大，模糊扩散半径越大。

盒子边框

什么是盒子模型的边框

边框是 CSS 盒子模型中的重要组成部分。简单来说，CSS 提供了 border 属性表示边框。但在实际应用时，边框的复杂度远不止于此。

由于 CSS3 版本为边框新增了很多属性，目前边框可以划分为如下所示的功能：

  • 边框宽度

  • 边框颜色

  • 边框样式

  • 边框圆角

  • 边框图像

border 属性

CSS border 属性用来设置盒子模型的边框，该属性的值具有 3 个，分别为宽度、样式和颜色。该属性的语法结构如下所示：

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

  • border-width：表示边框的宽度。

  • border-style：表示边框的样式。

  • border-color：表示边框的颜色。

  • border-top 属性：表示顶部的边框

  • border-right 属性：表示右边的边框

  • border-bottom 属性：表示底部的边框

  • border-left 属性：表示左边的边框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边框的样式</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border-width: 10px;
      border-color: lightsalmon;

      /* solid表示实线 */
      border-top-style: solid;
      /* double表示双实线 */
      border-right-style: double;
      /* dashed表示线状虚线 */
      border-bottom-style: dashed;
      /* dotted表示点状虚线 */
      border-left-style: dotted;

      /* border-style: solid double dashed dotted; */
    }
  </style>
</head>

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

</html>

除了可以通过表示 4 个方向的属性来设置边框宽度之外，还可以通过设置 border-width 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框宽度。具体如下所示：

  • 如果为 border-width 属性设置一个值，则同时设置边框的四个方向的宽度。

  • 如果为 border-width 属性设置两个值，则第一个值表示上下方向的宽度，第二个值表示左右方向的宽度。

  • 如果为 border-width 属性设置三个值，则第一个值表示上边宽度，第二个值表示左右方向宽度，第三个值表示下边宽度。

  • 如果为 border-width 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框宽度。

注意：在设置边框样式和边框颜色时与边框宽类填写4个值时效果类似。

如上图的结果所示，我们可以看到通过 CSS border-color 属性设置元素的边框颜色，会一并设置上、右、下和左 4 个方向的边框颜色。实际上，border-color 属性还可以划分为如下所示的 4 个方向的属性：

  • border-top-color 属性：表示顶部的边框颜色

  • border-right-color 属性：表示右边的边框颜色

  • border-bottom-color 属性：表示底部的边框颜色

  • border-left-color 属性：表示左边的边框颜色

除了可以通过表示 4 个方向的属性来设置边框颜色之外，还可以通过设置 border-color 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框颜色。具体如下所示：

  • 如果为 border-color 属性设置一个值，则同时设置边框的四个方向的颜色。

  • 如果为 border-color 属性设置两个值，则第一个值表示上下方向的颜色，第二个值表示左右方向的颜色。

  • 如果为 border-color 属性设置三个值，则第一个值表示上边颜色，第二个值表示左右方向颜色，第三个值表示下边颜色。

  • 如果为 border-color 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框颜色。

border-style 属性的备选值，也就是用来描述边框样式的关键字，如下表所示：

P_E9V@C5_UBY1LB__CZEGVC.png

CSS border-style 属性用来设置元素的边框样式，会一并设置上、右、下和左 4 个方向的边框样式。实际上，border-style 属性还可以划分为如下所示的 4 个方向的属性：

  • border-top-style 属性：表示顶部的边框样式

  • border-right-style 属性：表示右边的边框样式

  • border-bottom-style 属性：表示底部的边框样式

  • border-left-style 属性：表示左边的边框样式

CSS border-style 属性用来设置元素的边框样式，会一并设置上、右、下和左 4 个方向的边框样式。实际上，border-style 属性还可以划分为如下所示的 4 个方向的属性：

  • border-top-style 属性：表示顶部的边框样式

  • border-right-style 属性：表示右边的边框样式

  • border-bottom-style 属性：表示底部的边框样式

  • border-left-style 属性：表示左边的边框样式

除了可以通过表示 4 个方向的属性来设置边框样式之外，还可以通过设置 border-style 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框样式。具体如下所示：

  • 如果为 border-style 属性设置一个值，则同时设置边框的四个方向的样式。

  • 如果为 border-style 属性设置两个值，则第一个值表示上下方向的样式，第二个值表示左右方向的样式。

  • 如果为 border-style 属性设置三个值，则第一个值表示上边样式，第二个值表示左右方向样式，第三个值表示下边样式。

  • 如果为 border-style 属性设置四个值，则分别表示设置上、右、下和左四个方向的边框样式。

边框圆角

CSS3版本新增了border-radius属性用来设置边框的圆角。如果使用一个半径的话确定的是圆形，如果使用两个半径的话确定的是椭圆形，这个圆形或者椭圆形与边框的交集形成了圆角的效果。如下图所示:

_NJJ~W64HHFAKRP1AEEDXQS.png

border-radius 属性的值表示的与边框交集的圆形的半径或者椭圆形的长半径与短半径，其语法结构如下所示：

border-radius: radius;
border-radius: horizontal-radius / vertical-radius;

  • radius：表示圆形的半径。

  • horizontal-radius / vertical-radius：表示椭圆形的长半径和短半径，其中 horizontal-radius 表示椭圆形的水平方向的半径，vertical-radius 表示椭圆形的垂直方向的半径。

border-radius 属性一旦设置边框的圆角效果，会同时设置 4 个角为圆角。CSS3 同样提供了分别设置这 4 个角为圆角效果的方式，如下所示：

  • border-top-left-radius 属性：设置边框左上角的圆角效果。

  • border-top-right-radius 属性：设置边框右上角的圆角效果。

  • border-bottom-right-radius 属性：设置边框右下角的圆角效果。

  • border-bottom-left-radius 属性：设置边框左下角的圆角效果。

除了可以通过表示 4 个角的属性来设置边框圆角效果之外，还可以通过设置 border-radius 属性的 1 到 4 个值来分别设置 4 个角的边框圆角效果。具体如下所示：

  • 如果为 border-radius 属性设置一个值，则同时设置边框的四个圆角。

  • 如果为 border-radius 属性设置两个值，则第一个值表示左上和右下圆角，第二个值表示右上和左下圆角。

  • 如果为 border-radius 属性设置三个值，则第一个值表示左上圆角，第二个值表示右上和左下圆角，第三个值表示右下圆角。

  • 如果为 border-radius 属性设置四个值，则分别表示设置左上、右上、右下和左下圆角。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边框的圆角</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }

    .box1 {
      border-radius: 10px;
    }

    .box2 {
      border-radius: 20px / 10px;
    }

    .box3 {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="box2"></div>

  <div class="box3"></div>
</body>

</html>
avatar
文章
阅读
粉丝