盒模型

基础模型

border

border 属性用于设置元素的边框属性，其用法如下所示：

border: border-width border-style border-color;

属性值说明如下：

border-width：是边框宽度，宽度一般用数值即可。
border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
border-color：是边框线的颜色。

padding

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      在当今社会中，Web已经成为网络信息共享和发布的主要形式。
      要想开发Web应用系统，就必须掌握前端技术。
      本书从HTML、CSS和JavaScript三个方面系统地介绍了Web前端开发。
    </p>
  </body>
</html>

margin

margin 属性是用来设置元素的外边距的。

通用格式如下：

margin: 上边距 右边距 下边距 左边距;

盒子阴影

box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必选，水平阴影的位置，允许负值。
v-shadow	必选，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的大小。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        text-align: center;
        background-color: green;
        box-shadow: 10px 10px 5px #26ad8c;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

盒模型

# 盒模型

# 基础模型

# border

# padding

# margin

# 盒子阴影

盒模型

基础模型

border

padding

margin

盒子阴影