HTML5基础——13、CSS盒子模型-优快云博客

大家好，我是阿赵。继续学习H5，这次学习的是盒子模型。

一、盒子模型的概念

一个页面，看起来好像很复杂，但实际上它的内容都可以被划分成很多个矩形方块。
我们可以理解这些矩形方块是一个一个的盒子，盒子里面可以继续放别的方块，也就是别的盒子。然后一个完整的页面布局，就是由各种各样结构的盒子组成的。
比如
在这里插入图片描述

拿这个网站的顶部显示举例，整个头部是一个盒子，里面在分了好几个小盒子，然后小盒子里面又包含了更多的小盒子。
如果用Chrome浏览器的调试工具，就可以轻松的选择出一个个的盒子：
在这里插入图片描述

在这里插入图片描述

二、盒子的组成

从Chrome工具里面的计算样式看，可以看出一个元素盒子的构成
在这里插入图片描述

在这里插入图片描述

可以看出，一个盒子从内到外由这些部分组成：
1、内容content
2、内边距padding
3、边框border
4、外边距margin
下面是一个简单的例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 2px solid black;
      width: 200px;
      height: 100px;
      padding: 20px;
      margin: 30px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
</body>

显示
在这里插入图片描述

分析：
在这里插入图片描述

三、边框（border）

1、边框属性

指定边框时，可以有三个属性指定

1. border-width

边框的宽度，可以直接指定像素，比如1px

2. border-style

边框的风格有：
none:默认值，没有边框
solid:单实线边框
在这里插入图片描述

dashed:虚线边框
在这里插入图片描述

dotted:点线边框
在这里插入图片描述

3. border-color

边框的颜色
在这里插入图片描述

这三个属性，可以分开写：

  border-width: 2px;
  border-style: solid;
  border-color: black;

也可以写在一行：

border: 2px solid black;

2、边框影响盒子大小

需要注意的是，边框是会影响盒子的实际大小的，比如：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
  <div>这是一个盒子</div>
</body>

这里2个边框都为1的盒子在一起，显示是这样：
在这里插入图片描述

如果增大盒子的边框：

border: 20px solid black;

显示会变成
在这里插入图片描述

可以看到，中间的内容部分是没有变化的，还是200px和100px，但由于边框变粗了，导致整个盒子都变大了。

3、圆角边框

可以通过border-radius指定边框的圆角，比如

div {
  border: 1px solid black;
  border-radius: 10px;
  width: 200px;
  height: 100px;
}

显示的效果是：
在这里插入图片描述

四、内边距（padding）

内边框有上下左右4个边可以指定：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      padding-left: 5px;
      padding-right: 10px;
      padding-top: 15px;
      padding-bottom: 20px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
</body>

在这里插入图片描述

值得注意的是，我们也可以直接通过padding来指定内边框，比如：

padding:15px 10px 20px 5px;

同时输入4个数字，分别对应上、右、下、左，记忆的方法是第一个是上，然后顺时针方向走。
然后padding这个属性可以简略写，不必全写4个数字，比如：
一个数字：

padding:5px;

代表上下左右全部内边距都是5px

padding:5px 10px;

代表上下内边距是5px，左右是10px

padding：5px 10px 20px;

代表上内边距是5px，左右是10px，下是20px

最后需要注意的是，内边距同样会影响盒子的大小：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      padding: 50px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
  <div>这是一个盒子</div>
</body>

在这里插入图片描述

五、外边距（margin）

外边距和内边距一样，也是有上下左右的设置的

div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

同样也可以通过margin同时设置4个边

margin: 5px 10px 15px 20px;

顺序和规则都和padding一样，所以不再重复。
在这里插入图片描述

需要注意一下外边距的一些特殊用法。

1、水平居中

如果这个盒子本身指定了宽度，然后在指定margin的左右外边距时使用auto，那么这个盒子就会在页面居中：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      margin: 0px auto;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
  <div>这是一个盒子</div>
</body>

显示效果：

在这里插入图片描述

2、外边框合并

假如相邻的两个盒子指定了外边距

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      margin-top: 50px;
      margin-bottom: 10px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
  <div>这是一个盒子</div>
</body>

这个例子，上外边距指定了50像素，下外边距指定了10像素，思考一下，最终的结果，两个盒子之间的外边距会是多少呢？是50+10像素吗？
从调试工具可以看看：
在这里插入图片描述

如果相邻的2个盒子都指定了外边距，是会使用值较大的那个外边距作为最终的显示的。

3、清除内外边距

对于内外边距的默认值，不同的浏览器可能会有不同的值，有些浏览器默认会有内外边距。
所以如果想达到显示的样式同一，最理想是直接指定内外边距，或者设置取消外边距：

* {
  padding:0; /* 清除内边距 */
  margin:0; /* 清除外边距 */
}

六、盒子阴影

可以通过box-shadow指定盒子的阴影效果。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      box-shadow: 10px 10px 5px #888888;
      width: 200px;
      height: 100px;
    }
  </style>
  </style>
</head>

<body>
  <div>这是一个盒子</div>
</body>

显示
在这里插入图片描述

语法是：

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

参数的含义分别是：
h-shadow：x偏移，必须输入
v-shadow：y偏移，必须输入
blur：模糊强度，可选
spread：音乐尺寸，可选
color：影子颜色，可选
inset：内部阴影，可选
如果改成这样：

box-shadow: 10px 10px 5px 10px #888888 inset;

效果就会变成：
在这里插入图片描述

在这里插入图片描述

HTML5基础——13、CSS盒子模型

一、盒子模型的概念

二、 盒子的组成

三、 边框（border）

1、边框属性

1. border-width

2. border-style

3. border-color

2、边框影响盒子大小

3、 圆角边框

四、 内边距（padding）

五、 外边距（margin）

1、 水平居中

2、 外边框合并

3、 清除内外边距

六、 盒子阴影

二、盒子的组成

三、边框（border）

3、圆角边框

四、内边距（padding）

五、外边距（margin）

1、水平居中

2、外边框合并

3、清除内外边距

六、盒子阴影