盒模型(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 轴上移动,向下为正
  • 阴影模糊半径:就是边线的清晰度
  • 阴影扩散半径:就是向外伸展
  • 阴影颜色:就是矩形下面那个矩形的背景色。