网络日志

CSS 盒子模型

盒子模型,就是把 HTML 页面中的元素看成一个个矩形的盒子,也就是一个能盛装内容的容器。

CSS 盒子模型包括:边框、外边距、内边距、实际内容。

1、边框(border)

div {
  width: 200px;
  height: 200px;

  /* border-width 边框粗细,一般指定为具体像素值 */
  border-width: 5px;

  /* border-style 边框样式,常用的有:
     solid: 实线边框 |dashed: 虚线边框 |dotted: 点线边框 */
  border-style: solid;

  /* border-color 边框颜色 */
  border-color: blue;
}

边框属性可以简写为:

border: 5px solid blue;

我们还可以单独设置某个边框的样式:

border-top: 5px solid blue;

在表格中,每一个单元格是一个盒子,在设置单元格边框时,相邻单元格的边框会叠加,变成 2 倍的 border-width,此时可以用 border-collapse 合并边框:

border-collapse: collapse;

需要注意的是,边框会影响盒子实际的大小,在上面的代码中,盒子宽高都是 200px,边框为 5px,那么盒子实际大小为 210px * 210px。

2、内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离。

padding-left: 8px;     /*左内边距*/
padding-right: 8px;    /*右内边距*/
padding-top: 8px;      /*上内边距*/
padding-bottom; 8px;   /*下内边距*/

内边距属性简写可以有一到四个值:

  • padding: 8px; ( 代表上下左右的内边距都是 8px )
  • padding: 8px 10px; ( 代表上下内边距为 8px,左右内边距为 10px )
  • padding: 8px 10px 20px; ( 代表上内边距为 8px,左右内边距为 10px,下内边距为 20px )
  • padding: 8px 10px 16px 20px; ( 代表上内边距为 8px,右内边距为 10px,下内边距为 16px,左内边距为20px,记忆:顺时针方向

当我们为盒子添加 padding 后,内容与边框之间有了距离,padding 影响了盒子的实际大小

如果 盒子已经有了宽度和高度,设置 padding 会撑大盒子;如果 盒子本身没有指定width/height,则设置 padding 不会撑大盒子

3、外边距(margin)

margin 属性用于设置外边距,即盒子和盒子之间的距离。

外边距的用法和 padding 一致。

在实际开发中,外边距可以让 块级盒子水平居中

.box {
  width: 500px;    /* 1、为盒子设置宽度 */
  margin: 0 auto;    /* 2、设置盒子的左右外边距都为 auto */
}

如果想让 行内元素或者行内块元素水平居中,可以给其父元素添加 text-align: center;

相邻块元素垂直外边距的合并

当上下两个相邻的块元素相遇,如果上面的元素设置了 margin-bottom,下面的元素有 margin-top,则他们之间的垂直距离不是二者之和,而是取两个值中的较大者,这种现象被称为 相邻块元素垂直外边距的合并

.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 10px;
}
<div>
  <!-- 两个盒子的实际间距为 20px -->
  <div class="box1">盒子 1</div>
  <div class="box2">盒子 2</div>
</div>

这种情况,我们 只给其中一个盒子设置 margin 即可

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素,父元素有上外边距,同时子元素也有上外边距,此时 父元素会塌陷较大的外边距

.father {
  margin-top: 20px;
}
.child {
  margin-top: 50px;
}
<div>
  <!-- 父元素实际上外边距为 50px -->
  <div class="father">
    <div class="child">我是子元素</div>
  </div>
</div>

解决方案有三种:

  1. 为父元素设置上边框( border-top )
  2. 为父元素定义上内边距( padding-top )
  3. 为父元素添加属性 overflow: hidden

4、CSS3 新特性

4.1 圆角边框

在 CSS3 中新增了圆角边框样式,这样我们可以给盒子设置圆角了。

border-radius: 20px;
border-radius: 50%;

参数可以是数值,也可以是百分比,如果盒子是个正方形,设置 border-radius 为 50%,就可以将盒子设置成一个圆形。

border-radius 是个简写属性,我们也可以单独设置盒子某个角的圆角样式:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

4.2 盒子阴影

在 CSS3 中新增了 box-shadow 属性,可以为盒子添加阴影。

/* 语法:box-shadow: h-shadow v-shadow blur spread color inset */
box-shadow: 10px 10px 6px 4px rgba(0,0,0,.3);
说明
h-shadow必需。水平方向阴影的位置,允许负值。
v-shadow必需。垂直方向阴影的位置,允许负值。
blur可选。模糊距离,值越大阴影越模糊。
spread可选。阴影尺寸。
color可选。阴影的颜色。
inset可选。可以将外部阴影改为内部阴影。

- 默认的是外阴影(outset),但是不可以写这个值,不然会导致阴影无效- 设置阴影不占盒子空间,不影响盒子排列