Logo

# CSS3教程 - 6 盒子模型2

继续盒子模型...

# 6.7 盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。

但是这个规则是可以修改的。

例如：

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #bfa;
    padding: 10px;
    border: 10px solid red;
  }
</style>
<body>
  <div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

上面 box 的可见框尺寸为：内容区(100) + 内边距(10*2) + 边框(10*2) = 140px；

这里盒子尺寸的计算方式是可以使用 box-sizing 属性来修改的。

box-sizing 可选值：

  • content-box ：默认值，宽度和高度用来设置内容区的大小。
  • border-box ：宽度和高度用来设置整个盒子可见框的大小。当 box-sizing 设置为 border-box 时 width和 height 指的是内容区、内边距和边框的总大小。
.box {
  width: 100px;
  height: 100px;
  background-color: #bfa;
  padding: 10px;
  border: 10px solid red;
  box-sizing: border-box;
}
1
2
3
4
5
6
7
8

当给 box 设置 box-sizing: border-box; 会明显发现元素尺寸变小了。因为内容区 + 内边距 + 边框 = 100px；

通过设置 box-sizing: border-box; 我们在调整 padding 或 border 的时候 ，就不会影响元素的整体大小了。

# 6.8 轮廓

outline 用来设置元素的轮廓线，用法和 border 一样。

轮廓和边框不同点是，轮廓不会影响到可见框的大小。

# 1 边框

举个栗子：

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #bfa;
  padding: 10px;
  border: 10px solid red;
}
</style>

<body>
  <div class="box"></div>
  <span>Hello</span>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过 border 设置边框，显示如下：

# 2 轮廓

举个栗子：

.box {
  width: 100px;
  height: 100px;
  background-color: #bfa;
  padding: 10px;
  outline: 10px solid red;
}
1
2
3
4
5
6
7

通过 outline 设置轮廓，显示如下：

可以很明显看到 outline 与 border的区别， outline 没有影响 元素的尺寸和布局。

outline 一般有什么使用场景的？

我们一般会在将鼠标移入某个元素的时候，给元素添加一个边框，添加的边框还不影响元素的布局，这个时候 outline 就比 border 合适。

.box:hover {
  outline: 10px red solid;
}
1
2
3

可以很清晰地看出，outline 属性并没有改变盒子的大小和布局。

# 6.9 阴影

box-shadow 属性用于在一个元素的框架周围添加阴影效果，阴影不会影响页面布局。

举个栗子：

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #bfa;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
</style>

<body>
	<div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

显示如下：

解释一下参数：

/*
第一个值：阴影的水平偏移量
第二个值：阴影的垂直偏移量
第三个值：阴影的模糊半径，如果不设置水平和垂直的偏移量，且不设置模糊半径，那么阴影是在元素的正下方，将看不见阴影
第四个值：阴影的颜色，一般会设置一个透明度，会显得更逼真。
*/
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
1
2
3
4
5
6
7

# 6.10 圆角

border-radius ：属性使一个元素的角变成圆角。

举个栗子：

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 设置元素的圆角 */
    border-radius: 20px;
  }
</style>

<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
  • border-radius 的值设置的是圆的半径大小。

显示如下：

# 1 使用多个值设置

设置 border-radius 的时候，可以使用两个值、三个值、和四个值来设置：

  • 一个值：设置 4 个角
  • 四个值：左上角 右上角 右下角 左下角
  • 三个值：左上角 右上角/左下角 右下角
  • 两个值：左上角/右下角 右上角/左下角
border-radius: 20px 30px;
1

效果显示如下：

# 2 单独设置一个角

border-radius 还可以拆分成四个角，单独去设置，对应的属性如下：

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

举个栗子：

border-top-left-radius: 20px;
1

显示如下：

# 3 设置椭圆角

可以设置一个半径来做圆角，也可以设置两个半径来做椭圆角。圆角的半径原理如下图：

举个栗子：

 border-top-left-radius: 20px 40px;
1

# 4 圆

我们可以将一个元素通过 border-radius 属性设置显示为圆形。

原理很简单，就是将一个正方形元素的四个角的圆角半径设置为正方形的一半。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
1
2
3
4
5
6

# 5 椭圆

上面设置成圆形是因为元素的长宽是一样的，如果元素的长和宽不同，则会变成椭圆形。

.box {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}
1
2
3
4
5
6

# 6.11 透明度

在 CSS 中，透明度可以通过 opacity 属性来控制，透明度影响元素及其所有子元素，包括文本和背景。

透明度的值范围从 0 到 1，如果将一个元素的透明度设置为 0.5，那么该元素及其所有内容都会显示为半透明。

  • 0 表示完全透明，元素不可见；
  • 1 表示完全不透明，元素完全可见；

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: skyblue
      }

      .box2 {
        opacity: 0.3;  /* 设置透明度 */
        width: 100px;
        height: 100px;
        background-color: white;
      }
      </style>
  </head>

  <body>
    <div class="box1">
      <div class="box2">
        foooor
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  • 上面设置父元素为蓝色背景，子元素为白色，并设置了透明度，所以可以透过子元素看到父元素。

显示如下：

← 07-浮动 →