盒模型(box)

• ， 5 2月 2021
• 作者 847954981@qq.com
• 前端学习, 我的编程之路

盒模型(box)

在网页制作中，我们往往需要区块形的区域来合理放置网页内容，盒模型就是其方法。

盒模型就是在 <div> 的基础上加上固定的 长(height) 和宽(width)

内边距

盒模型可以通过 padding 的属性来添加内边距 方法是

1. 通过 padding-top/right/bottom/left 来添加 上/右/下/左 的内边距
2. 其也可以通过 padding：30px 20px 10px 40px; 来简写分别添加 上/右/下/左 的内边距

ps:这里第一个数值一定是上内边距，第二个一定是右内边距，如果其后再无数值，则上内边距等于下内边距左内边距等于右内边距。

这里有一种叫 box-sizing的方法，来表示一个元素的长宽表示方式

外边距

盒模型可以通过 margin 的属性来添加外边距,书写方式和内边距类似

不过两个盒模型直接的距离要有所注意，

1.如果是左右两个盒模型，那么它们间的距离为两者之间左右外边距之和。

2.如果是上下两个盒模型，那么它们间的距离为两者之间上下外边距的最大值，因而一般我们只设置下外边距。

margin 还有的用处是让盒模型在另一个模型内左右对齐(前提是有宽度）

可以使用 margin 0 auto 实现。

边框

在使用盒模型，我们可以通过 border 来添加盒的边框

  border-width: 2px; 边框粗细
  border-color: grey; 边框颜色
  border-style: solid; 边框样式 如solid为实线 dashed为虚线

border: none;是无边框

边框也可如内边距一样简写

如 border：20px solid grey; 分别为粗细 /样式/颜色

当然 对于 上/右/下/左 方向上的边框可以单独设置(也适用无边框)：

如 border-top-color: grey; 其余类比前面内容 这种方法也适用上面的简写方法。

如果认为直角模型比较单调难看，可以使用 border-radius: 18px; 方法来变为圆角 也适用于 各个位置角单独变化 但是其表示不再是 上下左右的方法，而是左上角，右上角，左下角，右下角：

  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 15px;

盒模型也可以添加阴影

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

• x 偏移量：在 x 轴上移动，向右为正
• y 偏移量：在 y 轴上移动，向下为正
• 阴影模糊半径：就是边线的清晰度
• 阴影扩散半径：就是向外伸展
• 阴影颜色：就是矩形下面那个矩形的背景色。