盒模型(box)_ 字节宝

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

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

内边距

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

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

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

外边距

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

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

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

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

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

可以使用 margin 0 auto 实现。

边框

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

代码语言：javascript复制

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

border: none;是无边框

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

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

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

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

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

代码语言：javascript复制

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

盒模型也可以添加阴影

代码语言：javascript复制

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

0 人点赞